15.1 var 키워드로 선언한 변수의 문제점
15.1.1 변수 중복 선언 허용
만일 동일한 이름의 변수가 이미 선언되어있음에도 변수를 중복 선언하면서 값까지 할당했다면 의도치 않게 먼저 선언된 변수 값이 변경되는 부작용 발생.
15.1.2 함수 레벨 스코프
var 로 선언한 변수는 오직 함수의 코드 블록만을 지역 스코프로 인정함.
⇒ 함수 외부에서 var 로 선언한 변수는 코드 블록 내에서 선언해도 모두 전역 변수가 됨.
함수 레벨 스코프는 전역 변수를 남발할 가능성이 높아, 의도치 않게 전역 변수가 중복 선언되는 경우 다수 발생.
15.1.3 변수 호이스팅
var 로 변수를 선언하면 변수 호이스팅에 의해 변수 선언문이 동작함.
즉, 변수 호이스팅에 의해 var 로 선언한 변수는 변수 선언문 이전에 참조가 가능.
단, 할당문 이전에 변수를 참조하면 항상 undefined 를 반환.
// 변수 호이스팅에 의해 이미 foo 변수가 선언됨
// 변수 foo는 undefined로 초기화 됨
console.log(foo); // undefined
// 값 할당
foo = 123;
console.log(foo); // 123
// 변수 선언은 런타임 이전에 자바스크립트 엔진에 의해 암묵적으로 실행됨
var foo;변수 선언문 이전에 변수 참조하는 것은 변수 호이스팅에 의해 에러를 남기진 않지만, 프로그램 흐름상 맞지 않고 가독성 떨어뜨리니 지양하도록
15.2 let 키워드
15.2.1 변수 중복 선언 금지
let 으로 이름 같은 변수 중복 선언하면 문법에러-SyntaxError 발생 (같은 스코프 내 중복 선언 허용하지 않음)
15.2.2 블록 레벨 스코프
let 으로 선언한 변수는 모든 코드 블록을 지역 스코프로 인정하는 블록 레벨 스코프를 따름
let foo = 1;
{
let foo = 2;
let bar = 3;
}
console.log(foo); // 1
console.log(bar); // ReferenceError: bar is not defined코드 블록 내에서 선언된 foo 변수와 bar 변수는 지역 변수. 전역에서 선언된 foo 변수와 코드 블록 내에서 선언된 foo 변수는 다른 별개의 변수임. bar 변수도 블록 레벨 스코프를 갖는 지역 변수임.
⇒ 전역에서는 bar 변수를 참조할 수 없음
함수도 코드 블록이므로 스코프를 만듦. 이때 함수 내의 코드 블록은 함수 레벨 스코프에 중첩됨.
let i = 10; // 전역 스코프
function foo() { // 함수 레벨 스코프
let i = 100;
for (int i=1; i<3; i++) { // 블록 레벨 스코프
console.log(i);
}
console.log(i);
}
foo();
console.log(i);15.2.3 변수 호이스팅
let 으로 선언한 변수는 변수 호이스팅이 발생하지 않는 것처럼 동작함.
- var 로 선언한 변수는 런타임 이전에 자바스크립트 엔진에 의해 암묵적으로 선언단계와 초기화 단계가 한번에 진행.
선언 단계에서 스코프에 변수 식별자를 등록해 자바스크립트 엔진에 변수의 존재를 알리고, 바로 초기화 단계에서 undefined로 변수를 초기화 함.
⇒ 변수 선언문 이전에 변수에 접근해도 스코프에 변수가 존재하므로 에러가 발생하지 않음, undefied를 반환 - let으로 선언한 변수는 선언단계와 초기화 단계가 분리되어 진행됨.
⇒ 런타임 이전에 자바스크립트에 의해 암묵적으로 선언단계가 먼저 실행되지만 초기화 단계는 변수 선언문에 도달했을 때 실행.
초기화 되기 전에 변수에 접근하려고 하면 참조 에러가 발생함.
스코프의 시작 지점부터 초기화 시작 지점까지 변수를 참조할 수 없는 구간을 “일시적 사각지대”라고 부름.
[let 키워드로 선언한 변수의 생명 주기]
15.2.4 전역 객체와 let
let 으로 선언한 전역 변수는 전역 객체의 프로퍼티가 아님 ⇒ window.foo와 같이 접근 불가
let 전역 변수는 보이지 않는 개념적인 블록 내에 존재.
15.3 const 키워드
15.3.1 선언과 초기화
const 로 선언한 변수는 반드시 선언과 동시에 초기화 해야 함.
const foo; ⇒ 문법 에러 발생
const 로 선언한 변수는 let로 선언한 변수와 마찬가지로 블록 레벨 스코프를 가지며, 변수 호이스팅이 발생하지 않는 것처럼 동작함.
15.3.2 재할당 금지
const 로 선언된 변수는 재할당이 금지됨
15.3.3 상수
const로 선언한 변수에 원시 값을 할당한 경우 변수 값을 변경할 수 없음. 원시 값은 변경 불가한 값이므로 재할당 없이 값을 변경할 수 있는 방법이 없기 때문.
변수의 상대 개념인 상수는 재할당이 금지된 변수를 말함.
상수도 값을 저장하기 위한 메모리 공간이 필요하므로 변수라고 할 수 있음. 단, 변수는 언제든지 재할당을 통해 변수 값을 변경할 수 있지만 상수는 재할당이 금지.
상수는 상태유지와 가독성, 유지보수의 편의를 위해 사용해야 함.
const 로 선언된 변수에 원시 값을 할당한 경우, 원시 값은 변경할 수 없는 값이고 const 에 의해 재할당이 금지되므로 할당된 값을 변경할 수 있는 방법은 없음.
15.3.4 const 키워드와 객체
const 로 선언된 변수에 원시 값을 할당한 경우 값을 변경할 수 없음. 하지만 const 로 선언된 변수에 객체를 할당한 경우 값을 변경할 수 있음.
변경이 불가능한 값인 원시 값은 재할당 없이 변경할 수 있는 방법이 없지 변경 가능한 값인 객체는 재할당 없이도 직접 변경이 가능하기 때문임.
const person={
name = 'lee'
}
// 객체는 변경 가능하므로 재할당 없이 변경 가능!
person.name= 'Kim';
console.log(person); // {name: "Kim"}const 는 재할당을 금지할 뿐 불변을 의미하지 않음. 새로운 값을 재할당하는 것은 불가능하지만 프로퍼티 동적 생성, 삭제, 프로퍼티 값의 변경을 통해 객체를 변경하는 것은 가능. 이때 객체가 변경되더라도 변수에 할당된 참조 값은 변경되지 않음.
15.4 var vs. let vs. const
[결론]
- 변수 선언에는 기본적으로 const 사용. const 를 사용하면 의도치 않은 재할당을 방지하기 때문에 안전함.
- let은 재할당이 필요한 경우에 한정하여 사용. 이때 변수의 스코프는 최대한 좁게 만들어야 함.
- ES6을 사용하면 var는 지양하는 것이 좋음.
