Ch 3. JS 함수-04.호이스팅

#호이스팅(hoisiting)

함수 선언부가 유효범위 최상단으로 끌어올려지는 현상

함수 선언부가 유효범위라는 거 우리가 예전에 배웠죠? 영어로는 스콥이라고 하고요.

그래서 그 유효범위 최상단으로 끌어올려지는 현상을 얘기한데요.

이것이 무엇인지 아래쪽에 코드를 통해서 살펴볼건데요.

 

#실습준비

실습준비화면

const a = 7  const double = function () {   console.log( a * 2 ) } double()

double이라는 변수에 익명함수가 할당되었습니다. 함수표현이 완성되었습니다.

그리고 double이라는 함수가 호출되고 있습니다.

14가 출력되었습니다.

#호이스팅 개념

const a = 7 double()  const double = function () {   console.log( a * 2 ) }

그런데 double()을 잘라서 double이라는 함수가 표현되고 있는 그 윗부분에서 이렇게 

실행을 해 볼게요.

이렇게하면 당연히 type error가 발생합니다.

double is not function

이 double이라는 함수가 실행이 될 때는 아직 이 더블이라는 부분에 함수가 

만들어지지 않았기때문에 이것은 아직 함수가 아니라는 뜻입니다.

기본적으로 위에서 아래로 해석합니다.

그래서 double이라는 것이 실행될때는 아직 이 더블이 만들어지기 전인

상태라는 거고요.

그래서 우리가 함수표현을 사용했을 때는 이렇게 더블이라는 것을

먼저 호출하는 것이 불가능하지만 이 함수 표현 부분을

이렇게 함수 선언으로 바꿔보도록 할게요.

const a = 7 double()  const double = function double() {   console.log( a * 2 ) }

그래서 중간에 할당연산자는 보이지 않고요.

function키워드 뒤쪽에 바로 double이라는 이름을 지어서 함수를 만들었습니다.

그래서 이것은 함수 선언이죠.

그리고 이 함수 선언 위에서 이렇게 double이라는 함수를 호출하고 있는데요.

별다른 에러없이 14가 잘 출력이 되고있습니다.

//

const a = 7 double()  function double() {   console.log( a * 2 ) }

이것이 바로 이 자바스크립트에서 함수의 선언부가, 즉, 우리가 만든 함수 선언이

( function double() { ... } )

유효범위 최상단으로 끌어올려지는 현상, 즉,호이스팅이 발생해서

실행이 가능해지는 것입니다. 결국, 우리가 이 함수 선언부를 작성한 것은

아래쪽에다가 작성을 했지만, 실제로 이 브라우저가 동작할 때 JS엔진에서는

이 함수 선언부가 동작할 수 있는 유효범위에 가장 최상단으로 올라가서

만들어지게되어요.

그렇기 때문에 이 함수 선언은 이렇게 밑에다가 작성을 해도 그 위에서 호출이

가능하다는 겁니다. 그것이 바로 호이스팅이라는 개념이에요.

 

이게 다 에요.

 

#이 호이스팅이 언제 유용하냐면,

우리다 지금현재 로직같은 경우에는 그렇게 복잡한 부분이 있지는 않지만

이 double() 함수 안에는 앞으로 복잡한 내용이 들어갈거에요.

그랬을 때 우리가 특정한 함수를 실행하기 위해서 이렇게 함수부분을 위쪽에서 

실행해서 만들게 되면,

const a = 7 function double() {   console.log( a * 2 ) } double()

이 복잡한 코드를 위에서 아래로 읽어내려 갈 때 이 더블이라는 함수가 어디에서

실행되는지 찾기 전에 굉장히 많은 로직을 거쳐서 지나야 하죠.

그래서 해석하기가 그다지 좋지 않습니다.

그래서 우리는 javascript에서 hoisting이라는 현상을 이용해서 기본적으로 함수의

이름만 보고도 대략적인 함수의 로직을 추측해 볼 수가 있기때문에,

함수가 직접적으로 만들어져 있는 부분은 전체코드의 최하단 부분에다가

이렇게 작성하는 방법을 많이 사용하게 되어요.

const a = 7 double()  function double() {   console.log( a * 2 ) }

그러면 코드를 위에서 아래로 읽어 내려갈 때 a라는 변수가 선언되어져 있고

double이라는 함수가 실행되는구나. 그리고 이름을 통해서( double() )

대략적으로 뭔가 배가 되는 내용이 이 부분에서 실행되는 것이라는 것을 

우리가 충분히 유추할 수가 있겠고요. 그리고 그 더블에 대한 실질적인

로직은 제일 밑에서 확인을 하게 되는 거죠.

 

#함수선언을 작성하실 때 되도록 hoistiong현상을 이용해서 맨 밑에다가

작성하세요라고 권장하는 것은 아니고요.

대신에 특정한 코드들이 이렇게 호출 먼저 되어져 있고 선언이 뒤쪽에 있어도 해석에 

혼동하지 않다면 충분합니다. 

 

결론적으로, 함수의 표현(익명함수!!!)이 아니고 함수의 선언이(기명함수!!!)

호출하는 부분보다 더 밑에 작성이 되어져 있어도, 이 hoisting이라는

현상에 의해서 충분히 문제없이 실행이 된다라는 거 잘 기억해 두시면 될것같아요.