[ES6] var, let, const 변수 선언

변수 선언의 방법

  어느 언어로 개발을 하던지 변수라는 것을 사용합니다. 각 언어마다 변수를 선언하는 방법이 있습니다. 자바스크립트는 ES6 부터 let, const 라는 키워드가 등장해 var 를 포함해 총 3가지 방법으로 변수를 선언할 수 있습니다. 하나하나 알아볼까요?

자바스크립트에서의 변수의 유효범위

  자바에서는 변수의 유효범위가 블록단위입니다. 그렇기 때문에 함수 반복문 등 블록안에서 생성한 변수는 그 블록이 끝난 이후에는 사용할 수가 없습니다. 자바스크립트는 자바와는 다르게 함수가 유효범위가 됩니다. 따라서 반복문 안에서 생성한 변수는 함수가 끝나지 않았다면 반복문 밖에서도 사용할 수 있습니다. 변수의 유효범위가 넓다는 것은 마냥 좋은 것만은 아닙니다. 아래의 예제를 볼까요?

let 과 var 의 차이

function scope () {
    var a = 3;
    if (true) {
        var a = 4;
    }

    console.log(a);
}

scope();

  위의 예제에서 콘솔에는 3이 나올까요, 아님 4가 나올까요? 정답은 4입니다. 자바였다면 if 문 밖에서의 a 와 안에서의 a 는 다른 변수를 뜻할 것입니다. 그러나 자바스크립트는 함수단위의 유효범위를 가지기 때문에 scope 함수가 끝나기전까지 a 라는 변수는 1개입니다. 그렇기 때문에 if 문 밖에서 a 가 4일거라 예상하고 작업을 한다면 코드의 로직은 무너질 것입니다. let 은 이러한 함수단위의 유효범위를 막고자 나온 키워드입니다. 

function scope () {
    let a = 3;
    if (true) {
        let a = 4;
    }

    console.log(a);
}

scope();

  위와 같이 코드를 수정하게 되면 콘솔에는 4가 나옵니다. let 은 변수를 함수단위가 아니라 블록단위로 설정하기 때문입니다. 이것이 let 과 var 의 차이입니다. let 은 클로저에서의 문제점을 어느정도 해결합니다. 아래의 예제를 보겠습니다.

var functionArr = [];
for (var i = 0; i < 3; i++) {
    functionArr.push(function() {
        console.log(i);
    })
}

for (var j = 0; j < 3; j++) {
    functionArr[j]();
}

  첫 번째 반복문은 i 변수를 출력하는 함수를 functionArr 배열에 담는 작업을 수행하고, 두 번째 반복문은 배열을 돌며 함수를 실행하는 작업을 수행합니다. 이렇게 하면 0, 1, 2 이 차례대로 찍힐거라 예상하시겠지만 자바스크립트의 클로저 개념 때문에 3이 3번 출력됩니다. 간단하게 설명드리면 각 함수는 'i를  출력해라' 라는 작업을 기억하고 있을 뿐 i 값을 저장하고 있지는 않습니다. 자바스크립트는 변수의 유효범위가 블록단위가 아니기 때문에 첫 번째 반복문을 빠져나오게 되면 i 값은 3이 됩니다. 그 후 두 번째 반복문을 돌게 되면 'i 값을 출력해라~' 라는 함수 3개를 실행하기 때문에 3인 i 를 3번 출력하게 되는 것입니다. 0, 1, 2 이렇게 차례로 출력을 하고 싶을 때 즉시실행함수를 사용해도 되지만 let 을 이용할 수도 있습니다. 아래의 예제를 볼까요?

var functionArr = [];
for (let i = 0; i < 3; i++) { // Note the use of let
    functionArr.push(function() {
        console.log(i);
    })
}

for (var j = 0; j < 3; j++) {
    functionArr[j]();
}

  위의 예제에서는 i 를 var 대신 let 을 이용해 선언했습니다. let 을 이용해 생성한 변수의 유효범위는 블록이기 때문에 for 문이 한번 끝나면 그 변수의 유효범위가 끝나게 됩니다. 따라서 첫 번째 반복문의 각 3번 루프에서 i 라는 변수는 모두 다른 변수가 되는 것이죠. 따라서 두 번째 반복문을 실행하면 0, 1, 2 가 출력됩니다. 

const 를 이용한 변수 선언

  자바를 사용해보셨다면 const 키워드는 잘 아실겁니다. 자바스크립트도 마찬가지로 const 는 수정할 수 없는 변수를 선언할 때 사용합니다. var 또는 let 은 해당 스코프에서는 자유롭게 변수를 수정할 수 있습니다. 이 말은 다시 말하면 누군가가 자유롭게 내가 생성한 변수를 건들일 수 있다는 뜻이며, 나 자신도 실수로 변수를 수정할 수도 있습니다. 이러한 경우를 방지하려고 할 때 const 키워드를 사용해 변수를 선언합니다.

const name = 'hyeona';
name = 'hyeona2'; // Uncaught TypeError: Assignment to constant variable.

  제 이름을 나타내는 변수인 name 을 const 를 이용해 생성했습니다. 이 후 누군가가 name 변수에 다른 값을 할당하면 타입에러가 발생합니다. 그러나 수정 가능한 것이 있습니다. 바로 reference type 의 변수인데요. 아래 예제를 보겠습니다.

const hyeona = { age: 24 };
hyeona = { age: 25 }; // Uncaught TypeError: Assignment to constant variable.

hyeona.age = 25; // 프로퍼티 수정은 가능합니다.
console.log(hyeona);

  hyeona 변수는 const 키워드를 이용해 생성되었습니다. 자바스크립트에서 객체는 레퍼런스 타입 변수입니다. 따라서 hyeona 에는 {age : 24} 객체의 주소가 저장됩니다. 따라서 {age : 25} 객체를 hyeona 에 할당한다면 새로운 주소를 할당하는 것이므로 type error 가 발생합니다. 그러나 hyoena.age 를 수정하는 것은 hyoena 에 저장된 주소에 아무런 영향을 끼치지 않습니다. 단지 프로퍼티만 수정하는 것이죠. 따라서 프로퍼티를 수정하는 것은 가능합니다. 

이상으로 자바스크립트에서 변수를 선언하는 방법에 대해 알아보았습니다.