자바스크립트 중고급: 엔진 핵심대시보드

아래의 코드에서함수선언문을 만나면 {getBook : function object}로 설정되고,자바스크립트 엔진이 다시 돌면서 var 키워드로 선언된 getBook으로 인해 {getBook : undefined } 로 설정이 된 후 코드 실행단계에서 함수선언문은 건너뛰고, getBook을 호출하면 undefined가 나와야하는거 아닌가요? 왜 "책1"이 출력되는지 모르겠습니다! function getBook() { return "책1"; } console.log(getBook); var getBook;

안녕하세요 ! 강의 듣다가 질문드립니다 prototype이 상속을 위해 설정된 것이라는 건 알겠는데요 __proto__ 에 대해, 그리고 그안에 설정되는 내용에 대해 잘 이해가 안됩니다 ㅠㅠ어떤 객체로부터 상속받는지에 대한 참조..느낌일까요?  설명해주시면 감사드리겠습니다..!!

함수 선언문 , 함수 호출, 함수 선언문function book(){ function getBook(){ return "책1"; }; console.log(getBook()); function getBook(){ return "책2"; }; } book();book을 호출하면 1.선언단계에서 첫번째 getBook 함수 선언문을 만나 해당 함수를 책1로 등록하고 log는 선언단계임으로 그냥 지나가고 두번째 getBook 함수 선언문을 만나 해당 함수가 이미 존재함으로 값을 책2로 변경시켜준다. 2. 초기화 단계는 변수가 없기 때문에 지나가고 3. 할당단계에서 console.log를 만나 getBook함수를 호출하는데 이 때 값은 마지막에 받은 책 2로 출력된다.함수 표현식, 함수 호출, 함수 표현식var num = function calculation(a, b){ return a + b; }; console.log(num(9, 4)); var num = function calculation(a, b){ return a * b; };선언단계에서는 함수가 없기 때문에 지나가고 초기화 단계에서 첫번째 변수 num의 값을 undefined 로 초기화 시키고 두번째 변수 num의 값 또한 undefined 로 초기화 시킨다. 할당단계가 되면 첫번째 변수 num에 값에 calculation 함수를 할당하고 console.log를 만나서 변수 num을 호출한다 이때 첫번째 변수 num이 호출된다. 그래서 log의 값은 13이 출력된다. 그 이후 두번째 변수 num의 값에 calculation 함수를 할당한다.함수 선언문, 함수 호출, 함수 표현식function sports(){ function getSports(){ return "농구"; }; console.log(getSports()); var getSports = function() { return "야구" }; } sports();선언 단계에서 함수 getSports 를 만나 등록하고 로그 지나치고 변수도 지나친다. 초기화 단계에서는 다시 위로가서 함수 지나치고 로그 지나치고 변수 getSports의 값을 undefined 로 초기화 시킨다. 마지막 할당 단계에서 다시 처음으로 올라가 함수 getSports를 지나가고 log를 만나 getSports를 호출한다 이때 위에 선언된 getSports 함수가 호출 됨으로 log 값은 농구가 출력된다. 그 후 아래의 변수 getSports의 값에 함수를 할당한다.함수 표현식, 함수 호출, 함수 선언문function movie(){ var getMovie = function() { return "아이언맨" }; console.log(getMovie()); function getMovie(){ return "스파이더맨"; }; } movie();선언 단계에서 변수 지나치고 log 지나치고 함수 getMovie를 만나서 등록한다. 초기화 단계에서 변수 getMovie의 값을 undefined 로 초기화 시킨다. log와 함수는 지나친다. 할당 단계에서 변수 getMovie의 값에 함수를 할당 시켜주고 log를 실행한다. 이때 호출되는 값은 "아이언맨"이다.log값을 호출하는 시점에서 위에 있는 수의 값이 undefined가 아닌 값이 할당 된 상태라면 위의 값이 나오고 그렇지 못한 경우에는 아래의 값이 나온다.

