호이스팅 관련 정리

호이스팅 KeyWord

호이스팅 : 함수 앞에서 함수를 호출

• 본인 생각 ) 함수 선언문 자체가 해당 스코프의 최상위로 먼저 해석되고 올려지는 현상

함수 선언문 : 

function 함수명() {
  구현 로직
};

호이스팅에 영향, 초기화 단계에서 function object 할당

함수표현식 : 

var 함수명 = function () {
  구현 로직
};

호이스팅에 영향 X

예제풀이

1 번 예제

function book() {
  function getBook(){
    return "책1";
  };
  //여기서 함수 호출
  console.log(getBook());
  function getBook(){
    return "책2"
  };
};
book();

• 함수 선언문 , 함수 호출, 함수 선언문

1. book 함수 호출

2. book 함수 안으로 엔진컨트롤 이동 

// 함수 선언문 해석

3. 전체 코드에서 함수 선언문 검색

4. 첫 번째 function 오브젝트 생성(getbook) - scope 등록

5. 두 번째 function 오브젝트 생성(getbook) - scope 등록, value 대체, 호출 가능

6. 엔진 컨트롤 처음으로 이동

// 변수 초기화(추출) - 식별자 해결

7. var 변수 초기화(undefined) - 대상 없음

8. 엔진 컨트롤 처음으로 이동

// 코드 실행 - debugger, console 등 실행코드 동작

9. 해석된 선언문은 건너 뜀

10. console.log로 getBook 호출

11. value로 scope에 등록된 두 번째 getBook에서 선언문 해석, 변수 초기화, 코드실행 과정 수행

12. 책2 반환

13. 콘솔창 출력

14. book 함수 내 반환값이 없기에, void 함수로 처리되어 undefined를 반환

2번 예제

function book(){
  debugger
  var getBook = function(){
    return "책1";
  };
  console.log(getBook());
  debugger
  getBook = function(){
    return "책2";
  };
  debugger
};
book();

• 함수 표현식, 함수 호출, 함수 표현식

1. book 함수 호출

2. book 함수 안으로 엔진컨트롤 이동 

// 함수 선언문 해석

3. 전체 코드에서 함수 선언문 검색 - 대상없음

4. 엔진 컨트롤 처음으로 이동

// 변수 초기화(추출) - 식별자 해결

5. getBook에 undefined 할당 초기화

6. scope에 등록

7. 엔진 컨트롤 처음으로 이동

// 코드 실행 - debugger, console 등 실행코드 동작

8. getBook에 function(){ return "책1"; } 할당

9. scope 등록

10. console.log로 getBook 호출

11. 변수로 지정된 첫 번째 getBook에서 표현식 실행

12. 책1 반환

13. 콘솔창 출력

14. 다음 함수 표현식을 엔진이 해석하지만, 실행코드에 의미가 없기에 순차적인 진행 종료

15. book 함수 내 반환값이 없기에, void 함수로 처리되어 undefined를 반환

3번 예제

function book(){
  debugger
  function getBook(){
    return "책1";
  };
  console.log(getBook());
  debugger
  var getBook = function(){
    return "책2";
  };
  debugger
};
book();

• 함수 선언문, 함수 호출, 함수 표현식

1. book 함수 호출

2. book 함수 안으로 엔진컨트롤 이동 

// 함수 선언문 해석

3. 전체 코드에서 함수 선언문 검색

4. 첫 번째 function 오브젝트 생성(getbook) - scope 등록

5. 엔진 컨트롤 처음으로 이동

// 변수 초기화(추출) - 식별자 해결

6. 변수 getBook에 undefined 할당 초기화

7. scope에 등록

8. 엔진 컨트롤 처음으로 이동

// 코드 실행 - debugger, console 등 실행코드 동작

9. 해석된 선언문은 건너 뜀

10. console.log로 getBook 호출

11. value로 scope에 등록된 getBook에서 선언문 해석, 변수 초기화, 코드실행 과정 수행

12. 책1 반환

13. 콘솔창 출력

14. 다음 함수 표현식을 엔진이 해석하지만, 실행코드에 의미가 없기에 순차적인 진행 종료

15. book 함수 내 반환값이 없기에, void 함수로 처리되어 undefined를 반환

4번 예제

function book(){
  debugger
  var getBook = function(){
    return "책1";
  };
  console.log(getBook());
  debugger
  function getBook(){
    return "책2";
  };
  debugger
};
book();

• 함수 표현식, 함수 호출, 함수 선언문

1. book 함수 호출

2. book 함수 안으로 엔진컨트롤 이동 

// 함수 선언문 해석

3. 전체 코드에서 함수 선언문 검색

4. function 오브젝트 생성(getbook) - scope 등록

5. 엔진 컨트롤 처음으로 이동

// 변수 초기화(추출) - 식별자 해결

6. 변수 getBook에 undefined 할당 초기화

7. scope에 등록

8. 엔진 컨트롤 처음으로 이동

// 코드 실행 - debugger, console 등 실행코드 동작

9. getBook에 function(){ return "책1"; } 할당

10. scope 등록

11. console.log로 getBook 호출

12. 변수로 지정된 getBook에서 표현식 실행

13. 책1 반환

14. 콘솔창 출력

15. book 함수 내 반환값이 없기에, void 함수로 처리되어 undefined를 반환

알맞게 정리된 건지 궁금합니다..