JavaScript 호이스팅(Hoisting) 소개, 기능, 유의점, 예시 코드

JavaScript 호이스팅(Hoisting) 소개, 기능, 유의점, 예시 코드

 

 

JavaScript에서 호이스팅은 많은 개발자에게 헷갈리는 개념 중 하나입니다. 이 글에서는 호이스팅이 무엇인지, 그 동작 원리, 그리고 예시 코드를 통해 자세히 알아보겠습니다.

 

 

호이스팅이란?

 

호이스팅의 정의

• 호이스팅은 JavaScript 엔진이 코드 실행 전에 변수 및 함수 선언을 미리 메모리에 올리는 동작입니다.
• 실제 코드 실행 전에 변수 및 함수 선언이 끌어올려져 있어 마치 코드 상단에 선언된 것처럼 동작합니다.

 

호이스팅 - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN

 

 

변수 호이스팅

 

변수 선언 호이스팅

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

 

• 변수 x의 선언은 호이스팅되어 코드 상단으로 끌어올려집니다.
• 따라서 console.log(x)에서 x는 선언되었지만 아직 값이 할당되지 않았으므로 undefined를 출력합니다.

 

 

함수 호이스팅

 

함수 선언 호이스팅

foo(); // "안녕, JavaScript!"
function foo() {
  console.log("안녕, JavaScript!");
}

 

• 함수 foo의 선언은 호이스팅되어 코드 상단으로 끌어올려집니다.
• 따라서 foo()를 호출할 수 있고, 함수는 정상적으로 실행됩니다.

 

함수 표현식 호이스팅

bar(); // 오류: bar is not a function
var bar = function() {
  console.log("안녕, JavaScript!");
};

 

• 변수 bar는 호이스팅되지만 함수 표현식은 호이스팅되지 않습니다.
• 따라서 bar()를 호출하면 오류가 발생합니다.

 

 

호이스팅의 유의점

 

변수와 함수 호이스팅 차이

• 변수는 선언과 동시에 undefined로 초기화됩니다.
• 함수는 선언만을 호이스팅하며, 함수 표현식은 호이스팅되지 않습니다.

 

가독성과 버그 예방

• 호이스팅은 코드의 가독성을 해치므로 변수와 함수는 선언한 위치에서 사용하는 것이 좋습니다.
• 호이스팅으로 인한 예상치 못한 동작을 방지하기 위해 변수 초기화와 함수 호출은 코드 상단에서 처리하는 것이 좋습니다.

 

 

끝으로

 

호이스팅은 JavaScript의 특이한 동작 중 하나이며, 코드 실행 전에 변수와 함수 선언을 끌어올립니다. 이를 이해하고 적절하게 활용하면 코드 작성과 디버깅이 더 쉬워집니다. 하지만 호이스팅으로 인한 예기치 못한 동작을 방지하기 위해 코드를 명확하게 작성하는 것이 중요합니다.

 

▼ 아래 글도 읽어보세요! ▼

 

JavaScript 실행 컨텍스트와 콜 스택 소개, 특징, 생성 과정, 예시 코드

 

JavaScript Spread 연산자 (...) 소개, 개념, 사용법, 예제 코드

 

JavaScript 템플릿 리터럴 쉽게 배우기 - 소개, 특징, 장점, 예제 코드