[Javascript] 프론트 개발자라면 알아야 할 호이스팅의 핵심 개념(호스팅 아니고 Hoisting)

 

호이스팅에 대한 개념은 자바스크립트 개발 면접에 필수적으로 나오는 사항이니, 프론트엔드 개발자라면 꼭 다른사람에게 설명할 수 있을만큼 숙지하고 넘어가자

 

 

호스팅? 호이스팅?

호스팅(Hosting)과 호이스팅(Hoisting)은 이름만 비슷한 완전 다른 개념이다- 인도와 인도네시아 정도 차이라고 생각하면 된다

 

호스팅은 웹 서비스나 서버 호스팅을 할 때 쓰는 용어이다

홈페이지를 만들어서 AWS서버에 올리면, 서버에 프로젝트가 '호스팅' 되었다 라고 한다

 

 

반면 호이스팅은 자바스크립트의 '특징'을 칭하는 용어다.

Javascript는 인터프리터 언어임과 동시에 컴파일 언어다. 그래서 이러한 특징이 존재한다.

 

그럼 호이스팅에 대해 더 자세히 알아보자

 

 

 

 

호이스팅(Hoisting)의 개념

 

호이스팅(Hoisting)은 JavaScript에서 변수와 함수 선언이 스코프의 상단으로 끌어올려지는 특징이다

코드 실행 전에 JavaScript 엔진에 의해 처리된다

 

아직 잘 와 닿지 않으니 코드 예시를 보면서 이해해보자.

 

 

호이스팅의 종류에는 변수 호이스팅과 함수 호이스팅이 있다.

 

 

 

변수 호이스팅

 

변수 선언을 하면 코드의 맨 위로 끌어올려진다

단, 초기화(값 할당)는 끌어올려지지 않는다. 즉 단순히 선언만 해준다

console.log(x); // undefined
var x = 100;
console.log(x); //100

위의 코드는 아래와 같이 JS엔진에 의해 처리된다

var x //변수 호이스팅

console.log(x); // undefined
var x = 100;
console.log(x); // 100

 

 

var로 선언된 변수는 호이스팅이 발생하며, 선언부가 끌어올려지지만 값을 넣어준 부분(초기화 된 부분)은 끌어올려지지 않아 undefined로 출력된다

 

 

이를 쉽게 설명해보면, 자바스크립트 엔진은 코드를 쭉 보면서 모든 변수들에 대한 사전을 만든다

예를 들어

console.log(x+y+z); // undefined
var x = 1;
var y = 10;
var z = 100;
console.log(x+y+z); //111

라는 코드가 있을때, 자바스크립트 엔진은 변수 x,y,z를 발견하고 컴파일 전에 변수 사전을 만든다. 이때, 값은 넣지 않고 비워둔다(undifined)

type	변수 명	값
var	x	undifined
var	y	undifined
var	z	undifined

 

그리고 코드를 하나 하나 실행시키면서 변수 값을 마주칠경우 ( var x=1) 이 사전에 값을 수정해준다.

 

 

 

함수 호이스팅

 

함수 선언은 함수 전체가 끌어올려진다. 변수 호이스팅과 동일하다

helloWorld(); // "Hello, World!"

function helloWorld() {
  console.log("Hello, World!");
}

위의 코드는 아래와 같이 해석된다

 

//함수 호이스팅 (맨 위로 올라옴)
function helloWorld() {
  console.log("Hello, World!");
}

helloWorld(); // "Hello, World!"

 

함수 표현식의 경우 호이스팅이 발생하지 않는다.함수 표현식은 변수 호이스팅이 발생하기 때문에 변수는 호이스팅되지만 함수는 그렇지 않다.

 

주의해야 할 점은, 호이스팅은 선언부만 끌어올려지며 할당(초기화) 부분은 원래 위치에서 실행된다.

 

따라서 변수 초기화 전에 변수를 참조하면 undefined가 반환될 수 있다.

함수의 경우는 함수 전체가 끌어올려지므로 선언 이전에 호출해도 정상적으로 작동한다!

 

 

 

 

 

이렇게 간단하게 코드가 작동했던것이다.

 

절차지향 C언어를 공부하고 바로 자바스크립트를 공부했었는데, 이 부분이 정말 이해가 안 갔었다

하지만 호이스팅에 대해 알고 나니 그동안 쌓였던 궁금증들이 해소된 것 같다

 

 

 

roll the dice

clice의 개발일지 입니다