호이스팅(Hoisting)을 쉽게 알아보자

 

let, var의 차이점에 대해 설명하실 수 있으신가요?

Javascript의 호이스팅에 대해 설명하실 수 있나요?

 

입꾹닫을 시전하였습니다

 

개발자(특히 웹개발자) 면접에서 거의 단골 손님으로 등장하는 개념이다. Javascript를 사용하면서 너무나도 당연하게 사용해왔고 가끔씩은 개념을 모른 상태에서 경험했던 적도 있는 그런 개념이다. 이 글을 읽고 있는 여러분들이 만약 면접에서 이런 질문을 받게 된다면, 당황하지 말고 잘 답변할 수 있도록 내용을 쉽게 정리해보려 한다.

 

Javascript를 통해 개발을 했던 사람들이라면, Javsciprt에서 변수를 선언하는 방법은 const, let ,var 세 가지가 있다는 것은 잘 알고 있을 것이다. 위 세가지를 간단하게 살펴보고 가자

 

Javascript 변수 선언 방식

var

중복 선언이 가능하다. 아래의 코드를 보면 이해가 쉬울 것이다.

var soopiri = 'human'
console.log(soopiri) // human

var soopiri = 'not human'
console.log(soopiri) // not human

위의 예시처럼 변수를 한 번 더 선언해도 에러가 발생하지 않으며, 각자 다른 값으로 할당된다. 변수 선언이 유연하여 어떻게 보면 사용이 아주 간편하지만, 코드의 양이 늘어가게 되고 이곳저곳에서 사용하게 된다면 코드 파악이 아주 힘들어 질 수도 있다.

 

let

중복 선언이 불가능하지만, 재할당은 가능하다. 2015년, 정확히는 es6이후, var를 보완하기 위해 let과 const가 등장한다. var와의 가장 큰 차이점이라면 중복 선언이 불가능하다는 점이다. 아래 코드를 살펴보자.

let soopiri = 'human'
console.log(soopiri) // human

let soopiri = 'not human'
console.log(soopiri) 
// Uncaught SyntaxError: Identifier 'soopiri' has already been declared

var와 동일한 방식으로 선언을 했더니 이번에는 SyntaxError가 발생한다. 이미 soopiri라는 식별자가 이미 선언되었다는 에러이다.

let soopiri = 'human'
console.log(soopiri) // human

soopiri = 'not human'
console.log(soopiri) // not human

위의 코드처럼 재 선언은 안되지만 재할당은 가능한 모습 역시 살펴볼 수 있다.

 

cosnt

중복 선언이 불가능하며, 재할당 역시 불가능하다. const역시 es6에 등장했으며, 상수를 선언하기 위해 사용하는 방식이다. 주로 URL이나, 특정 설정 값 등 변경되지 않는 값을 다루기 위해 사용하는 방식으로 비교적 이해하기 쉽다.

const BLOG_URL = 'https://soopiri.tistory.com'
const MAX_NUMBER = 100

 

지금까지 var, let, const의 차이점에 대해 살펴보았다면 이제는 호이스팅(Hoisting)의 개념에 대해 알아보자. 

 

호이스팅 (Hoisting)

What is hoisting?

호이스팅은 개발 면접에서 단골 메뉴로 등장하는 개념이라 잘 이해하고 넘어가면 좋을 것이다. (단순히 면접 답변용으로 공부하기 보다는 잘 이해하면 실제로 개발하는데에도 많은 도움이 된다!)

호잇스팅? ㅈㅅ

호이스팅이란 var,let,const등의 변수나 fuction등의 선언문 등을 해당 스코프의 최상단으로 올리는 것처럼 동작하는 특성을 말한다.

더 쉽게 얘기 해보자. 코드가 실행이 되기 전에 먼저 자바스크립트 엔진이 선언해둔 변수, 함수 등을 파악하고 이를 메모리에 기억 해둔다. 그 뒤에 변수나 함수가 실행될 때 해당 메모리에서 불러오는것이라고 생각하면 된다.

즉, 함수가 실행되기 전에 안에있는 변수들을 범위의 최상단으로 끌어 올리는 것. 이것이 호이스팅의 개념이다. Javascript에서는 ES6에 도입된 let, const를 포함하여 var, let, const, function, function*, class 등 모든 선언을 호이스팅한다. 아래 코드들을 보며 더 자세히 살펴보도록 하자.

console.log(soopiri) // undefined
var soopiri = 'hey'

으응? soopiri라는 변수가 선언되기 전인데 에러가 발생하는 것이 아니라 undefined가 출력된다.

 

console.log(soopiri) // Error: Uncaught ReferenceError: soopiri is not defined
let soopiri = 'hey'

그런데 위의 예시와는 다르게 let으로 선언한 변수는 참조 에러를 출력한다. 이는 let으로 선언된 변수는 스코프의 최상단에서 변수의 선언 단계까지만 실행되고, 초기화 단계를 실행하지 않기 때문에 발생하는 일이다.

 

응? 선언단계? 초기화단계?

 

아래에서 변수의 선언 단계에 대해서 알아보도록 하자.

 

변수 선언 단계

변수는 선언 > 초기화 > 할당 의 단계를 거쳐서 생성된다. 이와 관련한 자세한 내용은 코드를 보며 이해하는 것이 더 빠를 것이다.

/*=======================================================
case: var
var로 변수를 선언할 경우, 스코프의 최상단에서 선언과 초기화 단계를 거친다.
그렇기 때문에 변수 선언 이전에 변수를 참조할 수 있다.
=======================================================*/

console.log(soopiri) // undefined

var soopiri;
console.log(soopiri) // undefined

soopiri = 'Hello' // 할당 단계
console.log(soopiri) // Hello

/*=======================================================
case: let
var로 변수를 선언할 경우, 스코프의 최상단에서 선언과 초기화 단계를 거친다.
그렇기 때문에 변수 선언 이전에 변수를 참조할 수 있다.
=======================================================*/

console.log(soopiri) // ReferenceError: soopiri is not defined

let soopiri; // 선언 및 초기화 단계
console.log(soopiri) // undefined

soopiri = 'Hello' // 할당 단계
console.log(soopiri) // Hello

 

마무리하며

그래서.. const를 써? let을 써? var를 써? 아래의 코드를 보면서 이야기 해보자.

// use const
for (const row of rows) { console.log(row) }

// use let
for (let i = 0; i < 100; i = i+1) {}

위의 코드에서 아래의 for문처럼 i에 재할당이 일어나는 경우 let을 쓸 수 밖에 없지만, 위의 포문처럼 row에 재할당이 필요하지 않은 경우. const를 사용하는 것이 좋다. 의도치않은 재할당을 방지할 수 있기 때문이다.