안녕하세요 김영보 선생님.약 1년 전에, 취준생 시절에 선생님의 자바스크립트 비기너 과정을 정말 열심히 들었고, 또 감사하게도 칭찬도 많이 해주셨는데요 취업후에 회사에서 사용하는 기술 스텍이 Java여서 Javascript와 멀어졌다가 이번에 진행하는 프로젝트에서 자바스크립트를 사용하게 되어 다시 선생님을 찾게 되었습니다. 1년 전에는 모든게 어렵게만 느껴졌는데 실무에서 1년 성실하게 구르다(?) 보니 그땐 이해가 안갔던 것들이 이해가 되네요. 정말 신기합니다! ㅎㅎ 1. 함수 선언문, 함수 호출, 함수 선언문결과: 책 2이유: 자바 스크립트 엔진이 book을 읽은 후, 두 getBook 선언문을 읽었다. 그러나 자바스크립트 동일한 메소드 명을 썻을 경우 아래의 메소드만 인식(사용)한다. 메소드 오버로딩도 마찬가지다. 허용하지 않고 아래의 함수를 읽는다. function book() { function getBook() { return "책1"; } console.log(getBook()); function getBook() { return "책2"; } } book(); 2. 함수 표현식, 함수 호출(), 함수 표현식함수 호출이 변수를 통한 함수 호출인지 혹은 표현식 내의 함수 호출인지 명확하지 않아 두 경우로 나눔2.1. 변수를 통한 함수 호출결과: 3이유: 초기화 단계에서 값이 있으면 반영하지 않으므로 temp = function plus(a, b) { return a + b; } console.log(temp(1,2)); temp = function plus(a, b) { return a - b; } 2.2. 함수 표현식의 함수 호출결과: 에러이유: 표현식 내에서 사용된 함수는 변수 내의 스코프에 존재하므로 변수 내에서만 접근 가능함. temp = function plus(a, b) { return a + b; } console.log(plus(1, 2)); temp = function plus(a, b) { return a - b; } 3. 함수 선언문, 함수 호출(), 함수 표현식결과: undefiend문, 함수 호출(), 함수 표현식이유: 자바스크립트 엔진이1. 함수를 읽고 (스코프에 등록하고)2. 변수를 읽어 undefiend로 초기화 하고3. 변수를 만나면 값을 할당하는데, 아직 변수를 만나지 않아 2번 과정에 그쳤기 때문 function threeFunction() { return "세번째 경우의 수"; } console.log(threeVariable); var threeVariable = threeFunction(); 4. 함수 표현식, 함수 호출, 함수 선언문결과: 김영보 선생님 최고이유: 자바스크립트 엔진이1. 함수를 읽고 2. 변수를 읽어 undefiend로 초기화 하고 3. 변수를 만나면 값을 할당하는데, 함수는 이미 호이스팅 되어 있으므로 word에 정상적으로 값이 할당됨4. console.log가 찍히는 시점에는 이미 값이 제대로 들어가있기 때문에 값이 제대로 찍힘 var word = lastFunction(); console.log(word); function lastFunction() { return "김영보 선생님 최고"; }  

 ES6 스펙을 보면 Function 오브젝트의 내부 프로퍼티에 [[Scope]] 는 없고 , 대신 [[Environment]] 가 있던데, ES6로 오면서 개념이 바뀐 것인지 궁금합니다.

slice 메소드에 오브젝트형태(arguments)를 배열로 만드는 기능도 있는 건가요? slice는 어디부터 어디까지 배열을 만드는 기능을 하는게 아닌가요?

1. {} 안에 있으면 지역 스코프 , 밖에 있으면 전역 스코프  가까운 스코프부터 찾아 나간다   2. 위의 스코프 메커니즘에 의해 아래의 함수에서 point 가 무엇인지 결정 된다는 사실을 알아 두자    이렇게 알고 있으면 되나요?

뭘 배우고 있는건지 모르겠어요 무슨 컨텍스트 함수 실행 변수 들어본 말이 많긴 한데  스코프 체인 이건 뭐고 해석은 뭐고 실행은 뭐고 하나도 모르겠어요  저는 리액트 잘하려고 js 보고 있는데 배열 부분 보고 여기 보는데 완전 생소한 내용 투성에 화학 수업 듣는 기분이네요 ㅋㅋ  

