자바스크립트 변수와 호이스팅

● 자바스크립트 변수

우선 자바스크립트에는 변수를 선언하는 3가지의 방식이 존재한다.

 

1. var

ES5 까지의 버전에서 변수를 선언할때 사용하는 키워드로 주요 특징으로는 아래와 같다.

 

변수의 중복 선언을 허용

var a = 1;
var a = 2;
console.log(a); // 2

이러한 특성은 중복된 이름의 변수를 또 선언하게 될 경우 의도치않은 값이 할당되는 부작용이 발생한다.

 

함수 레벨의 스코프를 가진다

var a = 1;
if (a === 1) var a = 10;
console.log(a); // 10

var b = 1;
for (var b = 1; b < 10; b++) {}
console.log(b); // 10

if문, for문 등 과 같이 함수 외부에서 선언한 변수는 코드블록 내에서 선언해도 모두 전역변수가 되어버린다.

이러한 함수 레벨 스코프는 전역변수가 중복되어 버리는 부작용이 발생한다.

 

2. let, const

ES6 부터 새롭게 추가된 변수 선언에 사용되는 방식이다.

let, const는 서로 유사하지만 const 키워드는 변경(재할당)이 불가능한 상수값을 가진다.

주요 특징으로는 아래와 같다

 

변수의 중복 선언을 허용하지 않는다.

let a = 1;
const b = 1;

let a = 2; // SyntaxError: Identifier 'a' has already been declared
const b = 2; // SyntaxError: Identifier 'b' has already been declared

이미 정의되어 있다는 구문 에러가 발생한다.

 

 

블록 레벨의 스코프를 가진다

let a = 1;
if (a === 1) {
  let a = 10;
}
console.log(a); // 1

let b = 1;
for (let b = 1; b < 10; b++) {}
console.log(b); // 1

이전 var로 선언한 변수와는 다르게 지역 스코프로 인정하는 블록 레벨의 스코프로

변수를 재선언해도 다시 전역변수처럼 동작하지 않는다.

 

 

● 자바스크립트 호이스팅

간단하게 보면 함수 블록 내에 존재하는 변수들을 함수 유효범위 최상단에 끌어올리는 자바스크립트의 특성이다.

 

var 키워드로 변수를 선언할 경우 런타임 이전에 초기화가 진행되어 undefined 값이 할당된다.

즉 변수 선언문보다 위에서 변수의 참조가 가능하다.

console.log(a); // undefined
var a = 1;
console.log(a); // 1


// Change by Hoisting
var a;
console.log(a); // undefined
a = 1;
console.log(a); // 1

 

하지만 let 키워드로 변수를 선언하면 선언, 초기화 2개의 단계가 나눠서 진행된다.

암묵적으로 선언단계가 먼저 실행되지만 초기화는 선언문에 도달했을때 실행된다.

이 때 변수 선언문보다 위에서 변수를 참조하는 경우 참조(Reference) 에러가 발생하게 된다.

console.log(a); // ReferenceError: Cannot access 'a' before initialization
let a = 1;

 

사실 이렇게 보면 ES6에서 추가된 스펙인 let, const 등은 호이스팅이 발생하지 않는것처럼 보일수 있다.

let a = 1;

if (a === 1) {
  console.log(a); // ReferenceError: Cannot access 'a' before initialization
  let a = 2;
}

위 코드를 보면 만약 let 키워드에서 호이스팅이 발생하지 않는다면 console.log(a) 구문은 1을 출력해야 한다.

하지만 참조에러가 발생하는것으로 보아 let 키워드도 호이스팅이 동작한다고 볼수있다.