javascript - const/ let / var 차이점 (재선언, 재할당, 유효범위, 호이스팅의 관점에서)

 

자바스크립트에서는   const ,  let ,  var  를 통해 변수를 선언한다. 일부 교육 자료들에서는 변수선언을 var 키워드로만 하는데 이는 const와 let이 2015년 ES6를 통해 생긴 새로 생긴 변수 선언자이기 때문이다. 현재는 변수 선언을 위해 const와 let을 사용하는 것이 권장되고 있고 var의 사용은 지양된다. 이 세 키워드의 차이점을 정리해보고, 왜 var 키워드의 사용이 지양되는지에 대해서도 이해해보자. 

 

비교/대조 요약부터 👇🏻

	var	const	let
변수 선언 및 초기값 할당	초기값 없이 변수 선언 가능	초기값 없이 변수 선언 불가	초기값 없이 변수 선언 가능
재선언 (re-declaration)	가능	불가	불가
재할당 (update)	가능	불가	가능
유효범위 (Scope)	globally / locally blocked	globally / block scoped	globally / block scoped
호이스팅 (hoisting)	scope 최상단으로 hoisting 되고, 값은 undefined로 초기화됨	scope 최상단으로 hoisting 되고, 값은 초기화되지 않음 (TDZ 발생)	scope 최상단으로 hoisting 되고, 값은 초기화되지 않음 (TDZ 발생)

 

변수 선언 및 초기값 할당

변수 선언은  var ,  const ,  let 키워드를 써서 변수의 이름을 생성하는 것이고, 대입 연산자를 통해 변수에 초기값을 대입해주는 것을 초기값 할당이라고 한다. var와 let의 경우에는 먼저 변수를 선언하고 후에 값을 할당하는 것이 가능하지만, const의 경우에는 변수를 선언할 때 초기값을 함께 설정해야 한다. (변수만 선언하면 syntax error 발생) 

 

var를 사용할 때는 변수를 먼저 선언하고 초기화를 할 수도 있고, 변수 선언 시 초기화를 할 수도 있다. 

// var 변수 선언 후 초기화 
var name; 
name = 'yoojin'; 

// var 변수 선언시 초기화 
var age = 22;

 

const를 사용하면 변수만 선언 시 Syntax 에러가 발생하기 때문에 초기값 할당과 함께 변수를 선언해야 한다. 

// const 변수 선언 (에러)
const occupation; //Uncaught SyntaxError: Missing initializer in const declaration 

//const 변수 선언 및 초기화
const occupation = 'developer';

 

let를 사용할 때는 변수를 먼저 선언하고 초기화를 할 수도 있고, 변수 선언 시 초기화를 할 수도 있다. 

// let 변수 선언
let nationality; 
nationality = 'KR'; 

// let 변수 선언시 초기화 
let lastname = 'Oh';

 

재선언/ 재할당

변수의 재선언은 이미 선언한 변수명을 다시 선언하는 것을 의미하며 var, const, let 중  var  만 변수의 재선언이 가능하다. 재할당은 이미 값이 할당된 변수에 새로운 값을 할당하는 것을 의미하고, var, const, let 중 var,와  let 만 변수의 재할당이 가능하다. const의 경우 재할당이 불가능 하지만 const로 선언된 배열이나 객체의 속성이나 값은 업데이트할 수 있다는 점을 유의하자. 

 

var를 사용할 때는 변수의 재선언과 재할당이 모두 가능하다. 

// var로 선언한 변수 name의 재선언 
var name = 'yoojin' ; // 변수 선언 및 초기화
var name = 'lizzie' // 변수 재선언 가능 

// var로 선언한 변수 age의 재할당 
var age = 22; // 변수 선언 및 초기화
age = 24 // 변수 재할당 가능

 

const를 사용하면 재선언과 재할당시 에러가 발생한다. 즉 const를 사용해서 변수를 한번 선언하면 값을 바꿀 수 없다.  

//const 변수 재선언 
const occupation = 'developer'; // 변수 선언 
const occupation = 'backend developer'; // 재선언 -> 에러 : Uncaught SyntaxError: Identifier 'occupation' has already been declared
occupation = 'backend developer' // 재할당 -> 에러 : Uncaught TypeError: Assignment to constant variable.

 

단, const로 객체를 생성했을 때 속성 자체를 변경하는 것은 불가하지만 배열 내 값이나, 객체 속성 값은 업데이트할 수 있음을 유의하자. 

const employees = {
        name: 'yoojin',
        age: 24
    }; // const로 employees 객체 생성 
    
employees = {
        occupation: 'developer'
    }  // error: TypeError: Assignment to constant variable.
    
employees.age = 28; // 객체 properties 값 업데이트는 가능

 

let을 사용하면 변수 재선언은 불가능하지만 변수의 재할당은 가능하다. 

let nationality = 'KR' ; // let 변수 선언
let nationality = 'US' ; // 재선언 -> 에러 : SyntaxError: Identifier 'nationality' has already been declared

let lastname = 'Oh'; //let 변수 선언 
lastname = 'Kim' ;// 재할당 가능

 

유효범위 (Scope)