function book() {     var getBook = function() {         return "책 1";     };     console.log(getBook());     function getBook() {         return "책2";     } } book();   이건 되는데   function book() {     var a = function() {         return "책 1";     };     console.log(getBook());     function a() {         return "책2";     } } book();   이건 왜 안되나요??

1. book function 오브젝트를 생성한다.2. book function 오브젝트의 [[scope]]에 global 오브젝트를 할당한다.3. book 함수 호출 4. 엔진은 실행 컨텍스트를 생성하고 안으로 이동한다.5. 렉시컬 환경, 변수 환경, this 바인딩 컴포넌트를 실행 컨텍스트에 할당한다.6. 환경 레코드를 생성하고 렉시컬 환경 컴포넌트에 할당한다.7. 외부 렉시컬 환경 참조를 생성하고 렉시컬 환경 컴포넌트에 할당한다.8. book function 오브젝트의 [[scope]](global 오브젝트)를 외부 렉시컬 환경 참조에 설정한다.(복사X, 참조O) 9. get function 오브젝트를 생성한다.10. get function 오브젝트의 [[scope]]에 book function 오브젝트의 [[scope]]를 할당한다.11. 환경 레코드에 point: undefined를 할당한다.12. get 함수 호출 13. 엔진은 실행 컨텍스트를 생성하고 안으로 이동한다.14. 렉시컬 환경, 변수 환경, this 바인딩 컴포넌트를 실행 컨텍스트에 할당한다.15. 환경 레코드를 생성하고 렉시컬 환경 컴포넌트에 할당한다.16. 외부 렉시컬 환경 참조를 생성하고 렉시컬 환경 컴포넌트에 할당한다.17. get function 오브젝트의 [[scope]]를 외부 렉시컬 환경 참조에 설정한다.(복사X, 참조O)18. 함수 선언문, 함수 표현식, 변수가 없으므로 바로 코드 실행19. point를 외부 렉시컬 환경 참조에서 식별자를 해결하여 return 한다.   잘 이해하고 있는지 궁금합니다!잘못 이해하고 있는 부분이 있다면 지적해주시면 많은 도움이 될 것 같습니다.

예를들어 function book() {} 이 존재한다고 가정했을때 어떤 순서로 스코프가 등록되고 레코드에 반영되는지 혼란스러워서 질문남깁니다.   1. 엔진이 function book을 만난다. 2. function 오브젝트를 생성한다. 3. function 오브젝트에 [[scope]] 를 등록한다. 4. 선언적 레코드에 { book: function(){} } 을 등록한다. or  1.엔진이 function book을 만난다. 2. function 오브젝트를 생성한다. 3. 선언적 레코드에 { book: function(){} } 을 등록한다. 4. function 오브젝트에 [[scope]] 를 등록한다.   둘 중 어느것이 맞는 순서일까요?

// 정리 시간 var book = { value: 123, get: function() { var value = 456; console.log(this === window); console.log(this.value); } }; var fn = book.get; fn(); // true // false // undefined 정리 시간1을 공부하면서 fn() 함수 호출 시 새롭게 할당된 function 오브젝트인 fn() 함수 안으로 들어가는 것인지아니면 book.get 함수 안으로 들어가는 것인지 궁금해서 첫 줄에 debugger를 작성하여 한 줄씩 이동해서 확인해봤더니book.get 함수 안으로 이동하는 것을 확인했습니다. 근데 저는 왜 새롭게 할당된 fn 함수 안으로 엔진이 이동을 안하는 것인지 궁금합니다. 그래서 이것이 설정이 아니라 참조인가 해서확인하려고 다음과 같은 코드를 실행했습니다. var book = { value: 123, get: function() { var value = 456; console.log(this === window); console.log(this === book); console.log(this.value); } }; var fn = book.get; fn(); // true, false, undefined book.get(); // false, true, 123 var book = { value: 111, get: function() { console.log(this.value); } } fn(); // true, false, undefined book.get(); // 111   마지막에서 두 번째 줄인 fn() 함수는 그대로 처음 할당된 book 오브젝트를 경로로 get 함수에 들어가고마지막 줄인 book.get() 함수는 마지막에 할당된 book 오브젝트를 경로로 들어가는 것을 확인해서 참조는 아닌 것을 확인했습니다. 왜 fn 함수와 book.get은 서로 다른 독립적인 function 오브젝트이면서 fn() 함수를 호출했을 때 book 오브젝트 안의 get 함수 안으로 엔진이 이동하는 것인지 궁금합니다....ㅠㅠㅠㅠㅠ 그리고 debugger 창을 열어서 확인했는데 fn function 오브젝트의 name 프로퍼티 값으로 "get"이 할당되어있던데 이거와 관련이 있는 것인지 궁금합니다!!...ㅠㅠㅠㅠㅠㅠㅠ

