[Javascript] 자바스크립트 변수(var, let, const) 및 호이스팅(hoisting)

 

Javascript - 자바스크립트 변수(var, let, const) 및 호이스팅(hoisting)

 

 

   목차

1. Javascript 변수
2. Hoisting

 

 

1. Javascript 변수 

 

javascript변수로는 let, const, var이 있습니다. let과 const는 ES6 이후 부터 생긴 변수이고 그 이전에는 var를 사용하였습니다. var은 매우 유연해 보이나 이로인해 여러 문제점을 발생시킬 수 있어 let과 const 변수 사용을 권장하고 있습니다. 

 

javascript변수 var, let, const 차이

 

 

2. Hoisting

 

호이스팅이란 변수 또는 함수의 선언부가 현재 스코프 영역의 최상단으로 올려져 선언한 것 같이 동작하는 현상을 말합니다.

cf) 선언만 호이스팅 되며 값 할당은 호이스팅 되지 않음

 

console.log(age1);  // undefined 출력
console.log(age2);  // Cannot access 'age2' before initialization
console.log(age3);  // Cannot access 'age3' before initialization

var age1=10;
let age2=20;
const age3=30;

 

위 예제에서 호이스팅은 var, let, const 모두 이루어집니다.

그러나 var은 변수 선언과 초기화가 한번에 이루어지기 때문에 age1은 초기화된 undefined가 출력됩니다.

반면 let과 const는 초기화가 되어 있지 않은 상태로 남아 있어 age2와 age3에 접근할 수 없게 됩니다.

 

let의 경우 초기화가 변수 선언문에서 이루어집니다. 따라서 아래 예제에서 age2는 undefined가 출력됩니다. 

반면 const는 변수 선언과 초기화, 할당이 함께 되어야 하기 때문에 선언부에서 아래와 같이 에러가 발생합니다. 

 

    var age1;
    let age2;
    const age3;         // Missing initializer in const declaration
    
    console.log(age1);  // undefined 출력
    console.log(age2);  // undefined 출력
    console.log(age3);  // 에러발생

    age1=10;
    age2=20;
    age3=30;