15.1 var 키워드로 선언한 변수의 문제점
15.1.1 변수 중복 선언 허용
- var 키워드로 선언된 변수는 동일 스코프 내에서 중복 선언을 허용한다.
var x = 1;
var y = 1;
var x = 100;
var y;
console.log(x);
console.log(y);
15.1.2 함수 레벨 스코프
- 함수 레벨 스코프 : 함수의 코드 블록만을 지역 스코프로 인정
- 의도치 않게 변수값이 변경되는 부작용 발생
var x = 1;
if (true) {
var x = 10;
}
console.log(x);
var i = 10;
for (var i = 0; i < 5; i++) {
console.log(i);
}
console.log(i);
15.1.3 변수 호이스팅
- var 키워드로 선언한 변수는 변수 호이스팅에 의해 변수 선언문 이전에 참조할 수 있다. (let, const는 아님)
console.log(foo);
foo = 123;
console.log(foo);
var foo;
15.2 let 키워드
15.2.1 변수 중복 선언 금지
- let 키워드로 선언한 변수를 중복 선언하면 문법 에러가 발생
var foo = 123;
var foo = 456;
let bar = 123;
let bar = 456;
15.2.2 블록 레벨 스코프
- 블록 레벨 스코프 : 모든 코드 블록을 지역 스코프로 인정
let foo = 1;
{
let foo = 2;
let bar = 3;
}
console.log(foo);
console.log(bar);
15.2.3 변수 호이스팅
- let 키워드 (와 const 키워드)로 선언한 변수는 변수 호이스팅이 발생하지 않는 것처럼 동작한다.
- 변수 선언문 이전에 참조하면 참조 에러가 발생한다. (var 키워드로 선언한 변수는 undefined를 반환했다)
console.log(foo);
let foo;
var와 let의 비교
- var
- 변수 호이스팅에 의해 변수 선언문 이전에 변수를 참조할 수 있다.
- 코드의 평가 단계(런타임 이전)에서 선언 단계와 초기화 단계가 함께 실행되기 때문이다.
console.log(foo);
var foo;
console.log(foo);
foo = 1;
console.log(foo);
- let
- 변수 선언문 이전에 변수를 참조하면 참조 에러가 발생한다.
- let 키워드로 선언한 변수의 초기화는 변수 선언문에 도달했을 때 실행되기 때문이다.
- 일시적 사각 지대 : 스코프의 시작 지점부터 변수의 초기화 시점(변수 선언문)까지는 변수를 참조할 수 없다.
console.log(foo);
let foo;
console.log(foo);
foo = 1;
console.log(foo);
15.2.4 전역 객체와 let
- let 키워드로 선ㄴ언한 전역 변수는 전역 객체의 프로퍼티가 아니다
window.foo
와 같이 접근할 수 없다.
var x = 1;
y = 2;
function foo() {}
console.log(window.x);
console.log(x);
console.log(window.y);
console.log(y);
console.log(window.foo);
console.log(foo);
15.3 const 키워드
15.3.1 선언과 초기화
- const 키워드는 반드시 선언과 동시에 초기화해야 한다.
const foo = 1;
const foo;
- 블록 레벨 스코프를 따르며, 변수 호이스팅이 발생하지 않는 것처럼 동작한다.
{
console.log(foo);
const foo = 1;
console.log(foo);
}
console.log(foo);
15.3.2 재할당 금지
const foo = 1;
foo = 2;
15.3.3 상수
- const 키워드로 선언한 변수에 원시 값을 할당한 경우 변수 값을 변경할 수 없다.
- const 키워드를 사용해 변경하지 않을 상수를 선언하면 유지보수성을 향상할 수 있다.
- 상수는 언더스코어로 구분하여 스케이크 케이스로 표현한다.
const TAX_RATE = 0.1;
let preTaxPrice = 100;
let afterTaxPrice = preTaxPrice + (preTaxPrice * TAX_RATE);
console.log(afterTaxPrice);
15.3.4 const 키워드와 객체
- const 키워드로 선언한 변수에 객체를 할당한 경우 변수 값을 변경할 수 있다. (변수에 할당된 참조 값은 변하지 않는다.)
const person = {
name: 'Lee'
};
person.name = 'Kim';
console.log(person);
15.3.5 var vs. let vs. const
- ES6를 사용한다면 var 키워드는 사용하지 않을 것
- 변수 선언에 기본적으로 const를 사용하는 것을 권장
- 재할당이 필요한 경우에만 let 사용
- 읽기 전용으로 사용하는 원시 값과 객체는 const 키워드를 사용
두렵다