var의 문제점.
헷갈리는 함수 레벨 스코프.
if 문 안에서 선언 했지만 if 문 밖에서 사용 가능.
var는 코드 블럭을 무시하기 때문에 전역 변수가 됨.
01.js
(function() {
if( true ) {
var variable = 'function scope';
}
console.log( variable );
})();
중복 선언이 가능.
전역 변수가 된 var가 중복 선언 까지 됨.
02.js
(function() {
var variable = 'function scope';
var variable = 'duplicated';
console.log( variable );
})();
var keyword 생략 가능
var keyword 를 생략해도 변수가 선언됨.
03.js
(function () {
variable = 'no keyword';
console.log(variable);
})();
Hoisting 문제
Hoisting?
선언은 코드 처음에 실행되지만, 변수에 값을 할당한 곳에서 값이 할당하는 문제.
04.js
(function() {
console.log( variable );
var variable = 'hoisted';
})();
// -> 위 코드는 호이스팅에 의해 아래와 같다.
(function() {
var variable;
console.log( variable );
variable = 'hoisted';
})();
let keyword
let keyword를 사용하면, 문제가 해결됨.
05.js
// 1. 블록 레벨 스코프
{
let variable = 'block scope';
console.log( variable );
}
// 2. 중복 선언 => syntax error
{
let variable = 'block scope';
let variable = 'duplicated';
console.log( variable );
}
// 3. 호이스팅 => syntax error
{
console.log( variable );
let variable = 'hoisted';
}
const keyword
상수 선언 키워드로 재 할당이 불가능하고, 선언과 동시에 할당이 이루어 져야 한다.
06.js
// Privitive
let a = 'a';
a = 'b';
console.log( a );
const c = 'c';
c = 'd'; // -> TypeError
const 는 call by value로 주로 Object나 Array를 선언하는데 사용되며,
내부의 요소는 재할당 가능하다.
07.js
// Reference
let e = {
foo : 'foo',
};
e = {
bar : 'bar'
};
console.log( e );
const f = {
foo : 'foo',
};
/*
f = {
foo : 'bar'
}; // -> TypeError
*/
f.foo = 'bar'
console.log( f );
/**
* const c = { c : 'c' };
* c -> call by ref
* c.c -> call by value
*/