강의를 듣다가 제가 제대로 이해한것인지 의심이 들어서 질문드려봅니다! (1) 실행 context는 선언시점에 결정된다고 알고 있는데요. 그럼 this binding도 마찬가지로 선언시점에 결정되고 실행시점에 참조만 교체되는 논리인가요?  (2) prototype method 의 경우 어떤식으로 this가 binding되나요? 만약 (1)의 논리가 맞다면 프로토 타입에 메소드가 선언될 때, this binding이 일어나야 할 것 같은데, 실제로 프로토타입을 부르는 객체가 결정되기 전까지는  this 에 대한 정보가 없지 않을까요?   좋은 강의 감사합니다 (_ _)

안녕하세요 강사님,   파라미터 값을 매핑할 때, 호출한 함수에서 넘겨준 파라미터 값을 [[FormalParameters]]에 작성된 이름의 값과 매핑하는 것을 알겠습니다. var obj = {}; obj.getTotal = function(one, two){ var one; console.log(one + two); two = 77; console.log("two:" + two); }; obj.getTotal(11, 22); 위의 예제를 기준으로, 선언적 환경 레코드에 {one: 11, two:22}에 설정하는 것까지 이해했습니다. 그러면 혹시 전에 배웠던 내부 프로퍼티인 [[ParameterMap]]에도  {one: 11, two:22}로 설정되는 건가요?

ES6부터는 this 바인딩을 환경 레코드에서 참조한다고 들었는데요. ECMA 스펙에도 이제 렉시컬 환경 컴포넌트랑 변수 환경 컴포넌트만 있는 것 같아요. 그런데 환경 레코드에서 this 바인딩을 어떻게 참조하는지 궁금합니다. 선언적 환경 레코드에서 참조하는 걸까요? 방식은 선생님께서 설명해주신대로 this에 해당하는 객체의 변수 값을 참조하는 방식인 걸까요?

var book = { member: {name: 100}, point: {value: 200} }; function show(param){ for (var type in param){ typeof param[type] === "object" ? show(param[type]) : console.log(type + ":", param[type]);} }; show(book); // name: 100 // value: 200 ``` 1. show(book); - 마지막 줄에서 show(book)를 호출하면서 - book 오브젝트를 파라미터 값으로 넘겨줍니다. 2. for (var type in param){...} - for-in으로 파라미터로 받은 오브젝트 전개 3. typeof paam\[type] === "object" ? show(param\[type]) : console.log(type + ":", param\[type]); 4. param\[type] 타입이 "object" 이면 - show()를 호출 - 자신을 호출하면서 param\[type]을 넘겨줍니다. - book\["member"]이므로 {name: 100}이 넘어 갑니다. 5. param\[type] 타입이 "object"가 아니면 - member: {name: 100}에서 {name: 100}을 읽은 것이므로 값을 출력합니다. --- ### \[정리시간\] ```javascript debugger; // 주어진 데이터 var member = { Jan: {item: {title: "JS", amount: 100}, point: [10, 20, 30]}, Feb: {item: {title: "JS", amount: 200}, point: [40, 50, 60]} }; // 배열이면 누적되는 값이 저장되는 변수 선언 // 계산을 해야하므로 단순히 선언만 하는 것이 아니라 초깃값으로 0을 할당해줬음 var result = 0; // 배열의 엘리먼트를 더해 누적하게 만드는 reduce의 콜백 함수 function callback(prev, curr){ return prev + curr; }; // 메인 함수 선언 function show(param){ // 파라미터로 오는 데이터가 오브젝트 형태여서 for-in문 활용 for (var type in param) { // Array이면 if (Array.isArray(param[type]) === true){ // 배열의 값을 출력하고 console.log(param[type]); // result에 배열의 값들을 누적합니다. result += param[type].reduce(callback); // 배열이 아닌 object이면 } else if (typeof param[type] === 'object') { // 프로퍼티 이름과 값을 출력하고 console.log(type,":",param[type]); // 재귀 호출을 통해 데이터를 끝까지 탐색 show(param[type]); // 가장 안에있는 오브젝트의 프로퍼티 이름과 값을 출력 } else { console.log(type,":",param[type]); } }; }; // 재귀 함수 호출 show(member); // 누적한 값 출력 console.log(result);

