55,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결자바스크립트 중고급: 엔진 핵심
LEC에 OLER과 Global Scope
먼저 좋은 강의 감사합니다. 강의를 듣던 도 중 궁금한 점이 생겨서 이렇게 질문 남기게 되었습니다. 강의 중 LEC에 ER과 OLER이 있기 때문에 함수 내, 외부에 있는 변수, 함수를 사용할 수 있다고 말씀해주셨는데요. Global Scope를 강의하셨을 때 function 내에 선언되지 않은 변수나 함수에 경우 그 윗 단계에 Scope를 찾는다고 하셨는데, 그 윗 단계에 Scope를 찾을 때 OLER을 참조하여 찾는다고 이해하면 될지 궁금합니다. 답변 부탁드립니다. 감사합니다.
- 미해결자바스크립트 중고급: 엔진 핵심
정리했봤습니다. 다른 분이 질문한 내용이 많은 도움이 됐습니다!
1. book Function 오브젝트가 생성 → [[scope]] 는 글로벌 오브젝트를 바인딩(= 외부 렉시컬 환경 참조에 연결) 2. book(200) 호출 3. 호출 파라미터 bookParam 는 book 의 선언적환경레코드에 연결 { bookParam: 200 } 4. getPoint Functon 오브젝트가 생성 → [[scope]] 는 book Function 오브젝트를 바인딩 5. point 할당 및 실행 으로 book 의 선언적 환경레코드는 {bookParam : 200, point: 100} 6. 또한 getPoint 의 외부 렉시컬 환경 참조 : { bookParam : 200, point : 100 } 형태가 된다. // book(200) 호출되고 리턴 후 // book Function 오브젝트 형태 렉시컬환경컴포넌트 = { 환경 레코드 : { 선언적 환경 레코드 : { bookParam: 200, point: 100 } } 외부 렉시컬 환경 : { // 글로벌 오브젝트 } } . 1. getPoint Function 오브젝트를 리턴 obj 에 할당 2. obj(400) → book.getPoint(400) 호출 3. 호출 파라미터 pointParam 은 400 을 getPoint 의 선언적환경레코드에 연결 {pointParam : 400} // obj(400) 호출 된 이후의 // getPoint Function 오브젝트 형태 렉시컬환경컴포넌트 = { 환경 레코드 : { 선언적 환경 레코드 : { pointParam: 400 } } 외부 렉시컬 환경 : { bookParam: 200, point: 100 } } . 1. point 는 선언적환경레코드에 없으므로 [[scope]]를 연결한 외부 렉시컬 환경 참조에 연결된 point : 100 값을 의미한다. 2. bookParam 은 선언적환경레코드에 없으므로 [[scope]]를 연결한 외부 렉시컬 환경 참조에 연결된 bookParam : 200 값을 의미한다. 3. point = 100 + 200 + 400 으로 point 에는 700 값이 들어가고 리턴하고 출력한다.
- 미해결자바스크립트 중고급: 엔진 핵심
prototype 메소드 직접 호출 - call , bind
this 강의 - call, bind 듣고 다시 보니 직접호출을 어떻게 하는지 알게 됐습니다. 직접 호출 방법 적어봅니다. // call console.log(Book.prototype.getPoint.call(obj)); // bind console.log(Book.prototype.getPoint.bind(obj)());
- 미해결자바스크립트 중고급: 엔진 핵심
정리 해보았습니다. 재미있게 공부하고 있습니다!
정리 1. 1. fn 은 글로벌 오브젝트에 바인딩되고 fn( ) 호출시 대상 오브젝트가 없는 상태로 호출된다. 2. 실제 코드인 book.get( ) 호출 → this 는 widnow 를 참조 한다. 3. var value = 456 은 get 메소드 의 지역변수로 할당 4. this === window 는 true 5. this.value 는 window 에서 value 를 찾지만 존재하지 않기 때문에 undefined 정리 2. 1. book( ) 을 호출 → 오브젝트가 없기 때문에 this 는 window 를 참조 2. this.getTitle( ) 호출시 window.getTitle( ) 와 동일하기 때문에 → HTML 책 출력 3. getTitle( ) 호출시 현재의 실행 영역에서 선언적 환경 레코드 있는 function getTitle( ) 를 먼저 호출 → JS책 출력
- 해결됨자바스크립트 중고급: 엔진 핵심
처음 예제에서 궁금한 점 입니다.
예제에서 단계가 1. 준비단계 2. 초기화 단계 3. 실행단계로 나눠지는데 여기서 2. 초기화 단계인 부분과 1.준비단계와 경계가 어느 시점부터인지 정확히 이해가 안됍니다. function 키워드를 찾는 과정과 var 키워드 변수 선언이 ER에 할당되는것 까지가 준비단계인지 아니면 이 해석해하는 단계부터는 초기화 단계로 봐야 하는지 모르겠습니다. 아니면 ER 에 파라미터 세팅부터가 초기화 단계인지
- 미해결자바스크립트 중고급: 엔진 핵심
실행 컨텍스트에 대한 간략한 정리
JS 에서 함수를 실행 하게 될 때 함수에 대한 정보가 메모리에 올라가야 하며 이렇게 메모리에 올라간 Data 를 가지고 처리 하며 함수가 동작하게 된다. 이때 메모리에는 함수에 대한 정보말고 많은 정보가 올라가 있는 상태이다. 따라서 JS 엔진은 메모리에 올라간 많은 Data 중 함수, 변수에 대한 식별자를 빠르게 찾기위해 실행 컨텍스트 라는 것을 통해 식별자를 관리한다. 즉 엔진은 함수, 변수들이 사용 될 때 해당 함수, 변수의 식별자를 통해 접근하게 되는데 이때 함수, 변수 식별자들을 한 군데 모아서 관리 함으로써 엔진이 더욱 식별자 검색을 쉽게 할수 있게 되며, 이렇게 식별자를 한 군데 모아 관리 하는 영역이 실행 컨텍스트 라는 것이다. 라고 정리 해보았는데 제가 혹시 강의에서 말씀하는 내용과 다르게 이해하는 부분이 있을까요 ?
- 미해결자바스크립트 중고급: 엔진 핵심
정리시간 질문입니다.
선생님 안녕하세요? 선생님 수업을 열심히 듣고있는 선생님의 팬입니다. 정리시간에 내주신 문제를 풀다가 배열의 값을 누적하는 부분이 해결이 안되서 isNaN() 함수를 통하여 해결하였는데 제가 제대로 문제를 푼것인지 모르겠어서 여쭤봅니다.
- 해결됨자바스크립트 중고급: 엔진 핵심
Lexical Environment Component 생성과정 질문 입니다.
안녕하세요. 강의 막바지에 코드를 하나 소개 해주시면서 스스로 점검하는 시간을 가져라고 하셨는데, 직접 노트에 과정들을 하나하나 적으면서 했지만 아직 모호한 부분이 있는거 같아 검증 및 조언을 받고자 질문을 올리게 되었습니다. function book() { function get() { return point; } var point = 123; return get(); } console.log(book()); 위의 코드에서 나름대로 제가 단계를 나눠 JavaScript Engine이 어떻게 실행하는지 적어보았습니다. JavaScript Engine이 함수 선언문을 먼저 검색합니다. function 키워드를 만났고 book 이라는 이름(name)을 가진 함수의 Execution Context를 생성합니다. 그리고 [[Scope]]에 현재 book을 감싸고 있는 object가 없으니 global object(window)를 참조하게 합니다. Execution Context에 Lexical Environment Component, Variable Environment Component, ThisBindingComponent를 초기화 해줍니다. (LEC안에는 Environment Record, Outer Lexical Environment 등이 있습니다) 그리고 book()안의 함수 선언문을 찾고 function get() { ... } 역시 2번부터 4번처럼 진행합니다. 함수 선언문 초기화가 끝났다면 변수를 찾습니다. var point를 찾았고 book 이름을 가진 object의 LEC.ER에 point: undefined를 가지는 property를 추가 해줍니다. 이제 코드를 실행 합니다. var point = 123 라인을 실행하며, LEC.ER에 있는 point에도 값이 할당 됩니다. return get() 라인을 실행하기 위해 get 이라는 이름을 book의 LEC에서 찾고, value(Function Object)를 실행(?)합니다. get의 LEC.ER에는 point가 없기 때문에 OLR를 통해 book의 LEC를 참조합니다. point를 찾아 반환합니다. console에 123이 출력 됩니다. 여기서 궁금한 점은 아래와 같습니다. 위의 절차가 맞을까요? 제일 궁금한 점은 설명하실 때 console.log(book()); 에서 시작하셨는데, 위의 코드가 test.js 파일로 저장되어 있고 node를 이용하여 실행한다고 가정하겠습니다. 그러면 JavaScript Engine이 함수 선언문을 찾을 텐데 이 때 book의 Execution Context를 생성해야 하는거 아닌가요? 강의에서는 book이 호출(book()으로 실행되었을 때)되었을 때 EC를 초기화 한다고 말씀하셨던거 같아 조금 혼란이 옵니다. function book() { ... } 이 호출되었을 때 즉, book object가 생성(?) 되었을 때 [[Scope]]가 할당된다고 하셨는데 그러면 이 때 OLC(Outer Lexical Environment)도 같이 할당되는 건가요? 그리고 "book object가 생성된다." 라는 말이 정확한지 모르겠습니다. "book"이라는 name 가진 property의 "value"를 참조한다는 말이 더 정확한가요? Variable Environment Component는 LEC와 동일하게 초기화 하고 추후에 처음상태로 초기화할 때 해당 object로 refresh 한다고 정리하였습니다. 그러면 해당 object의 property들은 항상 초기값을 유지하고 있는건가요? 답변 주시면 정말 감사하겠습니다.
- 해결됨자바스크립트 중고급: 엔진 핵심
Execution Context에 대하여 질문이 있습니다.
안녕하세요? JavaScript의 내부적인 동작이 궁금하여 강의를 보게 되었는데, 아직 초반이지만 지금까지 알고 있던 것들이 퍼즐조각 처럼 맞춰지면서 이해가 되는 듯 하여 좋은 것 같습니다. 하지만 그래도 아직 미숙한지라 궁금한 점이 생겨 글을 쓰게 되었습니다. 일단 질문은 아래와 같습니다. (3강에 대한 질문입니다) 1. 제일 첫 번째로 book함수가 호출이 된다는 것은 book 함수 역시 Execution Context가 만들어지고, 이후에 내부로 JavaScript Engine이 접근하여 차례대로 point 변수와, show 함수, getPoint 함수를 만드는 걸로 이해했는데 맞을까요? 2. JavaScript Engine이 function 키워드를 만나게 되면 [[Scope]]가 결정이 된다고 하셨는데, book, show, getPoint 함수의 경우에는 book();과 같이 호출하기전엔 아직 [[Scope]]가 안만들어져 있는건가요? 그렇다면 this 의 경우에는 언제 결정이 되는건가요? 3. Context 환경을 사용함으로써 좋은 점이 "함수가 메모리에 올라가면 해당 함수에서 다른 값을 참조하여 사용하기 위해 메모리를 빠져나오거나, (여기서 빠져 나온다고 말씀하셨는데 저는 해당 함수에서 필요한 변수나 함수를 메모리에 올리거나 다른 코드를 올리기 위해 메모리에서 swap out 한다고 이해했습니다) 추가할 필요가 없다."라고 말씀하셨는데 코드를 실행하기 위해선 메모리에 있어야하고, 그렇다면 JavaScript의 코드 전체를 메모리에 올려두고 사용한다는 말씀이신가요? Context안에 property형태로 저장해두는 것(변수나 함수)은 주소값을 참조하여 빠르게 사용할 수 있다고 이해하였는데, "메모리를 빠져나오거나 추가할 필요가 없다."라는 말씀이 잘 이해가 가지 않습니다. 답변 주시면 정말 감사하겠습니다.
- 미해결자바스크립트 중고급: 엔진 핵심
실행 컨텍스트 질문입니다!
function a() { var value = 456; console.log(value); function b() { console.log(value); function c() { console.log(value); function d() { console.log(value); } d(); } c(); } b(); } a(); 선생님 이 코드에서 value가 전부 456으로 출력이 되는 이유를 모르겠습니다. d() 함수에서 선언적 환경 레코드와 외부 렉시컬 환경참조 안에는 어떠한 변수도 참조되지 않을거같은데 1. 제가 스코프 영역에대해 잘못알고있는건가요? 2. d() 또는 c()의 스코프 영역이 어떻게되나요?
- 미해결자바스크립트 중고급: 엔진 핵심
스코프 체인 / 렉시컬 환경
렉시컬 환경을 활용하는 것이 스코프 체인보다 처리 속도가 빠르다는 것의 정확한 의미가 무엇인지 궁금합니다. 렉시컬 환경도 결국 하나의 오브젝트인데, 이 오브젝트가 해쉬의 자료구조를 가지고 있기 때문에 외부 렉시컬 환경을 참조하는 값을 검색하는데 O(1)의 시간복잡도가 들기 때문에 빠른 것인가요...? 스코프 체인은 일단 현재의 스코프(이것도 오브젝트)에서 찾고, 없으면 현재의 오브젝트(스코프)를 벗어나 다른 스코프(즉, 다른 오브젝트)로 검색이 넘어가야 하기 때문에 시간이 더 걸린다는 의미일까요?
- 해결됨자바스크립트 중고급: 엔진 핵심
[정리시간] 클로저 정리시간 질문입니다!
function book(bookParam) { var point = 100; function getPoint(pointParam) { point = point + bookParam + pointParam; return point; }; return getPoint; }; var obj = book(200); console.log(obj(400)); 선생님 안녕하세요 클로저 정리시간에 getPoint 오브젝트의 [[scope]]에 bookParam 도 설정되나요? getPoint 함수의 스코프 영역에 bookParam도 들어가는지 궁금합니다!
- 미해결자바스크립트 중고급: 엔진 핵심
선생님 스코프 생성 순서에 대한 질문입니다!
function book() { var point = 123; function show() { var title = "JS" }; show(); } book(); 엔진이 function 키워드를 만나면 Function 오브젝트가 생성되고 [[scope]]에 함수밖의 함수과 변수을 설정합니다. 그리고 show() 함수가 호출될 때 실행 컨텍스트가 만들어지며 렉시컬 환경 컴포넌트의 외부 렉시컬 환경 참조안에 스코프가 설정되는 걸로 알고있습니다. 렉시컬 환경 컴포넌트 안에는 선언적 환경 레코드가 있고 그 안에는 함수 내부의 함수와 변수가 작성된다고 알고있습니다. (혹시 제가 이해한 부분에 문제가 있다면 말씀부탁드리겠습니다..ㅠ) 1. 제가 질문 드리고싶은 부분은 선언적 환경레코드에 작성되는 함수 내부의 함수와 변수도 스코프인가요? 2. 외부 렉시컬 환경 참조와 선언적 환경레코드 중에 어느 것이 더 먼저 작성되나요? 3. [[scope]]가 작성되는 시점에는 point: 123 처럼 키와 밸류가 정확하게 들어가나요? undefined로 들어가지는 않나요? ([[scope]]가 작성되는 시점과 변수초기화 단계가 어떤순서인지 감이 안잡힙니다. ) 4. [[scope]]가 설정되고 실행 컨텍스트가 생성되는 과정과 함수 엔진 처리 과정을 따로 생각하면 순서가 명확하게 이해가되는데 둘이 합쳐서 순서를 정하려니까 어느게 먼저인지 감이 안잡힙니다..ㅠ function 오브젝트 생성 -> [[scope]] 작성 -> 변수 초기화 단계에서 undefined로 초기화 -> 코드 실행 단계에서 표현식에 작성된 값을 value로 설정해주고 show()가 실행되면서 실행컨텍스트를 만들고 DER, OLER에 [[scope]]설정(제 생각에는 이런거같은데 논리적으로 완벽하지 않은거같습니다..)
- 미해결자바스크립트 중고급: 엔진 핵심
Function오브젝트 관련 질문입니다!
인스턴스가 new 키워드 + 생성자 '함수'의 조합으로 생성된다는 것은 알고 있었지만, '함수'역시 또다른 생성자 '함수'의 인스턴스라는 것은 전혀 몰랐습니다. 그래서 그런지 개념이 잘 정립이 안 되는 것 같아서 여쭤봅니다. 1.function키워드 === 생성자 함수 ??? function 오브젝트가 인스턴스라면 function키워드는 일종의 생성자 함수라는 것이 되는데요. 일반 생성자 함수와는 달리 new 키워드를 사용하지 않는 것도 그렇고, function키워드와 일반적인 생성자 함수의 정확한 차이가 무엇인지 궁금합니다. 2.인스턴스의 구조 첨부해드린 그림과 같이, 일반적인 생성자 함수는 prototype프로퍼티와 __proto__프로퍼티를 함께 가집니다. 여기서 __proto__프로퍼티를 가지는 것은, 생성자 함수 역시 function키워드로 생성된 '인스턴스'이기에 가지는 프로퍼티인 것이죠?(순환하는 것 같아서 여기서부터 머리가 아프네요 ㅠㅠ) 그리고 이렇게 일반적인 생성자 함수로 생성된 인스턴스는 스스로는 생성자 함수가 아니기 때문에 prototype프로퍼티는 가지고 있지 않고, __proto__프로퍼티만을 가지고 있습니다. 이 __proto__프로퍼티는 인스턴스를 생성한 생성자 함수의 prototype프로퍼티를 참조하고 있고요. 그런데, function키워드로 생성된 function object의 경우, 스스로가 생성자 함수가 아님에도 불구하고 prototype프로퍼티를 가지고 있습니다. =========================================== 잘 이해하지 못한 내용에 대해 여쭤보느라 정리가 잘 안되는데요. 요는 제가 알고 있는 일반적인 생성자 함수와 인스턴스의 관계와 비교하여, function키워드와 function오브젝트의 관계가 왜 차이를 보이는지에 대한 질문이었습니다
- 미해결자바스크립트 중고급: 엔진 핵심
var키워드 질문입니다
정말 초보적인 질문이라 죄송합니다만... var키워드를 사용하지 않고 변수를 선언할 수 있는 방법이 있나요? '함수에서 var키워드를 사용하지 않고 변수를 선언하면 전역 객체에 설정됨'이라고 설명해주셨는데, 변수를 선언하려면 var, const, let이 세 가지 키워드 중 하나는 반드시 써야 하지 않나요? const와 let이 ES6문법임을 제외하면 변수를 선언할 때는 반드시 var키워드를 쓸 수 밖에 없는 것 아닌가요?
- 미해결자바스크립트 중고급: 엔진 핵심
스코프 체인 개념 질문드립니다!
아직 몇 강 듣지 않았지만, 그냥 넘어가기는 찝찝해서 질문드립니다 ㅠ 제가 알기로는 ES5에서도 '스코프 체인'개념이 있는 것으로 알고 있는데요(아마 용어상의 혼선일 것이라 생각됩니다) 일단 제가 이해하고 있는 바(ES5기준)를 말씀드리겠습니다. 1.함수의 호출로 인해 해당 함수의 실행 컨텍스트가 활성화됩니다. (===콜 스택에 해당 함수의 실행 컨텍스트가 쌓입니다) 2.엔진이 해당 함수의 스코프를 훓으면서 '렉시컬 환경'의 '환경 레코드'에 '선언된' 함수와 변수를 담습니다. '선언된'함수와 변수를 담는 것이기에 할당 작업은 이 단계에서는 배제합니다. 때문에 함수 선언문은 함수 객체 자체가 전부 담기게 되고, 함수 표현식의 경우 변수명(식별자)만 담기게 됩니다. 3.'렉시컬 환경'의 '외부 환경 참조'에 '함수가 선언될 당시'의 렉시컬 환경을 참조시킵니다. '함수가 선언될 당시'라는 건, 즉 이 함수를 선언했던 함수의 컨텍스트(만약 전역 컨텍스트에서 선언했다면 전역 컨텍스트)의 렉시컬 환경을 의미하는 것이죠? 4.이 함수를 호출한 주체를 this바인딩시킵니다(일반적으로) 만약 위의 설명에 틀린 부분이 없다고 한다면, 해당 함수의 스코프 안에서 식별자가 발견되지 않으면, '렉시컬 환경'의 '외부 환경 참조'를 타고 올라가서 식별자를 찾는 것이죠? (제가 읽은 서적에서는 이를 '스코프 체인'으로 설명했습니다) 그렇다면 ES5에서의 스코프 체인도 결국 함수 호출로 인해 이루어지므로 '동적'으로 환경을 설정하는 것이 아닌가요? 또, 컨텍스트가 한 덩어리이기 때문에 한 메모리 안에서 찾아 검색이 빠르다고 말씀해주셨는데, 이렇게 '외부 환경 참조'를 타고 올라가는 것은 메모리의 다른 공간을 검색하는 일이 아닌지 궁금합니다 ㅠㅠ
- 해결됨자바스크립트 중고급: 엔진 핵심
객체 프로퍼티 생성 질문입니니다.
안녕하세요. 이번 강의의 코드 기준으로 질문이 있습니다. 강의 코드를 엔진이 해석 하는 순서에서 오브젝트에 프로퍼티 설정과 순서에 대해 궁금한점이 있습니다. 1. 함수 선언문 해석 없음. 2. 변수 초기화 obj = undefined; 3. 코드 실행 obj = {}; obj.getTotal(11, 22); 여기서 obj.getTotal= function(){} 이 할당되는 순서가 궁금합니다.( getTotal이라는 프로퍼티가 생성되는 시점은 코드 실행 때인가요? )
- 미해결자바스크립트 중고급: 엔진 핵심
정적 환경의 스코프 설정에 대해서
앞선 강의('함수 코드 해석 순서' 편 이전의 강의)에서 스코프는 함수가 선언됬을 때 외, 내부 스코프를 설정 한 후 콘텍스로 저장한다고 이해했습니다. 그런데 이번 강의을 들으면서 스코프가 함수가 호출이 됬을 때 엔진이 함수 안을 해석하면서 스코프를 설정한다고 생각하게 되었습니다. 저는 저번 강의에서 함수 정의 단계에서 설정된 콘텍스(전에 설정된 스코프 덩어리)가 함수가 호출 되었을 때 식별가 해결에 사용된다고 받아들였습니다. 어떤 스코프가 맞는 건가요?
- 미해결자바스크립트 중고급: 엔진 핵심
클로저 질문입니다.
getPoint 오브젝트에서 point 변수는 외부 렉시컬 환경 참조에서 찾을 수 있지만 bookParam은 어떻게 찾나요? bookParam도 같이 외부 렉시컬 환경 참조에 바인딩 되나요? bookParam은 book 실행 콘텍스트의 선언적 환경 레코드에 있는데 이걸 어떻게 가져다 쓸수 있는건가요?
- 미해결자바스크립트 중고급: 엔진 핵심
실행 콘텍스트 정리입니다.
1. function 키워드를 만나 book function 오브젝트를 생성한다. 2. book function 오브젝트의 [[scope]]에 글로벌 스코프를 설정한다. 3. book()함수가 호출되어 함수안으로 들어간다. 4. function 키워드를 만나 get function 오브젝트를 생성하고 [[scope]]에 book() 스코프를 설정한다. 4. 그리고 실행 콘텍스트가 만들어진다? ** 궁금증 ** 함수가 호출되어 들어가는 시점에 실행 콘텍스트가 만들어 지는건가요 get function 오브젝트를 생성하고 실행 콘텍스트가 만들어 지는건가요?? 준비 단계에서 외부 렉시컬 환경 참조에 연결 시키려면 그 이전에 get function 오브젝 트가 만들어져 있어야하는데 get function 오브젝트를 생성하고 실행 콘텍스트가 만들어 지는 건가요? === 준비 단계 === 5. 렉시컬 환경 컴포넌트, 변수 환경 컴포넌트, this 바인딩 컴포넌트를 만들어 넣고 이후에 환경 레코드 와 외부 렉시컬 환경 참조를 생성하고 렉시컴 컴포넌트에 넣는다. 6. get function 오브젝트의 설정된 스코프를 외부 렉시컬 환경 참조에 연결 시킨다. === 초기화 단계 === 7. point 변수를 렉시컬 환경 컴포넌트의 환경 레코드의 선언적 환경 레코드에 undefined의 값으로 설정한다. === 실행 단계 === 8. 처음으로 올라가 point 변수에 123을 설정한다. 9. 그리고 return에 get()함수가 호출되어 다시 함수 안으로 들어간다. ** 궁금증 ** 9번의 설명을 맞게 했는지 모르겠습니다. 10. 들어가서 실행 콘텍스트를 만들고 위와 같은 단계로 설정하는데 선언문과 표현문이 없기에 아무것도 설정하지 않는다. 그리고 return으로 와서 point를 반환하려고 point를 찾는데 없다. 그러면 상위 스코프에 설정된 point 값을 할당하고 함수를 빠져나온다.