[ES6] let, const 그리고 var

Let and Const

let 과 const 에 대해서 알아보도록 하겠습니다.

이 둘은 변수를 선언할 때 사용하게 되는데 이전에는 var 를 사용하였습니다.

var 로 변수를 선언하게 된다면 다음과 같이 변수의 overwrite 가 가능해집니다.

var name = "minsung";

name = "sungbin";

이렇게 var 를 사용하게 되면 큰 어플리케이션을 만들거나 협업을 할 경우 문제가 생길 수 있습니다.

다른 개발자가 다른 파일에서 또는 같은 파일인데 다른 위치에서 작업을 할 경우 name 이라는 변수명을 또 사용할 수 있게 되고 의도치않게 name 은 sungbin 으로 덮어쓰게 됩니다.

따라서 변수가 변하는 걸 막기 위한 매커니즘이 필요했고 const 가 등장하였습니다.

const 는 아래와 같이 변수가 바뀌는 것을 막아줍니다.

const name = "minsung";
name = "sungbin"; (X)

하지만 const 라고 해서 무조건 바뀌는 걸 막아주는 것은 아닙니다.

object 의 경우 바뀌는 걸 허용하게 됩니다.

아래에서 person을 직접 바꾸는 것은 허용되지 않지만, person 안의 name 을 바꾸는건 허용됩니다.

const person = {
    name : "minsung"
}

person = "sungbin"; (X)
person.name = "sungbin"; (O)

 

let 은 이전의 var 와 같은 것으로서 overwrite 를 허용합니다.

let name = "minsung";
name = "sungbin";

 

따라서 일반적으로 const 를 사용하는 것을 추천합니다.

값을 overwrite 해야하는 경우에만 let 을 사용하고 var 는 더 이상 사용하지 않습니다.

 

Dead Zone

temporal dead zone 은 let 이랑 같이 소개되는 개념입니다.

temporal dead zone 이 없을 때는 어떻게 했었을까요?

자바스크립트는 위에서 부터 아래로 코드를 실행하기 때문에 이는 정의되지 않았다는 결과를 출력하게 됩니다.

console.log(name);
var name = "minsung";

// undefined

 

하지만 이는 에러를 출력합니다.

console.log(name);

// Uncaught ReferneceError

 

둘의 출력 결과가 다른 이유는 자바스크립트가 hoisting 을 해주기 때문입니다.

hoisting 은 변수 선언을 상단부로 이동시키는 것을 말합니다.

즉 우리가 작성한 코드대로 위에서부터 아래로 진행되는 것은 아닙니다.

내부적으로는 코드가 다음과 같이 변경되게 됩니다.

var name;
console.log(name);
name = "minsung";

 

사실 위와 같이 작성한 코드도 에러를 발생해야 맞는데 undefined 로 끝나기 때문에 별로 적합하지 않습니다. 과한 친절이 개발자의 의도와는 다르게 흘러가는 것이죠.

여기 var 대신 let 을 사용하면 어떻게 될까요?

의도한대로 에러가 출력 됩니다.

console.log(name);
let name = "minsung";

// Uncaught ReferneceError

이는 let 이 hoisting 을 못하도록 막아준다는 것이죠.

이것이 바로 let의 temporal dead zone 입니다.

 

Block Scope

let 과 const 의 다른 장점은 바로 block scope 가 있다는 점입니다.

우선 var 부터 살펴보도록 하죠.

이 경우 변수가 block scope 안에서 선언되었음에도 불구하고 scope 밖에서도 접근할 수 있습니다.

if (true){
    var num = 10;
}
console.log(num);

// 10

 

var 는 block scope 가 아닌 function scope 를 따릅니다.

따라서 이 경우에는 에러가 출력됩니다.

function myFunc(){
    var num = 10;
}
console.log(num);

// Uncaught ReferneceError

 

그에 비해 const 과 let 은 block scope 를 따르게 됩니다.

if (true){
    const num = 10;
}
console.log(num);

//Uncaught ReferneceError