[JavaScript] var, let, const의 특징

javascript는 동적언어이므로 동적언어이므로 숫자, 문자열, boolean 등 데이터 타입에 상관없이 변수에 할당 할 수 있습니다.

var, let, const는 변수를 선언할 때 앞에 붙이는 키워드이며

아무것도 사용하지 않았을떄와 이 세가지의 사용했을때의 차이점에 대해서 정리하였습니다.

 

1. 아무것도 사용하지않는 경우 vs var 키워드를 사용하는경우(지역변수)

(1) var키워드를 사용하지 않은 경우

function print(){
  abc = 'hello';
  document.write(abc) // hello 출력
}

abc = 'world';

print(); 

document.write(abc) // hello출력

저는 helloworld를 출력하고 싶었으나 hello가 두번 출력됩니다.

 

(2) var 키워드 사용

function print(){
  var abc = 'hello';
  document.write(abc) // hello 출력
}

abc = 'world';

print(); 

document.write(abc) // world 출력

이제 정상적으로 helloworld가 출력됩니다.

var 키워드를 사용하지 않고 변수를 선언, 사용하면 해당변수는 window객체의 변수로 인식되어 마치 전역변수를 조작하는것과 비슷한 효과가 납니다.

함수내에서 지역변수를 사용하려면 var 키워드를 사용해야 합니다.

 

 

2. 아무것도 사용하지 않는경우 vs var 키워드를 사용하는 경우(호이스팅)

호이스팅(Hoisting)이란, var 선언문이나 function 선언문 등을 해당 스코프의 선두로 옮긴 것처럼 동작하는 것을 말합니다. 

함수는 호이스팅 되는 프로그래밍 언어가 많지만 js는 var 키워드를 사용하면 변수도 호이스팅된다는 특징이 있습니다.

단 선언만 호이스팅되고 값의 할당은 순차적으로 진행됩니다. 

document.write(abc1); // 순차적으로 봤을떄 abc1은 선언되지 않았지만 호이스팅되어 undefined 출력

var abc1 = 10;

document.write(abc); // 10 출력

console.log(abc2); // 순차적으로 봤을때 abc2 선언되지 않았으므로 에러(var 키워드만 호이스팅됨)

abc2 = 10;

 

 

3. let 키워드

var 키워드는 지역변수로도 활용 가능하고 호이스팅도 되는 좋은 키워드지만 단점이 있습니다.

먼저 두개의 코드를 보겠습니다.

abc = 10
abc = 5
document.wirte(abc); // 5 출력

 

var abc = 10
var abc = 5
document.wirte(a); // 5 출력

첫번째 코드는 첫줄에서 선언과 동시에 대입, 두번째줄에 재할당을 한 평범한 코드가 입니다.

그러나 두번째 코드를 보면 abc를 두번선언했지만 해석기가 잡아주지않고 정상적으로 동작합니다.

마치 var키워드를 사용하지 않은것과 비슷하게 재할당 한 것 같은 결과가 나와버립니다.

이러한 단점을 잡기위해서 사용하는 키워드가 let 키워드입니다.(ES6 이후 지원)

 

 

let abc = 10;
let abc = 5;
document.write(abc); // 같은이름의 변수를 선언했으므로 에러발생

let 키워드를 사용하면 같은이름의 변수를 사용하는것을 막을 수 있습니다.

 

 

3. const 키워드

const키워드는 해당변수를 상수로 만들어주는 키워드입니다.

상수는 변경할 수 없다는 특징이 있으며 변경을하려고하면 에러가 발생합니다.

 

const abc = 10;
abc = 5;
document.write(abc); // const로 선언된 변수를 변경하려고 했으므로 에러발생