inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

자바스크립트 중고급: 엔진 핵심

8. 호이스팅, 함수 앞에서 호출, [코딩 시간]

코딩 시간 풀이 피드백 받고 싶습니다.

421

Youngmin Wi

작성한 질문수 7

0

// ===== 코딩 시간 =====
// 1. 함수 선언문 - 함수 호출 - 함수 선언문
function book() {
  function getBook() {
    return "책 1";
  }
  console.log(getBook());
  function getBook() {
    return "책 2";
  }
}
book();
// 책 2
/**
 * 1. 엔진은 함수 선언문을 찾아 해석한다.
 *   + 첫 번째 getBook 선언문을 만나, Function 오브젝트를 생성한다. "값"을 초기화하고 Scope가 설정된다.
 *   + 두 번째 getBook 선언문을 만나, Function 오브젝트를 생성하지만, 이미 같은이름존재하므로, 값만 "책 2" 로 변경된다.
 * 2. 변수 초기화
 * 3. 함수 코드 실행
 *   + Scope 에 설정되어있던, 두 번째 getBook Function 오브젝트의 반환 값인, "책 2"이 반환된다.
 */

// 2. 함수 표현식 - 함수 호출 - 함수 표현식
function book() {
  var getBook = function () {
    return "책 1";
  };
  console.log(getBook());
  var getBook = function () {
    return "책 2";
  };
}
book();
// 책 1
/**
 * 1. 함수 선언문 해석
 * 2. 변수 초기화
 *   + 첫 번째 getBook 이라는 변수의 function 키워드를 만나 undefined 로 설정
 *   + 두 번째 getBook 변수에 또 function 키워드를 만나 undefined 덮어 설정
 * 3. 함수 코드 실행
 *   + 첫 번째 getBook 에 Function 오브젝트가 생성되면서, 반환 값인 "책 1"이 getBook 에 값으로 할당이 된다.
 *   + console 에서 이제 첫 번째 getBook 함수 호출이 가능해지고, 첫번째 getBook 오브젝트의 "책 1" 이 찍힌다.
 *   + 마지막으로, 두 번쨰 getBook 의 Function 오브젝트가 생성되고, 이 때, 반환 값이 "책 2"로 다시 설정된다.
 */

// 3. 함수 선언문 - 함수 호출 - 함수 표현식
function book() {
  function getBook() {
    return "책 1";
  }
  console.log(getBook());
  var getBook = function () {
    return "책 2";
  };
}
book();
// 책 1
/**
 * 1. 함수 선언문을 해석한다.
 *   + 첫 번째 getBook 선언문이 있으므로, 해석하고, Functio 오브젝트를 생성한다.
 * 2. 변수를 초기화 한다.
 *   + 두 번째 getBook 변수에 undefined 가 설정하려고 했으나, 이미 초기화가 되어 있으므로 생략
 * 3. 함수 코드를 실행한다.
 *   + 이미, 함수 선언문 해석과정에서, getBook Function 오브젝트가 생성되었으므로, getBook 함수 호출이 가능하다.
 *   + 결과적으로, console 에는 "책 1"이 찍힌다.
 *   + 마지막으로, getBook 변수에 Function 오브젝트가 생성되고, 이미 함수 선언문에서 초기화 되어있던 getBook 이라는 이름의 값이 "책 2" 반환 값을 가지는 Function 오브젝트로 변경
 */

// 4. 함수 표현식 - 함수 호출 - 함수 선언문
function book() {
  var getBook = function () {
    return "책 1";
  };
  console.log(getBook());
  function getBook() {
    return "책 2";
  }
}
book();
// 책 1
/**
 * 1. 함수 선언문을 해석한다.
 *   + 마지막에 존재하는 getBook 함수 선언문으로 인해, 반환 값을 "책 2"로 하는 Function 오브젝트가 생성
 * 2. 변수 초기화
 *   + 첫 부분의 변수, getBook 이름에 undefined 값을 할당하려고 했으나, 이미 "값" 이 존재하므로 생략
 * 3. 함수 코드 실행
 *   + 첫 부분의 getBook 변수의 반환 값이 "책 1"인 Function 오브젝트가 생성되면서, 이를 getBook 이라는 이름의 값으로 할당
 *   + console 에서 호출하는 getBook은 첫 부분의 getBook 변수의 Function 오브젝트의 함수를 호출하고, 이는 "책 2" 를 반환
*/

javascript

답변 1

0

Youngmin Wi

각 풀이에 대한 생각을 주석으로 달아 봤는데
오해하고 있는 부분이 있다면, 피드백 부탁드립니다 강사님 !

getBook 실습 예제중 질문드립니다!

0

420

1

__proto__ 에 대해 질문드립니다

0

316

1

호이스팅 코딩시간 풀이

0

363

1

[코딩 시간] JS {name: value} 이해

0

342

1

[[Scope]] 와 [[Environment]]는 같은 개념인가요

0

345

0

slice

0

240

0

스코프가 뭔가요?

0

309

0

어려워요

0

258

0

강사님 변수이름에 get을 붙이는 이유를 알고싶습니다.

0

343

1

[정리 시간] 정확하게 이해했는지 확인 부탁드립니다.

0

303

0

스코프 질문

0

253

1

fn 함수와 book.get 함수 차이 질문드립니다...ㅠㅠㅠ

1

546

1

this binding 논리 질문입니다.

0

282

1

파라미터 값을 매핑할 때

0

253

0

ES6부터는 this 바인딩을 환경 레코드에서 참조한다고 들었습니다.

0

211

0

정리시간 입니다.

0

230

0

정리시간입니다.

6

275

0

정리 시간 입니다.

0

205

0

정리시간입니다.

6

231

0

코딩시간 입니다.

1

227

0

선생님 스코프 질문이 있습니다.

1

244

0

[정리시간] 해보았습니다!

0

182

0

선생님 질문있습니다!!

0

162

0

질문드려도 될까요 선생님..

0

220

0