js deep dive [ 15 ]

let, const 키워드와 블록 레벨 스코프

15.1 var 키워드로 선언한 변수의 문제점

ES5 변수선언 방법은 var 키워드를 사용하는 것 이였다.

var 는 여러 언어와는 다른 특별한 특징들이 있다.

15 .1. 1 함수 내부에서 변수 중복 선언 허용

중복 선언하면 초기화 유무에 따라 다르게 동작한다.

선언되어 있는 변수를 중복 선언하면서 할당 했다면

그 이전의 변수값이 변경 되는 경험을 할 수 있다.

15. 1. 2

var 의 스코프의 경우 함수 블록만을 지원함으로,

if , for, 등의 선언 한 변수도 전역 변수로 동작하게 된다.

15. 1. 3

var 키워드로 변수를 선언하면 변수 호이스팅에 의해 변수 선언문 이 올라가는 것 처럼

동작한다

말이 참 어렵다.

function test() {  
    console.log(x); // -1
    if (true) {
        var x = 10; 
    }
    console.log(x); // -2 

이때 1번 에서는 undefined가 나오게 되는데
선언은 이미 되어 있다는 것을 확인 할 수 있다.

let 키워드

15.2.1 변수 중복 선언 금지

let 키워드로 이름이 같은 변수를 중복 선언하면 문법 에러가 발생한다.

15.2.2 블록 레벨 스코프

let 키워드는 모든 코드 블록을 지역 스코프를 따른다.

이때 let 선언된 변수는 함수 내부에서 중첩 가능하다.

let i = 10;
function foo () {
    let i = 100;
    for(i = 10; i < 20; i++) {
        console.log(i); // 1
    }
    console.log(i); // 2
}
console.log(i); // 3

1 - 10 ~ 19
2 - 100
3 - 10 이 출력된다.

15.2.3 변수 호이스팅
let 키워드로 선언한 변수는 변수 호이스팅이 발생하지 않는 것처럼 동작한다.

let 선언 이전에 참조하면 참조 에러가 발생한다.
let 키워드로 선언한 변수는 선언 단계, 초기화 단계가 분리되어 진행

스코프의 시작 지점부터 초기화 단계 시작까지 참조할 수 없는 구간 TDZ 라고
부르고 이때 접근시에는 참조에러로 처리된다.

발생하지 않는 것 이라고 말하는 예시다.

let i = 10;
function foo () {
    console.log(i); // ReferenceError 
    let i = 100;
    console.log(i);
}

 15.3 const 키워드

 

15.3.1 선언과 초기화

const 의 경우 선언과 동시에 초기화 해야하고 이를 지키지 않는다면 

타입 에러가 발생한다.

15.3.2 재할당 금지

const 는 재할당이 금지된다.

 

15.3.3 상수

const 키워드로 선언한 변수에 원시 값을 할당한 경우 변경할 수 없다.

이유는 const 의 내용을 읽어보면 이해할 수 있다.

 

15.3.4 const 키워드와 객체 

 

const 로 할당한 obj 의 경우 값을 변경 할 수 있는데 

이는 프로퍼티에 해당한 값을 변경 하는 것이기 때문에 변경이 가능한것이지

실질적인 obj 가 변경된 것은 아니다.

 

15.4 var vs let vs const

es6 버전 이후에서는 기본적으로 const 타입을 주로 사용해야 하고 

변경이 가능해야하는 for 등에서 사용 하는 경우에, let을 사용하는 것을 권장한다.

처음 구조를 짤 때 const 로 선언하고 하는 연습을 하는 것이 도움이 될 듯 하다.