Javascript var와 let 특징 및 차이점 비교

 

javascript 내에서 변수를 선언해서 사용할 때 var와 let을 많이 혼용해서 사용하는 분들이 많으실 겁니다.

javascript 언어 초기 개발 당시에 변수는 var만 존재하고 있었고, ES6(ECMAScript2015)부터 let이 추가되었습니다.

 

결론부터 말씀드리면 var보단 let을 사용하는 것을 선호합니다.

var와 let의 차이점과 특징을 분석해보고, 왜 let을 사용해야 하는지 알아보겠습니다.

 

 

  var의 특징

1. 변수 중복 선언 허용

var는 같은 변수명으로 중복 선언이 가능합니다.

 

var x = 1;
var y = 1;

var x = 100;
var y;          // 초기화 되지 않았으므로 무시됨

console.log(x); // 100
console.log(y); // 1

 

위에 예시와 같이 스코프 내에 변수 중복 선언을 허용합니다.

(var y는 초기화 값이 없으므로 무시됩니다)

 

같은 스코프 내에 중복 선언을 허용하게 된다면 어떤 문제가 발생하게 될까요?

 

var x = 1;       //개발자A 작성

{ 수만줄의 코드... }

var x = 100;     //개발자B 작성

{ 수만줄의 코드... }

console.log(x);  //개발자A이 호출

 

개발자A가 작성한 var x는 '1'로 할당되어 있으므로 결과값으로 '1'을 예상할 것입니다.

하지만 개발자B가 var x에 '100'으로 할당하였으므로 console.log(x)의 결과값은 '100'으로 출력됩니다.

 

 

2. 함수(function) 레벨 스코프

var는 같은 함수 스코프 안에서 전역 변수의 성질을 가지고 있습니다.

 

var x = 100;

if(true){
    var x = 101;
}

console.log(x);     // 101 출력

 

위와 같이 var는 함수 레벨 스코프 안에서 전역 변수의 성질을 가지므로 if문안에 선언된 var x = 101이 마지막 할당이므로 결과가 101로 출력됩니다.

 

예시 하나를 더 보겠습니다.

 

var i = 1;

for(var i = 0; i < 10; i++)
{
    console.log(i);        //1~9 출력
}

console.log(i);            //10 출력

 

for문뿐만 아니라 if문 switch case문 등 함수의 스코프{ }가 아닌 변수 선언은 전역 변수의 성질을 가집니다.

따라서 var i는 1이 아닌 10이 출력됩니다.

 

 

3. 변수 호이스팅

변수 선언문이 소스코드의 최상단으로 끌어올려진 것처럼 동작하는 javascript 고유의 특징입니다.

즉, javascript 엔진에서 변수 선언문을 가장 먼저 실행한다는 의미입니다.

 

아래 예시를 통해 자세히 설명드리겠습니다.

 

console.log(x);    //undefined

x = '호잇';

console.log(x);    //호잇

var x;

 

첫 번째 console.log(x)에서 변수가 선언되지 않았다는 오류인 'ReferenceError'가 발생하지 않습니다.

 

javascript 엔진은 소스코드를 실행하기 전 상단에서부터 한줄한줄 평가 과정을 거칩니다. 이때 변수 호이스팅으로 인해 변수 선언문인 var x를 먼저 수행하게 됩니다.

 

위에 작성해드린 소스코드가 평가과정을 거친 후 실제로는 아래와 같이 수행하게 됩니다.

 

var x;

console.log(x);    //undefined

x = '호잇';

console.log(x);    //호잇

 

이처럼 var는 변수 호이스팅으로 인해 가독성을 해치기 때문에 오류 발생 가능성이 증가하게 됩니다.

 

 

 

  let의 특징

1. 변수 중복 선언 금지

let은 같은 변수명으로 중복 선언이 불가능합니다.

 

let x = 1;
let x = 100;    //Uncaught SyntaxError: Identifier 'x' has already been declared

 

두 번째 let x는 같은 변수명으로 이미 선언되어있으므로 문법 에러(Uncaught SyntaxError)가 발생합니다.

 

 

2. 블록(block) 레벨 스코프

var가 함수 레벨 스코프를 가진 것과 달리 let은 블록 레벨 스코프를 가집니다.

즉, let으로 선언한 변수는 코드 블록을 가지는 있는 function, if문, for문 등의 스코프 안에서 인정됩니다.

아래 예시를 보겠습니다.

 

function check(){
    let a = 'local';

    if(true){
        let a = 'block';
        console.log(a);    //'block'
    }

    console.log(a);    //'local'
}

let a = 'global';

console.log(a);    //'global'

 

check() 함수 let a에 'local'이 선언되어 있고 if문 let a에 'block'이 선언되어 있습니다.

let은 블록 레벨 스코프를 가지므로 if문 안의 a변수는 'block'으로 출력이 되고, check() 함수 안의 a 변수는 'local'이 출력됩니다.

 

 

3. 변수 호이스팅

let도 var와 같이 호이스팅 개념이 있습니다.

하지만 TDZ(Temporal Dead Zone)이라는 개념으로 변수에 값이 할당되기 전까지 변수를 사용할 수 없습니다.

 

TDZ 개념에 대해 궁금하시다면 아래 글을 참고해주세요.

> TDZ(Temporal Dead Zone)이란?

 

 

console.log(x);    // 'ReferenceError'

let x;

console.log(x);    // undefined

x = '호잇';

console.log(x);    //'호잇'

 

let에서는 선언되지 않은 변수를 사용하게 되면 'ReferenceError' 오류가 발생하게 됩니다.

 

 

정리

let을 사용해야 하는 이유는 다음과 같이 정리해 볼 수 있습니다.

• 변수 이름이 중복되는 것을 방지할 수 있다.
• 변수 값이 할당되기 전, 변수 값의 혼란을 줄여준다.
• 블록 레벨 스코프로 변수 간의 접근을 제한하여 차이를 명확히 한다.

 

따라서 javascript 개발 시 let을 사용하는 것을 추천드립니다.

 

 

[같이보면 좋은 자료]

> TDZ(Temporal Dead Zone)이란?

 

 

 

[참고자료]

Youtube(우아한 Tech): https://www.youtube.com/watch?v=ZU4MXkwDb9g