console.log("Hoisting");

📌 Hoisting

- Hoisting 은 무엇인가?

JavaScript 호이스팅은 인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는
임포트(import)의선언문을 해당 범위의 맨 위로 끌어올리는 것처럼 보이는 현상을 뜻합니다.
- 출처 : MDN

 

• JavaScript 엔진이 코드를 실행하기 전에 변수와 함수 선언을 스코프의 최상단으로 끌어올리는 것처럼 동작하는 특징이다.
• 실제로 코드의 위치가 변경되는 것은 아니며, 변수와 함수 선언이 실행 컨텍스트 생성 단계 에서 메모리에 등록된다.
• 변수는 선언만 끌어올려지며 초기화는 끌어올려지지 않는다.

- Hoisting 과정

1. JavaScript 는 코드를 실행하기 전에 Execution Context를 생성한다.
2. 실행 컨텍스트가 생성될 때, 변수와 함수 선언이 메모리에 먼저 등록된다.
3. 이를 통해 선언이 코드의 순서와 관계없이 사용할 수 있게 되나, 초기화나 정의는 실제 코드가 실행될 때 이루어진다.

---

⭐️  변수

- 변수 선언과 초기화시 Hoisting 차이

특징	var	let	const
호이스팅 여부	O (호이스팅 됨)	O (호이스팅 됨)	O (호이스팅 됨)
초기화 시점	초기화가 동시에 이루어짐	초기화는 실행 단계에서 이루어짐
사용 가능 여부 (∗TDZ)	선언 이전에도 undefined로 접근 가능	선언 전에 접근시 ReferenceError 발생
스코프 (Scope)	function scope	block sope
재선언 가능 여부	가능	불가능
재할당 가능 여부	가능	가능	불가능

 

∗TDZ : Temporal Dead Zone

 

- 예시 코드

console.log(a); // undefined
var a = 10;
console.log(a); // 10

console.log(b); // ReferenceError
let b = 20;

console.log(c); // ReferenceError
const c = 30;

c = 40; // Assignment to constant variable.

 

---

🤔 함수

- 함수 선언문과 함수 표현식 Hoisting 차이

• 함수 선언문
  • 선언과 정의가 모두 호이스팅된다.
  • 함수 선언 이전에도 호출할 수 있다.
• 함수 표현식
  • 변수 선언만 호이스팅된다.
  • 초기화된 함수는 호이스팅되지 않기에 선언 전에 호출하면 오류(TypeError)가 발생한다.

- 예시 코드

// 함수 선언문
sayHello(); // output: Hello
function sayHello() {
  console.log("Hello");
}

// 함수 표현식
greet(); // TypeError: greet is not a function
let greet = function () {
  console.log("Hi");
}

 

---

🤔 class

- class 에서의 hoisting

• 클래스 선언도 호이스팅되지만, let, const 와 비슷하게 TDZ 에 의해 선언 전에 접근하면 ReferenceError 가 발생한다.

const obj = new MyClass(); // ReferenceError
class MyClass {
  constructor() {
    this.name = "Nana";
  }
}

 

---

🤔 문제

- Hoisting 으로 발생할 수 있는 문제

• 변수 선언이 끌어올려지는 것처럼 동작하기 때문에 코드 가독성이 떨어질 수 있다.
• undefined 값을 참조하는 버그가 발생할 수 있다.

- Hoisting 동작 방식 피하는 방법

1. let, const 를 사용하여 TDZ 를 활용하면 선언 전 접근 시 에러가 발생하여 방지 할 수 있다.
2. 변수와 함수선언을 코드의 최상단에 명확히 작성한다.
3. ES6 의 모듈 시스템 활용시 스코프와 선언문제가 해결된다.

---

🔥 배운점

호이스팅은 실행컨텍스트가 생성될 때 변수와 함수 선언이 메모리에 먼저 등록되면서 발생하는데 기존에 사용하던 var 특성은 초기화 전에 호출하면 undefined 를 출력하는데 이는 의도치 않은 값이기 때문에 문제를 야기할 수 있다. 이것을 해결하기 위한 대체제로 let 과 const 가 있는데 이또한 호이스팅이 이루어지지만 TDZ 로 에러를 발생시켜 마치 호이스팅이 이루어지지 않은 것 처럼 보이게 한다. 여기서 중요 점은 근본적으로 let 과 const 도 호이스팅이 이루어진다는 점이다. 

상황에 따라 호이스팅이 이루어지는 것이 코드의 유연성을 제공하고 초기화 순서에서 자유로우며 프로토타이핑 하기 좋고 기존 레거시 코드와의 호환성도 좋은 장점이 있지만, 예상치 못한 동작은 프로그래밍에서 잠재적 오류를 야기할 수 있고 오류를 추적하기 어려워 디버깅 하기 어려워지고 코드의 가독성 또한 저하시키기 때문에 호이스팅을 방지하는 방식을 채택하여 가독성과 안정성을 높이는 것이 좋겠다.

 

학습중인 내용으로 잘못된 내용이 있다면 꼭 고치도록 하겠습니다.

 

참고

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

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