JavaScript _ Hoisting

1. (JS에서) Hoisting이란?

: interpreter가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것; 변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는 것 -> 변수 정의부보다 사용부가 앞서 등장할 수 있음

• var로 선언한 변수: 호이스팅 시 undefined로 변수 초기화
• let, const로 선언한 변수: 호이스팅 시 변수 초기화하지 않음

2. 예제

petName("Loopy"); // 호출 가능

function petName(name){
  console.log(name);
}

3. 주의할 점

💥 JavaScript는 초기화를 제외한 선언만 호이스팅
+) 호이스팅 우선순위: 함수보다 변수가 위로 끌어올려짐

console.log(n1); // 호이스팅되어 undefined 출력
var n1; // 선언
n1 = 6; // 초기화

console.log(n2); // Reference Error -> 선언이 없으므로 호이스팅도 없다
n2 = 6; // 초기화

n3 = '쿠쿠루삥뽕'; // n3 초기화
console.log(n3); // '쿠쿠루삥뽕'
// 호이스팅은 없지만, 변수 초기화는 (아직 하지 않은 경우) 변수 선언까지 병행하므로 변수 사용 가능

👉🏻 코드의 가독성과 유지보수를 위해 호이스팅이 일어나지 않도록 하기!

• 함수와 변수를 가급적 코드 상단부에서 선언
• var보다 let, const 사용 (기본 const, 재할당이 필요한 경우만 let으로)

참고자료
https://developer.mozilla.org/ko/docs/Glossary/Hoisting
https://gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html
https://velog.io/@bathingape/JavaScript-var-let-const-%EC%B0%A8%EC%9D%B4%EC%A0%90