상수

- 생성 시점에 만들어진 값을 변경할 수 없다.


- 상수 객체:

=> 객체 자체를 다른 객체로 교체하는 행위는 실패한다

=> 그 외의 변경은 객체 안의 변화로 관여하지 않는다

=> 따라서 객체 내의 변경 행위는 허용


const DISCOUNT_RATE = 0.9;
const DiscountRate = {
sprint: 0.3,
summer: 0.2,
fall: 0.6
};

DISCOUNT_RATE = 0.3; // 실패
DiscountRate.winter = 0.1; // 성공
delete DiscountRate.winter; // 성공
DiscountRate = {}; // 실패


'javascript' 카테고리의 다른 글

기본 네트워크 구조  (0) 2017.10.11
부수효과 (2)  (0) 2017.09.13
부수효과  (0) 2017.09.13
함수의 유효 범위 - 내부 함수  (0) 2017.09.13
변수의 유효 범위  (0) 2017.09.13

부수효과 (2)


// 외부의 상태라 해도 변수가(var or let)이 아닌 상수일(const)일 경우
// 값이 변하지 않기 때문에 부수효과를 발생시키지 않는다.
const var discountRate = 0.1;

// 외부에 어떤 상태에도 의존하지 않는 함수로 순수 함수다
function getSalesPriceV1(price){
var discountRate = 0.1;

return price - (price * discountRate);
}

// 외부에 discountRate 상태를 참조하고 있기 때문에 순수 함수가 아니다.
function getSalesPriceV2(price){
return price - (price * discountRate);
}

getSalesPriceV1(2500);
getSalesPriceV2(2500);


'javascript' 카테고리의 다른 글

기본 네트워크 구조  (0) 2017.10.11
상수  (0) 2017.09.13
부수효과  (0) 2017.09.13
함수의 유효 범위 - 내부 함수  (0) 2017.09.13
변수의 유효 범위  (0) 2017.09.13

부수효과


- 순수한 함수 vs. 순수하지 않은 함수

=> 순수한 함수: 외부의 상태를 참조하지 않는 함수

=> 순수한 함수는 입력이 같으면 언제나 동일한 값을 반환

=> 예를들어 -1을 입력받아 2를 반환하는 순수 함수는 언제나 동일한 동작을 보장한다


var discountRate = 0.1;

// 외부에 어떤 상태에도 의존하지 않는 함수로 순수 함수다
function getSalesPriceV1(price){
var discountRate = 0.1;

return price - (price * discountRate);
}

// 외부에 discountRate 상태를 참조하고 있기 때문에 순수 함수가 아니다.
function getSalesPriceV2(price){
return price - (price * discountRate);
}

getSalesPriceV1(2500);
getSalesPriceV2(2500);


'javascript' 카테고리의 다른 글

상수  (0) 2017.09.13
부수효과 (2)  (0) 2017.09.13
함수의 유효 범위 - 내부 함수  (0) 2017.09.13
변수의 유효 범위  (0) 2017.09.13
객체 공부 (5)  (0) 2017.09.13

함수의 유효 범위 - 내부 함수


- 내부함수: 함수 내에 작성된 함수

=> 함수는 함수를 포함할 수 있음

=> 내부 함수의 접근 방식은 스코프 접근 원칙과 동일

=> 따라서 내부 함수는 함수 내부에서만 호출될 수 있음


var name = 'global';

function foo(){
var name = 'foo';

console.log(`여기는 foo:${name} 입니다.`);

// foo 함수의 내부 함수
function bar() {
var name = 'bar';

console.log(`여기는 bar:${name} 입니다.`);
}

// foo 함수의 내부 함수
function zoo() {
var name = 'zoo';

console.log(`여기는 zoo:${name} 입니다.`);

bar();
}
bar();
zoo();
}

foo();

console.log(`여기는 global:${name} 입니다.`);


>> 결과


'javascript' 카테고리의 다른 글

부수효과 (2)  (0) 2017.09.13
부수효과  (0) 2017.09.13
변수의 유효 범위  (0) 2017.09.13
객체 공부 (5)  (0) 2017.09.13
느낌표 두 개(!!)의 역할  (0) 2017.09.13

변수의 유효 범위


- 자바스크리브에서 유효 범위는 전역, 지역 두 가지의 범위를 지원

- ECMA2015 스펙에선 블록 범위를 지원 (let 으로 변수 선언)


var agreeValue = 'Y';

function validate(formData){
var isValid = true;

if(formData.agree !== agreeValue){
alert('약관에 동의하셔야 회원 가입할 수 있습니다.');
isValid = false;
}

if(formData.name == '') {
alert('이름을 입력해 주세요');
isValid = false;
}
return isValid;
}

// validate 함수 내의 isValid는 함수 밖에서는 접근할 수 없다.
// 함수 호출시 함수 내(지역)에서 생성되고 함수 종료와 함께 제거되기 때문
var isValid = validate({
name: '김민태',
agreeValue: 'N'
});

console.log(isValid);


'javascript' 카테고리의 다른 글

부수효과  (0) 2017.09.13
함수의 유효 범위 - 내부 함수  (0) 2017.09.13
객체 공부 (5)  (0) 2017.09.13
느낌표 두 개(!!)의 역할  (0) 2017.09.13
객체 공부 (4)  (0) 2017.09.13