var book = { value: 123, get: function(){ var value = 456; console.log(this === window); console.log(this.value); } }; var fn = book.get; fn(); // true // undefined strict 모드 환경이 아님 함수 선언문이 없다. 변수 초기화를 한다 book: undefined fn: undefined 코드를 실행한다.   book = { value: 123, get: function(){} } fn() 함수 호출 (book.get()을 실행) fn() 함수는 글로벌 함수이고, 함수 이름만 작성하여 호출 가능. 이때, 실행 콘텍스트를 생성하고, this 바인딩 컴포넌트에 window가 바인딩된다. this는 window를 참조하게 된다. 또한 글로벌 오브젝트를 windonw 오브젝트가 참조함 book.get 함수 안으로 들어감 함수 내부에 함수 선언문이 없다. 변수 초기화 value: undefined 코드 실행 value: 456가 설정 console.log(this === window); 는 true를 출력 console.log(this.value)에서도 this가 window를 참조 window 즉, 글로벌 오브젝트에는 value라는 프로퍼티 이름을 가진 프로퍼티가 존재하지 않아서 undefined를 출력 여기서 console.log(value)를 하면 456 console.log(book.value)를 하면 123 console.log(window.value)를 하면 undefined가 출력되는 것을 알 수 있음   실행 콘텍스트: { 렉시컬 환경 컴포넌트: { 환경 레코드: { book: Object, fn: function(){} }, 외부 렉시컬 환경 참조 {} }, 변수 환경 컴포넌트: {}, this 바인딩 컴포넌트: { this: window } } (get) 실행 콘텍스트: { 렉시컬 환경 컴포넌트: { 환경 레코드: { value: 456, }, 외부 렉시컬 환경 참조: { value: 123, } }, 변수 환경 컴포넌트: {}, this 바인딩 컴퍼넌트: { this: book } }       function getTitle(){ console.log("HTML"); }; var book = function(){ function getTitle(){ console.log("JS"); }; this.getTitle(); getTitle(); }; book(); // HTML // JS strict 모드 환경이 아님 함수 선언문을 만나 getTitle function 오브젝트 생성 변수 초기화를 한다 book: undefined 코드를 실행한다.   getTitle: function(){} book: function(){} book() 함수 호출 book() 함수는 글로벌 함수이고 호출되면서 실행 콘텍스트를 생성하고 this 바인딩 컴포넌트에 window를 참조 this는 window를 참조하게 된다. 또한 글로벌 오브젝트를 windonw 오브젝트가 참조함 book 함수 내부로 들어감 함수 선언문 getTitle을 만나서 function 오브젝트 생성 getTitle은 렉시컬 환경 컴포넌트의 환경 레코드에 설정 함수 표현식과 변수가 없어서 변수 초기화는 패스 코드 실행 this.getTitle() 함수를 호출할 때, this는 window를 참조함 window 즉, 글로벌 오브젝트에 getTitle이라는 프로퍼티 이름을 검색   getTitle: function(){ console.log("HTML"); } book: function(){ getTitle: function(){} } getTitle이 존재하므로 함수 실행 console에 HTML 출력 다시 book 함수 내부의 getTitle();를 만나서 호출 환경 레코드에서 getTitle이 존재하여 실행 console에 JS 출력   실행 콘텍스트: { 렉시컬 환경 컴포넌트: { 환경 레코드: { book: function(){}, getTitle: function(){} }, 외부 렉시컬 환경 참조 {} }, 변수 환경 컴포넌트: {}, this 바인딩 컴포넌트: { this: window } }   (getTitle) 실행 콘텍스트: { 렉시컬 환경 컴포넌트: { 환경 레코드: {}, 외부 렉시컬 환경 참조 { book: function(){} } }, 변수 환경 컴포넌트: {}, this 바인딩 컴포넌트: { this: window } }   (book) 실행 콘텍스트: { 렉시컬 환경 컴포넌트: { 환경 레코드: { getTitle: function(){} }, 외부 렉시컬 환경 참조 { getTitle: function(){} } }, 변수 환경 컴포넌트: {}, this 바인딩 컴포넌트: { this: window } }   (getTitle) 실행 콘텍스트: { 렉시컬 환경 컴포넌트: { 환경 레코드: {}, 외부 렉시컬 환경 참조 { getTitle: function(){} } }, 변수 환경 컴포넌트: {}, this 바인딩 컴포넌트: { this: book } }

