[Javascript] var, let 그리고 const의 차이

지금까지 javascript를 사용하면서 모든 변수 선언에 var만 사용하였었는데...

그래도 아무 이상이 없었었는데...

올만에 문서들을 보다가 let와 const가 보여서 찾아 봤더니... 이런...

내가 잘 못하고 있었구나 라는 생각이 똭~~~~~~

ES6으로 넘어오면서 생긴 let와 const선언 방법이 생긴것이다.

우선 차이를 하나하나 설명을 해 보면 다음과 같다.

var foo = "bar1";

var foo = "bar2";

이와 같이 동일 변수명으로 설정을 할 경우 최종적으로 출력되는 것은 bar2 가 출력 될 것입니다.

당연히 오류가 발생하지 않겠지요.

하지만 let이나 const를 사용할 경우를 보면

let foo = "bar1";

let foo = "bar2";

이와 같이 실행하면?

let foo = "bar2";

      ^

SyntaxError: Identifier 'foo' has already been declared

    at createScript (vm.js:80:10)

    at Object.runInThisContext (vm.js:139:10)

    at Module._compile (module.js:599:28)

먼저 선언되어 있다고 중복되었다고 오류가 발생하지요~

프로그램상으로 보면 이것이 바람직한 것이지 않을까요?

계속 해서 

console.log(foo);

라고 변수 선언없이 호출을 하였을 경우

console.log(foo);

            ^

ReferenceError: foo is not defined

이러한 오류가 발생합니다.

그런데 

console.log(foo);

var foo;

이렇게 하면 어떻게 출력이 될까요?

콘솔에는 undefined 이 뜨고 오류가 발생하지 않습니다.

이런 현상을 호이스^[각주:1]트 된다고 하는데 이것은 다음에 설명을 하도록 하겠습니다.

다시 위의 코드를 let이나 const로 바꾸면

console.log( foo );

let foo;

console.log(foo);

            ^

ReferenceError: foo is not defined

결과가 나오게 됩니다.

또한 let와 const는 block-scope라고 합니다. 이 말인 즉슨 block로 감싸져 있는 내에서만 허용된다는 것입니다.

다시 예를 들어 var로 선언했을 때와 let로 선언했을 때의 결과를 보면 다음과 같습니다..

var foo = "bar1"; console.log( foo );        // bar1 { var foo = "bar2"; console.log( foo );    // bar2 }; console.log( foo );        // bar2

let foo = "bar1"; console.log( foo );        // bar1 { let foo = "bar2"; console.log( foo );    // bar2 }; console.log( foo );        // bar1

var 와 let의 차이점이 보이나요??

다음 예제를 다시 보면

let foo = "bar1"; console.log( foo );        // bar1 { console.log( foo );    // bar1 foo = "bar2"; console.log( foo );    // bar2 }; console.log( foo );        // bar2

let foo = "bar1"; console.log( foo );        // bar1 { console.log( foo );    // ReferenceError: foo is not defined let foo = "bar2"; }; console.log( foo );

{} 밖에 let로 변수를 선언하고 {} 안에서 선언을 하지 않은 경우는 {} 밖의 변수 값을 따라가게 됩니다.

하지만 {}안에서 변수가 다시 선언될 경우 ReferenceError: foo is not defined 를 발생시키게 됩니다.

그럼 let과 const의 차이점은 무엇일까?

결론 적으로 이야기를 하자면 let은 변수선언이며 const는 이름에서 유추 되듯이 상수 선언이 됩니다.

const foo = "bar1";

foo = "bar2";

이렇게 선언 후 변수값을 다시 변경하고자 할 경우 

foo = "bar2";

    ^

TypeError: Assignment to constant variable.

이와 같은 오류가 발생합니다.

하지만 참조형의 경우 경우는 const를 사용하라고 하네요...

배열(array), 객체(object), 함수(function)같은 참조형은 const를 사용하는게 바람직하다고 합니다...

const로 선언하더라도 참조형은 조작이 가능합니다.

const foo = [0, 1];

const bar = foo;

foo.push(2);

bar[0] = 10;

console.log( foo, bar );    //[ 10, 1, 2 ] [ 10, 1, 2 ]

이런식으로~

확실한 차이점은 있네요.. 그리고 지금까지 var만 썼었지만 이제는 var 보다는 let이나 const를 사용하도록 하여야 겠네요~

1. 후선언된 변수나, 함수들이 해당 Scope에서 최상위에 위치하는걸 뜻한다. [본문으로]