Var, Let, Const 변수 선언의 차이점

Martin

2017-06-17

Javascript

var 변수 선언과 Let, Const 변수 선언의 차이점

1. 변수 값의 변화

기존의 자바스크립트에서는 var를 이용하여 변수를 선언하였다. var로 선언한 변수의 경우 할당되는 값이 유동적으로 변경이 가능하였다.

var hello="hello";
console.log(hello);     //result : hello
var hello="hi";
console.log(hello);        //result :hi

예를 들어 위의 경우처럼 최초 hello 변수를 선언할 때, 값을 “hello”로 할당을 해준 후, 밑에서 해당 변수의 값을 “hi”로 바꾼다고 하여도, 에러 없이 값이 바뀐다.

하지만 let과 const로 변수를 선언한 경우는 값을 바꿀 수가 없다.

1
2
3

let hello="hello";
console.log(hello); //result : hello
let hello="hi"; //Uncaught SyntaxError: Identifier 'hello' has already been declared

1
2
3

const hello="hello";
console.log(hello); //result : hello
const hello="hi"; //Uncaught SyntaxError: Identifier 'hello' has already been declared

let이나 const를 이용하여 변수를 선언한 경우 위와 같이 ‘이미 선언된 변수’ 라는 에러 메시지가 뜬다.

2. 호이스팅

var를 이용하여 선언한 경우, 기본적으로 호이스팅이 일어난다.

1
2
3

console.log(hello); //result : undefined
var hello="hello";
console.log(hello); //result : hello

위의 코드와 같이 var를 이용하여 hello라는 변수를 선언할 경우, var 변수를 선언하기 전에 hello 변수를 보면 “undefined” 가 나온다. 즉, 호이스팅이란, 변수를 선언하면 그 변수가 유효 스코프 범위의 최상단으로 끌어 올려진다고 보면 된다( 함수도 마찬가지로 호이스팅이 일어난다.)

하지만 let 과 const 변수의 경우는 var 변수 선언과는 다르다.

1
2
3

console.log(hello); //Uncaught ReferenceError: hello is not defined
let hello="hello";
console.log(hello);

위의 코드를 보면 console에서 “hello” 라는 변수가 정의 되지 않았다라는 에러메시지가 뜬다. let의 경우 블록의 최상단으로 호이스팅이 일어나지만, 블록 내에서 변수가 선언되기 전에 변수를 console에 찍을 경우에는 에러가 뜬다. 그러한 이유는 TDZ (Temporal Dead Zone : 임시적 사각지대) 때문이다.

많은 글들을 보면 호이스팅이 일어나지 않는다고 나오지만, 실제 코드를 살펴보면 호이스팅이 일어나지 않으면 설명되지 않는 부분들이 있다.

let foo = true; 
if(foo){

	//foo의 값이 true 이기에 해당 조건문 안으로 접근이 가능
	console.log(foo);	
	// 그러나 console로 foo를 찍으면 Uncaught ReferenceError: foo is not defined 와 같은 log를 뱉는다.
	let foo = 2;
	//이는 밑에 있는 또 다른 foo가 블럭 스코프 내에서 호이스팅이 일어났다라는 이유가 아니면 설명되지 않는다.
}

3. 유효범위

var 변수의 경우 유효범위는 함수 스코프가 유효범위이지만, let과 const의 경우에는 블록 스코프가 유효 범위이다.

var foo = "This is String.";
if(typeof foo === 'string'){
	var result = true;
} else {
  var result = false;
}

console.log(result);    // result : true

위의 경우 코드의 경우 result 라는 변수는 항상 보던 바와 같이 if 안에서 사용하더라도 문제없이 값을 받을 수 있다. 하지만 let과 const 의 경우는 var 변수와는 다른점이 있다.

var foo = "This is String.";
if(typeof foo === 'string'){
	const result = true;
} else {
  const result = false;
}

console.log(result);    // result : result is not defined

이러한 이유는 let이나 const의 경우 if절 속의 블록스코프({ ‘변수선언’ }) 의 영향을 받아서이다.

현재 이커머스회사에서 frontend 개발자로 업무를 진행하고 있는 Martin 입니다. 글을 읽으시고 궁금한 점은 댓글 혹은 메일(hoons0131@gmail.com)로 연락해주시면 빠른 회신 드리도록 하겠습니다. 이 외에도 네트워킹에 대해서는 언제나 환영입니다.：Martin（https://github.com/martinYounghoonKim）

Javascript의 데이터 타입

겸손한 자바스크립트