scope은 식별자(ex. 변수명, 함수명, 클래스명 등)의 유효 범위, 즉 변수에 접근할 수 있는 범위를 의미한다. var의 경우 변수가 선언된 위치에 따라 유효 범위가 달라진다. 함수 내에서 선언되었으면 함수 내에서만 사용될 수 있고 (function/locally scoped) 함수 외부에서 선언되었으면 전역적으로 (전체적으로) 사용될 수 있다(globally scoped). 반면 const와 let의 경우에는 변수가 선언된 블록 내에서만 유효하다. 이때 블록이란 { }  중괄호 내부를 의미한다. (if/while/for ... 어떤 문법이던 상관 X) 물론 블록 외에서 선언된 경우에는 전역적으로 사용가능한다. 

 

var 아래 예시를 보면 var로 선언된 university는 함수 외부에서, idNumber는 함수 내부에서 선언되었다. 즉, university는 전역적인 스코프를 (globally scoped), idNumber는 지역적인 스코프를 (function/locally scoped) 가지는 변수이다.  따라서 university는 함수 외부에서 사용할 수 있지만, idNumber를 함수 밖에서 사용하려고 하면 Reference error가 발생한다. 

    var university  = "kyunghee";
    
    function getId() {
        var idNumber = 20220101;
    }
    
    console.log(university); // kyunghee 
    console.log(idNumber); // ReferenceError: idNumber is not defined

참고적으로 var로 선언한 전역변수이름과 지역변수 이름이 같아 충돌하는 범위에서는에는 전역변수 대신 지역변수가 사용된다. 

 

let과 const의 경우 함수 뿐만 아니라 모든 블록, 즉 모든  { } 내부에서 선언된 변수는 해당 블록 내에서만 사용 가능하다. (var는 함수 내에서만 이고 let과 const는 모든 블록 이라는 차이점에 유의하자!)  (아래 코드는 let 대신 const를 써도 동일한 결과를 가진다)

   let grade = 4.2;

   if (true) {
        let feedback = "good job"; //변수 feedback은 if문 블록에서 선언됨
        console.log(feedback);// 같은 블록 내에서 사용 가능 -> good job
    }
   console.log(feedback) // ReferenceError: feedback is not defined

 그렇다면 const와 let을 사용해서 함수 외부에서 사용된 변수를 함수 내부에서도 사용하게 되면 어떻게 될까? 아래 코드에서 feedback이라는 변수는 함수 외부에서도, if 문 블록에서도 사용되었다. 이 때 함수 외부의 feedback 변수와 if문 블록 내부의 feedback 변수는 서로 다른 스코프를 가지고 있기 때문에 서로 다른 변수로 여겨진다. (아래 코드는 let 대신 const를 써도 동일한 결과를 가진다)

    let feedback = "good job";
    if (true) {
        let feedback = "keep up the good work";
        console.log(feedback); // "keep up the good work"
    }
    console.log(feedback); // "good job"

 

 

hoisting 

호이스팅 (hoisting)이란 코드 실행 전에 변수의 선언과 함수의 선언이 각 스코프의 맨 위로 옮겨지는 자바스크립트 매커니즘이다. 이때 var, const, let 중 어떤 키워드로 변수를 선언하느냐에 따라 호이스팅의 방식이 조금 다르다. 

 

예를 들어 아래와 같은 코드가 있다고 해보자. 

    console.log (greeter);
    var greeter = "say hello"

이 코드는 아래와 같이 해석된다. 

    var greeter;
    console.log(greeter); //  undefined
    greeter = "say hello"

즉 var를 사용하면 변수는 undefined라는 초기화 된 값과 함께 hoisting 된다. 따라서 var로 선언한 변수는 변수 선언 전에 사용하려고 할 때 에러를 받지 않고 undefined라는 값을 받는다. 

 

반면 const와 let을 사용하는 경우 변수는 hoisting되지만, 값은 초기화되지 않는다. var와 같이 undefined라는 값으로 초기화되지 않는다는 것이다. 따라서 const와 let으로 선언한 변수를 변수 선언 전에 사용하려고 하면 참조 에러를 받는다. 이 기간을 Temporal Dead Zone 이라고 한다. 

    console.log (greeter); // ReferenceError: greeter is not defined
    const greeter = "say hello"

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

 

 

이렇게 var, const, let의 차이점에 대해 정리해보았다.

 

재선언과 재할당이 가능하다는 var의 특성은 여러 가지 오류를 발생시키고 디버깅을 어렵게 만든다. 따라서 꼭 값을 수정해야 하는 경우가 아니라면 const를 사용하고, 값을 업데이트해야 하는 변수에 한해서 let을 사용하는 습관을 가지도록 하자! 

 

 

 

참고자료

 

https://www.freecodecamp.org/news/var-let-and-const-whats-the-difference/

Var, Let, and Const – What's the Difference?

https://www.howdy-mj.me/javascript/var-let-const/

var, let, const의 차이 ⏤ 변수 선언 및 할당, 호이스팅, 스코프

[도서] 아소히로시, 모던 자바스크립트 입문, 서재원 옮김, 길벗, 2021