테코톡) 우아한 테크 코스 테코톡 준비 (예상질문, 키워드, 참고자료)

일단! 나는 레벨 1에 테코톡 발표를 끝냈다!! 사람들 앞에서 발표하는 것을 별로 즐기지 않는 편이라 준비하면서 많이 걱정했던 것 같다. 수업시간에 해당 키워드에 관해 이야기한 적이 있어서 예상 질문을 준비하기 편했다

 

테코톡 발표 준비

예상질문

1. 클로져를 이용한 함수를 할당하여 실행한 후 nul로 재할당한다면 사용되었던 클로져 데이터 값이였던 round 값은 사라지게 되나요?

const increaseRound = () => {
  let round = 0;

  return () => (round += 1);
};

let addRound = increaseRound();

addRound(); // round는 1
addRound(); // round는 2

addRound = null; // null으로 재할당한 시점에 round의 값(1,2)이 메모리에 남아있을까요?

• 클로저를 사용하여 함수를 할당 후 실행할 함수가 null로 재할당될 때 클로저 데이터(외부 함수에 정의되고 내부 함수에 의해 접근되는 변수)는 자동으로 사라지지 않습니다. 그러나 클로저 데이터에 대한 참조가 더 이상 없으면 메모리 확보를 위해 가비지콜렉팅이 일어날 수 있습니다.

 

2. 외부함수의 실행 컨텍스트가 콜스택에 빠지고 나서도내부함수가 ‘외부함수 스코프‘의 변수를 사용할 수 있는 이유

=> ‘외부함수 스코프‘가 가비지 컬렉터의 대상이 되지 않아 스코프 안의 변수를 그대로 사용할 수 있는건지

=>‘외부함수 스코프‘에서 참조하는 것들만 따로 포함한 ‘클로저 스코프’가 새로 정의되어서 변수를 사용할 수 있는건지

• 콜스택에서 outter 컨텍스트가 빠져도 inner 에서 outter 변수를 사용할 수 있는 이유는 단순히 outter의 environmentRecord 에서 변수의 참조카운트가 0이 되지 않기 때문에 (한마디로 GC대상이 아니기 때문에) 사용할 수 있다고 하고, 또한 이 점만 기억하면 됩다.
• 추가로 스펙상으로는 참조카운트가 남아있으면 관련 LexicalEnvironment 전부를 남기도록 돼 있으나,2019년 기준으로 V8 엔진이 실제로 사용하는 변수만 남겨두고 나머지는 GC하도록 최적화가 되어있다고 합니다. (이 부분이 크롬 디버거에서 closure 스코프가 따로 있는 이유인 것 같습니다)

 

3. innerFn은 y 를 참조하고 있지 않습니다. 이때, 클로저 스코프에 y가 계속 남아있는지, 참조하지 않아 남아있지 않는지 

const outerFn = () => {
  let x = 0;
  let y = 0;

  const innerFn = () => {
    x += 1;
  }

  return innerFn
}

• 디버깅 결과 남아있지 않다.

4. 외부 함수가 있어야 하고 그 외부 함수의 지역 변수 값을 내부 함수가 참조하는 것이라더데 그러면 익명함수를 리턴하지 않아도 클로저 정의에 부합하는가boo함수는 foo함수에 있는 y를 기억하고 있는데 foo함수는 클로저일까요??

const x = 1;

function foo() {
  const y = 2;

  function boo() {
    const z = 3;
    console.log(x + y + z);
  }

  boo();
}

foo();

 

함께 공부할만한 키워드

• 가비지 컬렉터
• 실행 컨텍스트
• 스코프

참고자료

스코프 → 실행 컨텍스트 → 클로저 형식으로 발표

스코프: 참고자료 + 모던 딥다이브 

실행 컨텍스트: 코어자스 정도?

클로저: 코어 자스+ 모던 딥다이브+ 참고자료

 

시간 부족하면 추가할 대본

모든 식별자는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정됩니다. 이러한 코드가 있다고 합시다. 어떠한 결과를 예상하시나요? JS엔진은 이름이 같은 두개의 변수 중에서 어떤 변수를 참조할 것인지 결정합니다. 이를 식별자 결정이라고 하는데요, 그렇다면 스코프는 JS엔진이 식별자를 검색할 때 사용하는 규칙이라고 할수있겠죠!

var name = 'hello!';

function Rulu() {
	var name = 'I'm Rulu';
	console.log(name); // -- 1
}
Rulu();

console.log(name); // -- 2