### \[정리시간\] ```javascript var obj = {}; obj.getTotal = function(one, two, two){ console.log(one + two); }; obj.getTotal(11, 22, 55); // 66 ``` --- 초기화 단계 --- 1. obj에 빈 오브젝트 할당 2. obj.getTotal(11, 22, 55);를 만나서 함수 호출 3. 실행 콘텍스트 생성하고 실행 콘텍스트 안으로 이동 4. 3개의 컴포넌트 첨부 5. getTotal function 오브젝트의 [\[FormalParameters]]에 파라미터 이름 설정 6. 호출한 함수의 파라미터 값을 실행 콘텍스트에 넘겨줌 - ["one", "two", "two"] 형태로 getTotal function 오브젝트의 [\[FormalParameters]]에 설정되어 있음 - 이 배열을 읽는다. - 호출한 함수의 파라미터 값에서 index 번째의 값을 구함 7. obj.getTotal 함수의 파라미터 이름과 넘겨받은 파라미터 값을 매핑 - 선언적 환경 레코드에 설정 - {name: value} 형태로 설정 - {one: 11, two: 22, two: 55}로 설정해야 하는데 - two: 55를 매핑할 때, 이미 two 이름이 존재하므로 매핑되어 있던 값인 22가 55로 변경됨 8. 더이상 초기화할 코드가 없음 --- 실행 단계 --- 9. 선언적 환경 레코드에는 {one:11, two: 55} 상태 10. console.log(one + two); 를 실행 11. 선언적 환경 레코드에 one과 two가 있으므로 해당 값을 가져옴 12. 11 + 55 = 66이므로 13. 콘솔에 66을 출력합니다.

