가라멜의 달달한 세상 탐방

출처 및 참고 : https://poiemaweb.com/es6-block-scope

let, const | PoiemaWeb

이 포스팅의 위 출처의 게시글을 공부하며 필기 하듯이 써놓은 내용이므로,

정확한 내용은 위의 출처에서 보는 것이 좋다.

 

1. Let

1.1 블록 레벨 스코프

모든 코드 블록 내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참고 불가, 즉 지역변수

1.2 변수 중복 선언 금지

기존 var 키워드로는 동일한 이름을 갖는 변수를 중복해서 선언할 수 있었지만 let 키워드로는 동일한 이름을 갖는 변수를 중복해서 선언 불가

1.3 호이스팅

var 키워드로 선언된 변수는 선언 단계와 초기화 단계가 한번에 이루어진다. 즉, 스코프에 변수를 등록하여 메모리에 변수를 위한 공간을 확보하 후, undefined로 초기화 한다. 따라서 변수 선언문이전에 변수에 접근하여도 스코프에 변수가 존재하기 때문에 에러가 발생하지 않는다. 다만 undefined를 반환한다. 이후 변수 할당문에 도달하면 비로소 값이 할당된다. 이러한 현상을 변수 호이스팅 이라 한다.

let 키워드로 선언된 변수는 선언 단계와 초기화 단계가 분리되어 진행된다. 즉, 스코프에 변수를 등록하지만 초기화 단계는 변수선언문에 도달했을 때 이루어진다. 초기화 이전에 변수에 접근하려고 하면 참조에러가 발생한다. 이는 변수가 아직 초기화 되지 않았기 때문이다. 다시 말하면 변수를 위한 메모리 공간이 아직 확보되지 않았기 때문이다. 따라서 스코프의 시작 지점붜 초기화 시점 지점까지는 변수를 참조할 수 없다. 스코프의 시작 지점부터 초기화 시작 지점까지의 구간을 '일시적 사각 지대(Temporal Dead Zone; TDZ) 라고부른다.

1.4 클로저

기존 var의 경우 함수레베 스코프로 인하여 for 루프의 경우 초기화 식에 사용된 변수가 전역 스코프를 갖게 되어 발생하는 문제를 회피하기위해 클로저를 활용한다.

하지만 ES6의 let 키워드를 for 루프의 초기화 식에 사용하게 되면 클로저를 사용하지 않아도 클로저와 동일한 동작을 한다.

1.5 전역 객체와 let

전역 객체는 모든 객체의 유일한 최상우 객체르 의미하며 일반적으로 Browser-side에서는 window 객체, Server-side에서는 global 객체를 의미한다. var 키워드로 선언된 변수를 전역 변수로 사용하면 전역 객체의 프로퍼티가 된다.

let 키워드로 선언된 변수를 전역 변수로 사용하는 경우, let 전역 변수는 전역 객체의 프로퍼티가 아니다. 즉, window.foo 와 같이 접근할 수 없다. let 전역 변수는 보이지 않는 개념적인 블록 내에 존재하게 된다.

2. const

const는 상수를 위해 사용한다. 하지만 반드시 상수만을 위해 사용하지는 않는다.

2.1 선언과 초기화

재할당이 자유로운 let에 비해 const는 재할당이 금지된다.

주의할 점은 const는 반드시 선언고 동시에 할당이 이루어져야 한다는 것이다.

2.2 상수

가독성과 유지보수의 편의를 위해 const 를 활용하여 상수로 사용한다.

2.3 const와 객체

const는 재할당이 금지된다. 이는 const 변수의 타입이 객채인 경우, 객체에 대한 참조를 변경하지 못한다는 것을 의미한다. 하지만 이때 객체의 프로퍼티는 보호되지 않는다. 다시 말하자면 재할당은불가능하지만 할당된 객체의 내용(프로퍼티의 추가 삭제, 프로퍼티갑의 변경)은 변경할 수 있다.

객체의 내용이 변경도더라도 객체 타입 변수에 할당된 주소값은 변경되지 않는다. 따라서 객체 타입 변수 선언에는 const를 사용하는 것이 좋다. 만약에 며이적으로 객체 타입 변수의 주소값을 변경하여야 한다면 let 을 사용한다.

3. var vs. let vs. const

- ES6를 사용한다면 var 키워드는 사용하지 않는다.

- 재할당이 필요한 변수에는 let을 사용한다.

- 변경이 발생하지 않는(재할당이 필요없는) 원시 타입과 객체 타입에는 const를 사용한다.