JavaScript let, const 란? 그리고 왜 써야만 하는가? (ES6)

 

ES6 이전에는 변수를 선언하는 방법은 var 를 이용하는 방법 밖에 없었습니다. 하지만 var 에 대한 여러가지 문제들로 인해 고통을 너무 많이 받았습니다.

그 동안 고통받았던 문제들에 대해 이야기 나눠보고 시작해야겠죠 ?

var 의 문제점들에 대해서 이야기 해보겠습니다.

 

1. var 로 변수 선언 시 var 키워드 생략 가능

chicken = 'nice';

console.log(chicken); // nice

2. var 로 변수 선언 후 중복 선언 가능

var chicken = 'nice';

console.log(chicken); // nice

var chicken = 1;

console.log(chicken); // 1

3. 변수가 선언도 되지 않았는데 참조 가능 (변수 호이스팅)

console.log(chicken); // undifiend

var chicken = 'nice'; // (할당)

console.log(chicken); // nice

변수 호이스팅은 매우 중요한 내용이므로 자세히 설명하고 넘어가겠습니다.

* 변수 호이스팅이란 ? 

변수가 생성되면 선언 -> 초기화 -> 할당 이 3단계에 걸쳐 생성되는데 풀어서 설명하면 Scope에 변수를 등록 후 변수를 위한 공간을 확보한 후 (선언), 변수를 undefined로 초기화를 한다. 그래서 위의 예제에서도 첫 번째 console.log에 당연히 에러가 날 것 같은데 에러가 안나고 undifined가 찍힌 것이다. 그리고 난 후 이제 할당문에 도달하여 값이 할당이 되었을 때 값이 정상적으로 출력되는 것을 볼 수있다. 이러한 현상을 변수 호이스팅이라고 한다.

여기서 var의 문제점은 변수 선언 시 선언 -> 초기화 가 동시에 이루어지기에 변수 호이스팅으로 인한 문제가 발생하는 것이다.

4. function-level-scope

var는 함수 코드 블록 ({})만 Scope로 인정하기 때문에 함수 외부에서 선언된 모든 변수는 전역 변수다.

var chicken = 'good';

console.log(chicken); // good

{

    chicken = 'nice'

}

console.log(chicken); // nice

for (var i = 0; i <= 5; i++) {

    console.log(i); // 0 ~ 5 까지 번호 출력

}

console.log(i); // 6

function testChicken() {

    var woongChicken = 'gag'

}

// error: woongChicken is not defined

console.log(woongChicken);

---

이 모든 걸 해결하고자 ES6에서 let, const가 나왔습니다.

이제 let, const에 대해서 알아봅시다. 둘의 공통점을 정리해보았다.

1. block-level-scope

var 에서는 function-level-scope 라서 전역 변수가 남발할 수 있는 사태가 발생했습니다. 하지만 let, const 는 block-level-scope 라서 전역 변수 남발하는 사태를 줄일 수 있습니다.

let chicken = 'nice'; // 전역 변수

{

    // ReferenceError: chicken is not defined

    console.log(chicken);

    let chicken = 'good'; // 지역 변수

    console.log(chicken); // good

}

2. 변수 중복 선언 불가

var 에서는 변수를 위에 선언 후 다시 아래에서 재 선언이 가능했습니다. 하지만 let, const 는 재 선언 시 문법 에러가 뜹니다.

let chicken = 'nice';

// Identifier 'chicken' has already been declared

let chicken = 'good';

3. 호이스팅 불가

위에서 설명했듯이 var로 변수 생성 시 선언과 초기화가 동시에 이루어 지기 때문에 호이스팅 현상이 나타났습니다. 하지만 let, const 는 변수 생성 시 선언과 초기화가 분리되어서 진행이 된다.  let, const는 변수를 생성하고 선언까지 한 후 일시적 사각지대(TDZ) 가 선언과 초기화 사이에 생기며, 할당문에서 변수 값이 할당 될 때 초기화 및 값 할당이 이루어진다.

// error: chicken is not defined

console.log(chicken);

let chicken = 'nice';

---

이제 둘의 차이점에 대해 알아보자.

let으로 변수 선언 후 값을 재할당 가능하지만, const로 선언 후 값을 재할당 할 수 없다. 간단하게 정리하면 값을 재할당 할 것 같으면 let을 사용하고 변하지 않는 값에는 const(상수)를 사용하면 된다.

let chicken = 'nice';

// success

chicken = 'good';

const PIZZA = 'nice';

// error: Assignment to constant variable.

PIZZA = 'good';

 

지금까지 let과 const에 대해 알아보았다.

마지막으로 정리해보면

- ES6를 사용 가능하다면 var 대신 let, const를 사용하자.
- 값을 재할당 한다면 let, 재할당을 안한다면 const.

 

긴글 읽어주셔서 감사합니다.
오늘도 행복한 코딩하세요 !