객체 공부 (5)


<!DOCTYPE html>
<html>
<body>

<input type="text" name="title" id="title">
<button type="button" name="btn-add" id="btn-add">등록</button>
<ul id="todo-list">
</ul>

<script>
/**
인수로서의 객체와 함수 기본 1
객체 인수
**/
var todos = [];

function newTodo(event) {
let ul = document.getElementById('todo-list');
let title = document.getElementById('title');
let todosHTML;

todos.push(title.value);

title.value = '';
todosHTML = '';


for(let i=0; i < todos.length; i++){
todosHTML = `${todosHTML}<li>${todos[i]}</li>`;
}

ul.innerHTML = todosHTML;
}

var btnAdd = document.getElementById('btn-add');
btnAdd.addEventListener('click', newTodo);

</script>
</body>
</html>



'javascript' 카테고리의 다른 글

함수의 유효 범위 - 내부 함수  (0) 2017.09.13
변수의 유효 범위  (0) 2017.09.13
느낌표 두 개(!!)의 역할  (0) 2017.09.13
객체 공부 (4)  (0) 2017.09.13
객체 공부 (3)  (0) 2017.09.13

느낌표 두 개(!!)의 역할

출처: http://nopanic.tistory.com/5


let a = 0;
console.log(a) // 0
console.log(!a) // true
console.log(!!a) // false

let b = null;
console.log(b) // true
console.log(!b) // true
console.log(!!b) // false

let c = undefined;
console.log(c) // undefined
console.log(!c) // true
console.log(!!c) // false



'javascript' 카테고리의 다른 글

변수의 유효 범위  (0) 2017.09.13
객체 공부 (5)  (0) 2017.09.13
객체 공부 (4)  (0) 2017.09.13
객체 공부 (3)  (0) 2017.09.13
객체 공부 (2)  (0) 2017.09.13

객체 공부 (4)

/**
인수로서의 객체와 함수 기본 1
객체 인수
**/
var todo = {
items: [],
status: {
allCount: 0,
completeCount: 0
},

// getter와 setter 형식을 이용하여 객체 외부에선
// 속성으로 표현되나 내부에선 함수로 처리할 수 있다.
get allCount() {
return this.status.allCount;
},

set allCount(count){
console.warn('임의로 할 일 개수를 설정할 수 없습니다, addItem 기능을 사용해 주십시오.');
},

// ES2015 사양에 추가된 기본값 인수
// 이 문법을 활용하면 인수가 전달되지 않았을 때의 처리 코드를 생략할 수 있음
addItem: function(title, options = {}){
let newTodo = {
title: title
};

newTodo.date = !!options.date ? options.date : '2017-06-17';
newTodo.complete = !!options.complete;

this.items.push(newTodo);

this. status.allCount++;
if(newTodo.complete){
this.incrementCompletTodo();
}
},

completeTodo(index){
this.items[index].complete = true;
this.incrementCompletTodo();
},

incrementCompletTodo() {
this.status.completeCount++;
}
};

todo.addItem('객체와 함수 학습', {
date: '2017-06-17'
});

todo.addItem('객체 내의 객체 학습');
todo.addItem('객체 인수 다루기', {
complete: true
});

console.log(todo.status);


'javascript' 카테고리의 다른 글

객체 공부 (5)  (0) 2017.09.13
느낌표 두 개(!!)의 역할  (0) 2017.09.13
객체 공부 (3)  (0) 2017.09.13
객체 공부 (2)  (0) 2017.09.13
객체 공부  (0) 2017.09.13

객체 공부 (3)

/**
인수로서의 객체와 함수 기본 1
객체 인수
**/
var todo = {
items: [],
status: {
allCount: 0,
completeCount: 0
},

// 여러가지 부가 옵션을 처리하기 위해 기본 값 형의 인수 보다
// 객체 인수로 처리하면 유연성을 가질 수 있게 된다
addItem: function(title, options){
let newTodo = {
title: title
};

if(options){
if(options.date){
newTodo.date = options.date;
} else {
newTodo.date = '2017-06-17'
}

// 값 지정을 위한 if else 구문을 3항 연산자를 이용하여 간단히 기술할 수 있다
newTodo.complete = options.complete ? options.complete : false;
// newTodo.complete = !!options.complete;
}

this.items.push(newTodo);
this.status.allCount++;

if(newTodo.complete){
this.status.completeCount++;
}
},

completeTodo(index){
this.items[index].complete = true;
this.status.completeCount++;
}
};

todo.addItem('객체와 함수 학습', {
date: '2017-06-17'
});

todo.addItem('객체 내의 객체 학습');
todo.addItem('객체 인수 다루기', {
complete: true
});

console.log(todo.status);


'javascript' 카테고리의 다른 글

느낌표 두 개(!!)의 역할  (0) 2017.09.13
객체 공부 (4)  (0) 2017.09.13
객체 공부 (2)  (0) 2017.09.13
객체 공부  (0) 2017.09.13
함수의 특징 (4)  (0) 2017.09.12

+ Recent posts

티스토리툴바