[javascript] var vs let vs const

변수 선언 방식

자바스크립트에서 변수를 선언하는 방법으로는 다음과 같이 세 가지 방법이 있다.

• let
• const
• var

let 과 var로 선언할 경우는 값이 변할수 있는 경우에 사용되고 const는 상수와 같이 정해진 값으로 나중에 변경할 일이 없을 때 사용한다.

 

하지만 var는 오래된 선언방식이고 최신 코드에선 쓰이지 않는 선언방식이기에 let과 var 둘 중에 하나를 써야한다면 추세에 맞게 let을 써야한다. 그럼에도 불구하고 최근엔 var을 쓰지도않는데 알아야 할 필요가 있을까?

 

여기서 let으로 선언한 변수와 var로 선언한 변수는 유사하지만 차이점이 존재한다.

현재 var는 최신 스크립트에서는 볼 수 없지만 오래된 스크립트에선 아직 볼 수 있다.

때문에 오래된 스크립트 코드에서 var을 let으로 바꾸어야 할 경우가 생겼을 때 var를 잘 모른다면 예상치 못한 에러를 만날 수 있다.

 

 

var는 블록 스코프가 존재하지 않는다.

var는 블록 스코프가 존재하지 않는다. 즉, var는 블록 스코프가 아닌 함수 스코프 또는 전역 스코프를 갖는다. 때문에 var는 블록을 무시하고 test는 전역 변수가 되기 때문에 블록 밖에서도 접근이 가능하다. 

 

if(true) {
  var test = 'arrived!'
}

alert(test);

하지만 let은 블록 스코프가 존재한다. 따라서 코드 블럭 밖에서 접근하지 못한다.

if(true) {
  let test = 'arrived!'
}

alert(test); // ReferenceError: test is not defined

 

 

호이스팅 (Hoisting)

var 선언은 함수가 시작될 때 처리된다. 즉, 함수 스코프 최상단으로 호이스팅되고 선언과 동시에 undefined으로 초기화된다.

함수 코드블럭안에 isName변수를 var로 선언했지만 var는 최상단으로 호이스팅된다. isName변수가 선언되기 전 이미 undefined로 값이 초기화가 됐기때문에 함수를 호출하면 콘솔에 undefined라고 나온다.

function yourName() {
	console.log(isName);
    
	var isName = 'chanwoo';
}
yourName();

 

결국 var로 선언된 변수 isName은 함수 선언과 동시에 최상단으로 호이스팅되어 undefined로 값이 초기화가 되고나서

isName변수에 값이 할당되어지면 그때 할당된 값이 출력되는걸 볼 수 있다.

function yourName() {
//  var isName
	console.log(isName); // undefined
    
	var isName = 'chanwoo';
    console.log(isName); // chanwoo 
}
yourName();

 

재선언 (Redeclaration)

• var는 재선언이 가능하다.
• let과 const는 재선언이 불가능하다.

var test = 'one';
var test = 'two';

let fruit = 'apple';
let fruit = 'orange'; // SyntaxError: Identifier 'fruit' has already been declared

 

 

let vs const

• let은 재할당이 가능하다.
• const는 선언과 초기화가 동시에 일어나야하고 재할당이 불가능하다.

 

 

 

[참고]

ko.javascript.info/ko.javascript.info/var