// 실행 콘텍스트 정리 function book() { function get() { return point; }; var point = 123; return get(); }; console.log(book()); // 123 function 키워드를 만나서 function 오브젝트 생성 이때 book()의 [[Scope]]에 글로벌 스코프 설정 함수 표현식과 변수가 없어서 코드 실행 book() 함수를 호출 엔진은 실행 콘텍스트를 생성하고 실행 콘텍스트 안으로 이동 -- 준비 컴포넌트를 생성하여 실행 콘텍스트에 첨부 환경 레코드를 생성하여 렉시컬 환경 컴포넌트에 첨부 book 함수 안의 함수, 변수를 환경 레코드에 바인딩 외부 렉시컬 환경 참조를 생성하여 렉시컬 환경 컴포넌트에 첨부 해당 사항 없음. function 오브젝트의 [[Scope]] 참조 (글로벌 스코프) 실행 콘텍스트: { 렉시컬 환경 컴포넌트: { 환경 레코드: { }, 외부 렉시컬 환경 참조: { } }, 변수 환경 컴포넌트: { }, this 바인딩 컴포넌트: { } } --초기화-- 함수 선언문을 만나 get function 오브젝트 생성 이때 내부의 [[scope]]에 스코프 설정 변수에 초기값 설정 여기까지 외부에 실행 상태를 제공하지 않음 실행 콘텍스트: { 렉시컬 환경 컴포넌트: { 환경 레코드: { get: function(){}, point: undefined }, 외부 렉시컬 환경 참조: { } }, 변수 환경 컴포넌트: { }, this 바인딩 컴포넌트: { } } -- 실행 함수 안의 코드 실행 point 변수에 123 할당 return get(); get() 함수 호출 엔진은 실행 콘텍스트 생성, 실행 콘텍스트 안으로 이동 실행 콘텍스트: { 렉시컬 환경 컴포넌트: { 환경 레코드: { }, 외부 렉시컬 환경 참조: { point: 123 } }, 변수 환경 컴포넌트: { }, this 바인딩 컴포넌트: { } } -- 다시 준비 위의 준비 단계를 거친다. 외부 렉시컬 환경 참조를 생성하여 렉시컬 환경 컴포넌트에 첨부 point: 123 -- 다시 초기화 함수 안에 함수 선언문과 함수 표현식 변수가 없다. -- 다시 실행 함수 안의 코드를 실행한다. return point; 환경 레코드에서 먼저 찾고 없으면 외부 렉시컬 환경 참조에서 point를 찾는다. 실행 콘텍스트 안의 관련된 함수와 변수 사용 가능 외부 렉시컬 환경 참조에 있는 point 변수를 사용해서 123 반환 conosole에서 반환 값인 123이 출력됨. 이렇게 이해했습니다.!

