[ES6] var, let, const 비교

2018-05-21

var, let, const 비교

기존 자바스크립트의 변수 선언 키워드 var과 ES6에서 새롭게 도입된 변수 선언 키워드 let과 const에 대해서 알아보자.

var 키워드를 붙이지 않으면 어떻게 될까?

먼저 var에 대해서 알아보자. var는 키워드 없이 변수를 선언하면 전역 변수가 된다. 전역 유효범위에 속해지기 때문에 코드 내에서 어디서든 변수에 접근할 수 있게 되는 것이다.

function checkscope(){  
    var name = "local"; //var 키워드를 사용하여 변수를 선언
}
 
function checkscope2(){  
    name2 = "global"; //var 키워드를 사용하지 않고 변수를 선언
}
            
checkscope();
checkscope2();
document.write(name + " " + name2); //출력결과 > global

위의 예제에서 var 키워드를 사용하여 선언한 변수인 name은 checkscope라는 함수 안에서의 지역변수이다. 하지만 var 키워드를 사용하지 않고 선언한 변수인 name2는 전역변수이다.

따라서 함수 밖에서 checkscope()와 checkscope2()함수를 호출한 후, name과 name2를 출력하면 name2의 값인 global만 출력되는 것을 확인할 수 있다.

변수 name은 함수의 지역변수이기 때문에 함수 밖에서는 사용할 수가 없지만 name2는 var 키워드를 붙이지 않아서 전역 변수가 되었기 때문에 함수 밖에서도 사용할 수 있다.

Function-Scoped / Block-Scoped

var는 function-scoped이고, let과 const는 block-scoped이다.

var는 function-scoped

먼저 아래의 예시를 살펴보자.

Example1

for(var i=0; i<10; i++) {
  console.log('i', i);
}
console.log('after loop i is', i); //실행결과 > after loop i is 10

Example2

var i;
for(i=0; i<10; i++) {
  console.log('i', i);
}
console.log('after loop i is', i); //실행결과 > after loop i is 10

var i가 hoisting 되기 때문에 위의 Example1과 Example2는 동일한 코드라고 보면 된다. 따라서 i는 for문 밖에서도 사용할 수 있는 전역변수인 것이기 때문에 after loop i is 10라는 문장이 정상적으로 출력이 된다. (참고로, 호이스팅에 대한 내용은 여기에서 볼 수 있다.)

하지만 아래의 예시에서는 에러가 발생한다. Example3과 Example4는 동일한 코드라고 보면 되는데, Example3에서 선언된 변수가 포함된 scope 내에서 가장 위로 호이스팅 된 것이 Example4이다. 그런데 이 var i는 counter라는 함수 내에 존재하기 때문에, 함수 밖에서는 이 i라는 변수를 사용할 수가 없다.

Example3

function counter() {
  for(var i=0; i<10; i++) {
    console.log('i', i);
  }
}
counter();
console.log('after loop i is', i); // 실행결과 > ReferenceError: i is not defined

Example4

function counter() {
  var i;
  for(i=0; i<10; i++) {
    console.log('i', i);
  }
}
counter();
console.log('after loop i is', i); // 실행결과 > ReferenceError: i is not defined

Example1~4를 다시 살펴보자. 왜 Example1에서는 전역에서 i에 접근할 수 있고 Example2에서는 전역에서 i에 접근할 수 없는가?

var 키워드가 function-scoped이기 때문이다!

변수 선언문이 호이스팅될 때 해당 scope의 가장 위로 호이스팅되는데, Example1에서는 변수 선언문이 함수 안에 포함되어 있지 않아서 전역으로 호이스팅되는 것이고, Example3에서는 변수 선언문이 함수 안에 포함되어 있기 때문에 함수 안에서 가장 위로 호이스팅 된다.

var 키워드를 사용하지 않으면?

앞에서 var 키워드를 사용하지 않으면 전역 변수가 된다고 했다. 따라서 아래와 같이 전역에서 i에 접근할 수 있기 때문에 after loop i is 10라는 문장이 정상적으로 출력된다.

아래의 Example5와 Example6는 동일한 코드라고 보면 된다.

Example5

function counter () {
  for(i=0; i<10; i++) {
    console.log('i', i);
  }
}
counter();
console.log('after loop i is', i); // 실행결과 > after loop i is 10

Example6

var i;
function counter () {
  for(i=0; i<10; i++) {
    console.log('i', i);
  }
}
counter();
console.log('after loop i is', i); // 실행결과 > after loop i is 10

var / let / const

var는 재선언과 재할당 모두 가능
let은 재선언 불가능, 재할당 가능
const는 재선언과 재할당 모두 불가능

var는 재선언 가능

var a = 'hello';
var a = 'world';
 
console.log(a); // 실행결과 > world

var는 재할당 가능

var b = 'hello';
b = 'world';
 
console.log(b); // 실행결과 > world

let은 재선언 불가능

let c = 'hello';
let c = 'world';
            
console.log(c); // 실행결과 > Uncaught SyntaxError: Identifier 'c' has already been declared

let은 재할당 가능

let d = 'hello';
d = 'world';
 
console.log(d); // 실행결과 > world

const는 재선언 불가능

const e = 'hello';
const e = 'world';
 
console.log(e); //Uncaught SyntaxError: Identifier 'e' has already been declared

const는 재할당 불가능

const f = 'hello';
f = 'world';
 
console.log(f); //Uncaught SyntaxError: Assignment to constant variable.(상수 변수에 대입)

제씨의 기술블로그

FrontEndECMAScript6