[23장] 실행 컨텍스트

[juyeon-park]

데브코스 4기 프롱이들 모던 JS Deep Dive 책 뿌수기😎

아래 템플릿을 복사해서 1개이상 퀴즈를 만들어주세요. 객관식, 주관식, 단답형 모두 상관없습니다!

Q. 퀴즈 내용
1.  1번
2.  2번
3.  3번

<details>
<summary>퀴즈 정답</summary>
<div markdown="1">    
정답 설명
</div>
</details>

[suehdn]

Q 다음 코드의 출력 결과를 예상해주시고 실행 컨텍스트 스택을 stack에 순차적으로 표현해주세요. (생성과 제거 모두 구현해주세요)
stack = [ ]

function dog(){ 
    console.log("Dog!");
    function love(){ 
        console.log("Human!");
    }
    love();
}
function cat(){
    dog();
    console.log("Cat!");
}
cat();

정답

출력 결과
Dog!
Human!
Cat!

스택

1. stack = [ ]
   
2. stack = [ 전역 ]
   
3. stack = [ 전역, cat ]
   
4. stack = [ 전역, cat , dog ]
   
5. stack = [ 전역, cat, dog, love ]
   
6. stack = [ 전역, cat, dog ]
   
7. stack = [ 전역, cat ]
   
8. stack = [ 전역 ]
   
9. stack = [ ]

[eeseung]

Q. 다음은 아래 코드에서 if 문의 코드 블록이 실행될 때 렉시컬 환경 교체를 설명하는 그림입니다.
① ② - 화살표가 향하는 곳을 적고, ③ ④ ⑤ - 빈칸을 채워주세요.

let x = 1;

if (true) {
  let x = 10;
  console.log(x);
}

console.log(x);

퀴즈 정답

① BLOCK Lexical Environment ② Global Lexical Environment ③ null ④ 10 ⑤ 1

[dudwns]

Q. 다음 예제를 실행할 때 출력 결과를 작성하고 몇 개의 실행 컨텍스트가 생성되는지 쓰시오.

const name = "Sass";
const discription = "CSS 전처리 도구";
var totalCount = 9;
var listenCount = 3;

function lecture(total) {

  function remainLecture(total) {
    let n = total - listenCount;
    console.log(`남은 강의는 ${n}개 입니다.`);

    function listenLecture(listen) {
      console.log(`수강한 강의는 ${listen}개 입니다.`);
    }

    listenLecture(listenCount);
  }

  remainLecture(total);
}

lecture(totalCount);

퀴즈 정답

1. 출력 결과

남은 강의는 6개 입니다.
수강한 강의는 3개 입니다.

3. 생성된 실행 컨텍스트의 개수

Global Execution Context
lecture Execution Context
remainLecture Execution Context
listenLecture Execution Context
총 4개

[juyeon-park]

O/X 퀴즈

1.  this 바인딩은 전역 환경 레코드와 함수 환경 레코드에만 존재한다.
2.  실행 컨텍스트 스택에서 함수 실행 컨택스트가 제거되면 그 함수의 렉시컬 환경까지 즉시 소멸된다.
3.  실행 컨텍스트 스택의 최상위에 존재하는 실행 컨텍스트는 언제나 실행 중인 코드의 실행 컨텍스트이다.

퀴즈 정답

OXO

정답 설명

1. 전역 환경 레코드의 [[GlobalThisValue]] 내부슬롯, 함수 환경 레코드의 [[ThisValue]] 내부슬롯에 this가 바인딩 됩니다. 전역 환경 레코드를 구성하는 객체 환경 레코드와 선언적 환경 레코드에는 this 바인딩이 없습니다!

2. 렉시컬 환경은 실행 컨텍스트에 의해 참조되지만 독립적인 객체이므로 바로 소멸되지 않고 누군가에 의해 참조되지 않을때 가비지 컬렉터의 대상이 된다.

[jonghyunlee95]

Q. 다음 문제의 답을 O,X로 작성해주세요.

1. 전역코드 실행 단계에서 함수가 호출되어도 코드의 실행 순서를 변경하지 않고 전역코드의 실행을 순차적으로 실행한다.
2. for 문의 변수 선언문에 let키워드를 사용한 for문이 반복되어 실행 될 때마다 새로운 렉시컬 환경을 생성한다.
3. var키워드로 선언된 선언된 전역변수와 함수표현식으로 정의된 전역 함수는 전역객체의 프로퍼티와 메서드가 된다.

퀴즈 정답

정답 설명
1. X - 함수가 호출되면 순차적으로 실행되던 전역 코드의 실행을 일시 중단 하고 코드 실행 순서를 변경하여 함수 내부로 진입한다.
2. O
3. X - 함수 표현식과 화살표함수를 사용해 정의한 전역함수는 전역객체의 메서드로 등록되지 않는다.

[hyoribogo]

Q. let, const가 var와는 다르게 변수 선언문 이전에 참조할 수 없는 이유를 환경 레코드 개념에서 설명해주세요.

퀴즈 정답

var 키워드로 선언한 변수는 코드 평가 시점에 객체 환경 레코드에 바인딩된 BindingObject를 통해 객체 환경 레코드와 연결된 객체의 프로퍼티에 해당 변수의 식별자를 키로 등록한 다음, 암묵적으로 undefined를 바인딩한다.

반면에, let과 const는 변수와 함수 선언을 저장하고 관리하는 선언적 환경 레코드에서만 처리가 되므로 초기화가 되지 않기 때문에 선언 이후 TDZ에 들어가게 되어 선언문 이전에 참조할 수 없다.