1. 함수 선언문, 함수 호출(), 함수 선언문 ```javascript function book() { function getBook() { return "one"; }; console.log(getBook()); function getBook() { return "two"; }; }; book(); // two ``` - 함수 선언문 해석 - function 키워드를 만나서 Function 오브젝트를 생성합니다. - 엔진이 자신이 속한 스코프를 생성한 Function 오브젝트의 [\[Scope]]에 설정합니다. - book() 함수를 호출하게 되면, 실행 콘텍스트가 생성되고 실행 콘텍스트에서 호출된 함수의 [\[Scope]]에 바인딩된 것을 호출된 함수의 1레벨 밖의 스코프로 사용합니다. - 이때 내부를 읽으면서 단계를 거쳐, 함수와 변수를 {name: value} 형식으로 실행 콘텍스트에 저장합니다. - book() 함수를 호출할 때, 엔진 컨트롤이 함수 내부로 들어갑니다. - 첫 번째 함수 선언문을 getBook에 function 오브젝트를 할당합니다. - console.log(getBook())은 패스합니다. - 두 번째 함수 선언문을 getBook에 function 오브젝트를 할당합니다. - 결과적으로 getBook에는 두 번째 function 오브젝트가 할당되어 있는 상태입니다. - 변수 초기화 - 내부를 읽어 변수들을 초기화합니다. - 변수 선언이 없어서 패스합니다. - 코드 실행 - console.log(getBook())을 실행합니다. - 이때, getBook() 함수를 호출합니다. - 해당하는 function 오브젝트는 두 번째로 two를 반환합니다. - 따라서, 콘솔에 two가 출력됩니다. - 최종적으로, getBook에는 two를 반환하는 function 오브젝트 할당되어있습니다. 2. 함수 표현식, 함수 호출(), 함수 표현식 ```javascript function book() { var getBook = function() { return "one"; }; console.log(getBook()); var getBook = function() { return "two"; }; }; book(); // one ``` - 함수 선언문 해석 - function 키워드를 만나서 Function 오브젝트를 생성합니다. - 엔진이 자신이 속한 스코프를 생성한 Function 오브젝트의 [\[Scope]]에 설정합니다. - book() 함수를 호출하게 되면, 실행 콘텍스트가 생성되고 실행 콘텍스트에서 호출된 함수의 [\[Scope]]에 바인딩된 것을 호출된 함수의 1레벨 밖의 스코프로 사용합니다. - 이때 내부를 읽으면서 단계를 거쳐, 함수와 변수를 {name: value} 형식으로 실행 콘텍스트에 저장합니다. - book() 함수를 호출할 때, 엔진 컨트롤이 함수 내부로 들어갑니다. - 내부에 함수 선언문이 없어서 패스합니다. - 변수 초기화 - 내부에 있는 변수를 초기화합니다. - 처음에 getBook에 undefined를 설정합니다. - console.log(getBook())은 패스합니다. - 두 번째로 getBook에 undefined를 설정합니다. - 코드 실행 - getBook에 function 오브젝트를 할당합니다. - console.log(getBook())를 실행하고, getBook() 함수를 호출합니다. - 이때, getBook() 함수는 one을 반환합니다. - 콘솔에 one이 출력됩니다. - 그 후, getBook에 새로운 function 오브젝트가 할당됩니다. - 최종적으로, getBook에는 two를 반환하는 function 오브젝트 할당되어있습니다. 3. 함수 선언문, 함수 호출(), 함수 표현식 ```javascript function book() { function getBook() { return "one"; }; console.log(getBook()); var getBook = function() { return "two"; }; }; book(); // one ``` - 함수 선언문 해석 - function 키워드를 만나서 Function 오브젝트를 생성합니다. - 엔진이 자신이 속한 스코프를 생성한 Function 오브젝트의 [\[Scope]]에 설정합니다. - book() 함수를 호출하게 되면, 실행 콘텍스트가 생성되고 실행 콘텍스트에서 호출된 함수의 [\[Scope]]에 바인딩된 것을 호출된 함수의 1레벨 밖의 스코프로 사용합니다. - 이때 내부를 읽으면서 단계를 거쳐, 함수와 변수를 {name: value} 형식으로 실행 콘텍스트에 저장합니다. - book() 함수를 호출할 때, 엔진 컨트롤이 함수 내부로 들어갑니다. - 첫 번째 함수 선언문을 만나 getBook에 function 오브젝트를 할당합니다. - 나머지는 패스합니다. - 변수 초기화 - getBook 변수를 초기화하려했는데 이미 값이 있어서 초기화하지 않습니다. - 현재 getBook에는 function 오브젝트가 할당되어 있습니다. - 코드 실행 - console.log(getBook())을 만나서, getBook() 함수를 호출합니다. - one이 반환됩니다. - 따라서, 콘솔에 one이 출력됩니다. - 그 후, getBook에 새로운 function 오브젝트가 할당됩니다. - 최종적으로, getBook에는 two를 반환하는 function 오브젝트 할당되어있습니다. 4. 함수 표현식, 함수 호출(), 함수 표현식 ```javascript function book() { var getBook = function() { return "one"; }; console.log(getBook()); function getBook() { return "two"; }; }; book(); // one ``` - 함수 선언문 해석 - function 키워드를 만나서 Function 오브젝트를 생성합니다. - 엔진이 자신이 속한 스코프를 생성한 Function 오브젝트의 [\[Scope]]에 설정합니다. - book() 함수를 호출하게 되면, 실행 콘텍스트가 생성되고 실행 콘텍스트에서 호출된 함수의 [\[Scope]]에 바인딩된 것을 호출된 함수의 1레벨 밖의 스코프로 사용합니다. - 이때 내부를 읽으면서 단계를 거쳐, 함수와 변수를 {name: value} 형식으로 실행 콘텍스트에 저장합니다. - book() 함수를 호출할 때, 엔진 컨트롤이 함수 내부로 들어갑니다. - 함수 선언문을 만나 getBook에 function 오브젝트를 할당합니다. - 변수 초기화 - getBook을 초기화하려 하지만 이미 function 오브젝트가 설정되어 있어서 초기화하지 않습니다. - 현재 getBook에는 function 오브젝트가 할당되어 있습니다. - 코드 실행 - getBook에 새로운 function 오브젝트를 할당합니다. - console.log(getBook())를 만나, getBook() 함수를 호출합니다. - getBook() 함수는 one을 반환합니다. - 따라서, 콘솔에 one이 출력됩니다. - 이 단계에서 다시 함수 선언문을 실행하지는 않습니다. - 최종적으로, getBook에는 one을 반환하는 function 오브젝트 할당되어있습니다. 좋은 강의 항상 감사합니다.