권돌선생님의 블로그

자바스크립트에 대해 아마 가장 자주 쓰는 코드를 물어본다면,

단언코 var , let, const 일것이다.

컴퓨터를 예로 들면, 컴퓨터를 부팅하고 실행하기 위해 각종 메인부품 외 부속 부품들을 조합하고 연결하여

실행하여야 한다.

​

그런데 이와 같은 과정을 하기 위해선 쉽지 않다. 각 부품별 최적의 회로와 사이즈, 전력량 등을 효율적으로 짜임새

있게 구성하여야 컴퓨터를 효과적으로 사용하고 오래 사용할 수 있는 컴퓨터를 구성할 수 있기 때문이다.

​

프로그래밍도 이와 마찬가지로 여러 변수 및 상수들을 효율적으로 구성하여야 프로그램을 실행하는 데 있어

방해가 되는 버그 사항을 사전에 식별할 수 있어야 하고, 가급적 자주 사용하는 부품들을

공유하여 같이 사용할 수 있게끔 효율적으로 짜는 행위가 필요하다.

서론이 길었으나, 반드시 기억하고 있어야 하는 내용이라고 생각하고 비단 자바스크립트 뿐만 아니라

다른 모든 프로그래밍 언어에도 공통적으로 적용되는 사항이라고 생각한다.

1. 호이스팅의 개념

호이스팅이란, 변수와 함수의 메모리 공간을 선언 하기 전에 미리 할당하는 것을 의미한다.

​

이게 무슨 말이냐 ? 필자도 무슨 말인지 이해하기 힘들었지만, 다시 풀어서 설명해보면

#선언

var name;
console.log('결과 : ',name); // 결과 : undefined

위와 같은 코드는 선언을 하는 코드이며, 프로그램 작성자가 초기화를 하지 않았기에

name이라는 용어가 어떤 행위를 하거나 어떤 역할을 하는지

컴퓨터에서는 알 수가 없으므로 프로그램에서 에러로 식별될 수있다.

그러나 그것을 자바스크립트에서 사전에 잡아주는 행위를 하는데,

var 의 경우에는 초기화를 하지 않았을 경우 undefined로 할당된다.

​

자 그럼, 호이스팅을 왜 하는지 궁금할 것이다. 그냥 실행해도 되지 않나? 라고 생각할 수 있지만

자바스크립트는 컴파일러가 아닌 인터프리터로 실행한다.

# 컴파일러의 역할

원시코드를 기계어로 번역하여 실행 프로그램으로 만든다.

# 인터프리터의 역할

프로그램의 소스코드를 직접 실행하는 프로그램 및 환경이다.

​

쉽게 설명하자면, 컴파일러의 경우 소스코드를 전부 다 읽은 다음에 번역하여 실행 프로그램으로 만든다.

즉, 한국말처럼 모든 내용을 끝까지 다 듣고 판단한다는 것이다.

​

그러나 인터프리터의 경우 소스코드를 한 줄 단위로 읽고 실행한다.

한 줄 단위로 실행하는 기준에 있어 첫 줄부터 순차적으로 읽고 실행하는데,

사전에 선언하지 않았을 경우 그 다음 실행코드에서 인지하지 못하고 에러를 발생할 수도

있는 것이다. 결국 그것을 방지하기 위해서 호이스팅 처리를 하는 것이다.

​따라서 아래와 같은 코드도 에러가 발생하지 않는 것이다.

# 변수 예제

console.log(dog); // 호이스팅한 var 선언으로 인해 undefined 출력
var dog; // 선언
dog = '똘똘이'; // 초기화

# 함수 예제

dogName("똘똘이");
function dogName(name) {
	console.log("제 강아지 이름은 " + name + "입니다"); // 제 강아지 이름은 똘똘이입니다
}

const 와 let 의 경우, 호이스팅 대상이지만 var와는 다르게

undefined로 초기화하지는 않아서, 코드 실행 시 에러가 발생한다.

정리하자면, 호이스팅은

인터프리터에 의해 자바스크립트 코드가 실행할 때 나중에 선언된 변수나 함수에 대해

호이스팅 처리를 하여 에러를 방지하기 위해 하는 행위라고 볼 수 있겠다.

​

# 참고 문헌

https://developer.mozilla.org/ko/docs/Glossary/Hoisting

https://ko.wikipedia.org/wiki/%EC%9D%B8%ED%84%B0%ED%94%84%EB%A6%AC%ED%84%B0

​