0. Hoisting

Hoisting

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

 

기본적으로 객체지향 프로그래밍의 원칙을 위배하기때문에 Hoisting을 사용하지 않는 환경도 많다.

---

1. Hoisting이 동작하는 경우

 

1) var 변수 선언

 

• 해당 스크립트로 console에는 undefined가 출력된다.
• var 예약어로 변수를 선언하는 것 까지만 hoisting이 되고 초기화는 hoisting이 되지 않는다.

변수가 초기화 되지않은 채 hoisting이 되므로 나중에 문제가 될 가능성이 많아 사용하지 않는걸 권장한다.

---

2) function 선언

 

• 인자의 합인 3이 console에 출력되었다.

---

2. Hoisting이 동작하지 않는 경우

 

• const, let, 화살표 함수 등등... 위 상황을 제외한 경우는 대부분 동작하지 않는다.
• Hoisting은 객체지향 프로그래밍 원칙에 위배되므로 위 방식으로 스크립트를 작성하는건 권장하지 않는다.

---

3. 같은 이름의 함수가 있는 외부 Script 파일이 여러 개 인 경우

 

• 각 스크립트 파일에는 함수 f1()에 대해 선언되어 있다.
• 위 상황에서는 script02 파일의 f1() 함수가 호출된다.

---

각 스크립트 파일에 같은 이름의 변수가 const 예약어로 선언된다면?

 

 

• const로 이미 선언된 변수의 경우 재선언이 불가능하다.
• var 예약어로 선언된 변수의 경우 재선언이 가능하다.

---

위 상황에서 각 스크립트 파일에 같은 이름의 함수가 중복으로 선언되어 있어도 아무런 에러가 발생하지 않는게 문제상황이다.

해당 상황에서 논리적 오류가 발생한다면 에러확인이 불가능한 상황이다.

 

변수의 경우에도 var 예약어로 선언할 경우 위와 같은 재선언 문제가 발생하는데

let과 const 예약어를 사용하여 변수를 선언할 경우 재선언 불가로 에러를 발생시켜 문제를 확인할 수 있다.

---

스크립트 파일에 에러가 발생한다면?

 

 

script02를 불러오던 중, 에러가 발생해서 `script02.js`에 있는 변수, 객체, 함수들은 선언 및 재선언 되지못했다.

---

출처

 

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

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