인프런 커뮤니티 질문&답변

이렇게 정리하는 것이 쉬운 일이 아닌데요, 박수를 보냅니다. 지금처럼 하나씩 정리하면 기초가 튼튼하게 만들어 집니다. 멋있는 모습이니 계속 이렇게 진행해주세요.
몇 곳에서 정확하게 파악하지 못하다는 느낌이 듭니다. "자바스크립트 비기너" 강좌를 복습하세요. 중고급 과정에서 배운 것을 염두에 두고 다시 보면 느낌과 깊이가 다를 것입니다. 그럴 것이다라고 접근해서는 공든 탑이 무너집니다. 논리와 근거가 반드시 있으니 이것을 찾아 정리하시면 됩니다. 

대단하십니다. 박수를 보냅니다. 대략 의미적으로 맞습니다만, 중간중간 문장 정리가 매끄럽지 않는 부분이 있습니다. 그럴 것이다라고 생각한  부분도 있습니다. 이렇게 까지 정리했으니 케이스를 나누어 매끄럽지 않는 부분을 조그만 더 정리해보기 바랍니다. 그리고 정리한 것을 나누어서  하나씩 올려주세요. 시간이 걸리더라도 체크하겠습니다. 멋있습니다. 이렇게 정리하면 완전하게 내 것으로 만들 수 있습니다. 

<4> 함수 표현식, 함수 선언식

function book(){
     var getBook = function(){ //함수 표현식
        return "book1";
    }
console.log(getBook());

  function getBook(){ //함수 선언식
    return "book2";
  }
}
book();
//book1
//undefined

• 함수선언식 초기화

  book( )함수를 호출하면 function getBook( ){return "book2";} 선언문을 만나서 getBook 오브젝트를 생성한다. **getBook: ***f getBook( )*으로 디버깅 창에서 확인이 가능하다.

• 변수 초기화

  getBook 변수를 만나면 undefined를 해주면서 초기화를 진행한다.

• 코드 실행

함수 표현식을 읽으면서함수 오브젝트를 값으로 할당해준다. 그리고 getBook = f ( ) 로 변경된다. 그리고 getBook( )함수를 호출한다. 호출된 getBook 함수는 return "book1"을 갖고 있기 때문에 book1을 값으로 주면서 콘솔창에 찍힌다. 그다음에는 함수 선언식인데 이미 getBook에는 값이 할당 되어 있기 때문에 무시된다. book 함수 내에 return문이 포함되지 않았기 떄문에, void 함수로 처리되어 undefined를 리턴하며 콘솔창에 undefined가 찍힌다.

<3> 함수 선언식, 함수 표현식

function book(){
    function getBook(){ //함수 선언식
      return "book1";
    }
console.log(getBook());

  var getBook = function(){ //함수 표현식
    return "book2";
  }
}
book();
//book1
//undefined

• 함수 선언문 초기화

  마지막 줄에서 book( )함수를 호출하면 function getBook( ){return "book1";}을 만나서 getBook 오브젝트를 생성한다. getBook( )을 호출하지 않고 아래로 내려간다.

• 변수 초기화

  book 함수의 첫 번째 줄로 이동하고 나서 함수 선언식은 넘어가고 실행문도 넘어가고 getBook 변수에 undefined로 초기화를 진행한다.

• 코드 실행

  function getBook( ){return "book1";}이 함수 선언문이기 때문에 아래로 내려간다. getBook( ) 함수를 호출한다. getBook의 키값에는 function Object가 설정되어 있기 때문에 { return "book1";}을 갖고 있는 getBook 함수를 실행하면서 book1을 값으로 주고 콘솔창에 찍힌다. getBook 변수를 읽고 오브젝트를 생성하려고 하니 이미 function Object가 값이 설정되어 있기 때문에 무시가 된다. 스택에서는 재할당이 되지만 리턴되지 않고 그대로 book 함수의 코드가 종료가 도면서 변수 getBook은 release 되기 때문에 새롭게 book 함수를 호출을 하더라도 계속해서 book1이 리턴된다. 그리고, book 함수 내에 return문이 포함되지 않았기 떄문에, void 함수로 처리되어 undefined를 리턴을 하기 때문에 콘솔창에 undefined가 찍힌다.

<2> 함수 표현식 - 함수 표현식

function book(){
    var getBook = function(){ //함수 표현식
        return "book1";
     }
console.log(getBook());

 getBook = function(){ //함수 표현식
    return "book2";
 }
}
book();
//book1
//undefined

• 함수 선언문 초기화

  함수 선언문을 발췌해서 초기화를 진행해야 하는데, 설정할 대상이 없다.

• 변수 초기화

  book 함수의 첫 번째 줄로 이동하고 나서 함수 표현식과 변수들을 getBook: undefined를 할당시킨다.

• 코드 실행

  function getBook( ){return "book1";}이 함수 표현식을 읽는다. getBook이 함수 인스턴스이기 때문에 { getBook: *f ( ) }*로 설정된다. console.log가 실행이되고 getBook( )함수가 호출되고 {return "book1";} 을 갖고 있는 함수 표현식이 실행되면서 book1 리턴값을 할당하고 book1이 콘솔창에 찍힌다. 다음 함수 표현식을 엔진이 해석하고 스코프에 getBook키와 함수 값을 저장하려고 하니깐 이미 저장이 되어있기 때문에 무시가 된다. book 함수 내에 return문이 포함되지 않았기 떄문에, void 함수로 처리되어 undefined를 리턴을 하기 때문에 콘솔창에 undefined가 찍힌다.

<1> 함수 선언식 - 함수 선언식

function book(){
    function getBook(){ //함수선언식
      return "book1";
    }
console.log(getBook());

function getBook(){//함수선언식
    return "book2";
 }
}
book(); 
//book2
//undefined

• 함수 선언문 초기화

  JS엔진이 먼저 코드 전체를 돌게된다. 그 중 함수 선언식만 추출해서 초기화를 진행한다. 먼저, function getBook( ){return "book1";}을 만나서 getBook 오브젝트를 생성한다. 그래서 console.log를 실행하지 않고 아래로 내려간다. 다음으로 함수 선언문인 function getBook( ){return "book2";}을 만나서 getBook 오브젝트를 생성하려고 하는데, 기존의 오브젝트 이름과 같으면서 같은 function 오브젝트이기 때문에 두 번째로 생성한 getBook 오브젝트로 대체된다. {key: value} 형태로 저장이 되는데 value가 바뀌는 형태이다.

• 변수 초기화

  book 함수의 첫 번째 줄로 이동하고 나서 함수 표현식과 변수에 undefined를 설정해야 하는 단계인데, 설정할 대상이 없다.

• 코드 실행

  book( )가 실행이 되면서 book함수 안으로 들어가게 되고 function getBook( ){return "book1";}이 함수 선언문이기 때문에 아래로 내려간다. console.log를 실행하면서 getBook이 function object이기 때문에 호출이 가능하면서 return "book2"의 getBook 함수의 리턴값을 할당하고 콘솔창에 book2 값이 찍힌다. book 함수 내에 return문이 포함되지 않았기 떄문에, void 함수로 처리되어 undefined를 리턴을 하기 때문에 콘솔창에 undefined가 찍힌다.