Javascript - Hoisting

JavaScript에서 호이스팅은 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다.

 

사실 전 이게 무슨 말을 하는지 모르겠습니다. 이제부터 예시코드를 보면서 이해해볼까요?

 

function sumFunc(a,b){
  return a+b
}

const sumConst = (a,b) => a+b

console.log(`sumFunc(1,2) => ${sumFunc(1,2)}`) 	  //'sumFunc(1,2) => 3'
console.log(`sumConst(3,4) => ${sumConst(3,4)}`)  //'sumConst(3,4) => 7'

이렇게 사용하는 것은 당연히 이해가 갑니다. 동기적으로 위에서부터 내려오는 것을 생각하면 당연히 작동한다는 것을!

 

다른 예시코드를 보면 함수가 밑에 작성되있어고 위에서 함수를 실행해도 실행이 됩니다!

const sumConst = (a,b) => a+b

console.log(`sumFunc(1,2) => ${sumFunc(1,2)}`) 	  //'sumFunc(1,2) => 3'
console.log(`sumConst(3,4) => ${sumConst(3,4)}`)  //'sumConst(3,4) => 7'

function sumFunc(a,b){
  return a+b
}

이것은 작동이 되는데... arrow function을 아래로 내리면 

console.log(`sumFunc(1,2) => ${sumFunc(1,2)}`) 	  //'sumFunc(1,2) => 3'
console.log(`sumConst(3,4) => ${sumConst(3,4)}`)  //ReferenceError: sumConst is not defined

function sumFunc(a,b){
  return a+b
}

const sumConst = (a,b) => a+b

이런 식의 에러가 발생합니다.

 

Q1. 첫 번째로 왜 function으로 정의내린 함수는 밑에 있어도 실행이 될까요?

→ 그 이유는 function 으로 정의한 함수는 javascript 작동원리에 의해 최상단으로 이동해서 실행이 된다고 합니다. 아! 이게 바로 호이스팅인 것 같습니다!

hoist의 사전적 의미처럼 함수를 끌어올려주게 되네요.

 

Q2. 왜 const 나 let 으로 정의된 함수는 올라가지 않을까요?

상수가 작동하는 방식에 따라 호이스팅되지 않는다고 합니다.

 

상황에 따라서 function으로 함수를 만드는 것과 arrow function으로 함수를 작성하는 것을 사용해야할 것 같습니다.

근데 생각해보면 순서에 맞게 코드를 잘 짜게 된다면 arrow function으로 코드를 작성해도 될 것 같고, 또 함수들을 호이스팅하기 위해서 function으로 함수를 생성하는 것도 좋을 것 같습니다.

 

아직 많은 코드를 짜보지 않았지만 일단 검색을 해본 결과 어떤 외국인 형이  그냥 function을 이용하는 것이 더 좋다고 하긴 하네요.

 

사전적의미로 먼저 들어가면서 배우면 더 이해가 잘 된답니다!

---

출처 

https://www.youtube.com/watch?v=EvfRXyKa_GI