var, let, const, 그리고 Hoisting

 

자바스크립트에서 변수 선언을 위한 키워드로 var, let, const가 있다. 이들의 특징을 살펴보고 이와 연관지어 호이스팅이라는 재미있는 개념 또한 알아보자.

---

1. var

ES6 이전 자바스크립트에서 변수 선언 시, var를 앞에 붙였다.

var 키워드를 사용하면, 변수를 재선언하거나 재할당하는 것이 가능하다.

var는 또한 함수 레벨 스코프를 지녔다. 즉, 지역 스코프가 함수 내부에서만 만들어지기 때문에, for문, if문 등의 문 내부에서만 사용하고 싶은 값들이 의도치 않게 전역 변수를 바꿀 수도 있다.

 

모던 웹 개발 세계에서 var는 사용하지 않는다고 봐도 무방하다.

 

2. let과 const

let과 const는 var와 다르게 블록 레벨 스코프다. 때문에 함수가 아닌 블록을 기준으로 지역 스코프가 생성된다.

let의 경우 재선언은 불가하나 재할당은 가능하다.

let value = 1;

value = 2; // possible
let value = 3; // impossible

const의 경우 재선언과 재할당이 모두 불가하다.

선언 시 값을 할당해야하며, 일반적으로 대문자 Snake case로 변수명을 표기한다.

const CONST_VALUE = 1;

CONST_VALUE = 2; // impossible
const CONST_VALUE = 3; // impossible

 

const의 값이 Primitive type(원시 타입)이라면 상수라 생각하면 된다.

그러나 Reference type(객체 타입)일 경우 이야기가 조금 다르다.

예를 들어 const의 값으로 객체가 왔다고 해보자. 이때 객체 내부 property는 얼마든지 변경이 가능하다. 그러나 객체가 변경되도 변수에 할당된 참조 값은 변하지 않는다.

const CONST_VALUE_PRIMITIVE = 1; // cannot change the value

const cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Toyota" // possible

 

자바스크립트로 코드 작성 시, 우선 const로 변수를 선언하자.

이후 재할당해야할 상황이 있다면 let으로 바꿔도 무방하다.

 

3. Hoisting

호이스팅은 모든 선언문이 스코프의 선두로 끌어 올려진 것처럼 동작하는 현상을 말한다.

 

우선 변수의 호이스팅을 살펴보자.

var가 아닌 let과 const를 사용해야하는 대표적인 원인 중 하나이기도 하다. 이에 대해 좀 더 알아보자.

 

우선 2가지를 선행해서 알아야한다.

1. 자바스크립트의 동작 원리와 2. 변수에 값을 할당하는 과정이다.

 

자바스크립트는 소스코드가 본격적으로 실행되는 런타임 전에, 준비 단계로 평가 과정을 거친다. 이때 자바스크립트 엔진은 먼저 변수 선언을 포함한 모든 선언문을 소스코드에서 먼저 선언한다. 이후 런타임에서 나머지 소스코드를 한 줄씩 순차적으로 실행한다.

 

한편, 변수에 값을 지정하는 과정은 다음과 같은 단계를 거친다.

1. 변수 선언

2. 변수 초기화

3. 변수 할당

 

var의 경우 준비 단계에서 변수 선언과 초기화가 이루어진다. 때문에 아래의 경우 런타임에서 undefined가 출력된다.

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

let, const는 준비 단계에서 변수 선언만 이루어진다. 때문에 마치 호이스팅이 발생하지 않는 것처럼 작동한다. 이는 혹시 모를 오류 가능성 낮춰 개발을 용이하게 한다.

console.log(VALUE); // SyntaxError
const VALUE = 1;

 

다음으로 함수 호이스팅을 살펴보자.

함수 또한 호이스팅이 된다.

예를 들어 아래 경우 함수 선언식은 준비 단계에서 자바스크립트 엔진에 포착되어 값이 출력된다.

foo(); // a

function foo(){
  console.log('a');
}

 

함수 표현식은 이러한 혼란스러운 상황을 미연에 방지할 수 있다.

foo(); // Error

var foo = function(){
  console.log('a');
}

그 이유는 다음과 같다.

위 함수 표현식은 호이스팅에 의해 다음과 같이 코드를 실행하게 된다.

var foo;
foo();
foo = function(){
  console.log('a');
}

즉, "foo();"처럼 말이 안되는 표현이 되어버리기 때문에 에러가 발생한다.

---

더 자세히 알아보기

관련서적: 모던 자바스크립트 Deep Dive

 

 

 

 

-학습을 진행하며 남기는 지식 포스팅-

 

-부족한 설명이 있다면 부디 조언 부탁드립니다-

 

 

 

 

이 포스팅은 쿠팡 파트너스 활동의 일환으로,

이에 따른 일정액의 수수료를 제공받습니다