0921 <JavaScript Deep Dive> 스터디 6주차

JavaScript Deep Deiv 책을 읽고 퀴즈를 만들어 함께 푸는 스터디 입니다. 그때 그때 노션에 정리해 둔 것들을 복습하며 포스팅합니다.

범위 Chapter 19, 20, 21

1. 아래는 실행 컨텍스트의 생성 과정에 대한 설명입니다. 아래 예시 코드를 참조하여 빈칸에 알맞는 단어를 넣고, 그 이유를 설명해주세요 (종한)

p. 368 ~

var x = 1;
const y = 2;

function foo (a) {
  var x = 3;
  const y = 4;

  function bar (b) {
    const z = 5;
    console.log(a + b + x + y + z);
	}
  bar(10);
}

foo(20); // 42

// 실행 컨텍스트 생성 과정
1. 전역 객체 생성
2. 전역 코드 ( 평가 )
	2.1. 전역 ( 실행 컨텍스트 ) 생성
	2.2. 전역 렉시컬 환경 생성
			2.2.1. 전역 ( 환경 레코드 ) 생성
						2.2.1.1. 객체 환경 레코드 생성
						2.2.1.1. ( 선언적 ) 환경 레코드 생성 --- ( let, const ) 키워드로 선언한 전역 변수가 등록됨
			2.2.2. this 바인딩
			2.2.3. 외부 렉시컬 환경에 대한 참조 결정 --- 상위 ( 스코프 )를 가리키며 ( 스코프 체인) 이 구현, 유지됨
3. 전역 코드 실행 --- (런타임) 시작
4. ( foo ) 함수 코드 평가 및 실행
// 2. 이하 내용과 유사하여 생략
5. ( bar ) 함수 코드 평가 및 실행 --- 실행 컨텍스트 (  스택 ) 의 최상위
// 2. 이하 내용과 유사하여 생략
6. ( bar ) 함수 코드 실행 종료
7. (foo) 함수 코드 실행 종료
8. 전역 코드 실행 종료 --- 실행 컨텍스트 (스택)이 비게 됨

2-1. 클로저란 무엇인지 간단하게 설명해주세요. (은빈)

클로저 MDN의 사전적 정의

함수와 그 함수가 생성된 렉시컬 환경의 조합이다

클로저는

클로저란 함수가 속한 렉시컬 스코프를 기억하여 함수가 렉시컬 스코프 밖에서 실행될 때도 그 스코프에 접근할 수 있게 하는 기능을 말한다.

2-2. 아래 카운터 상태를 1씩 증가시키는 함수 코드가 있습니다.

이 코드가 왜 좋지 않은 코드인지인지 설명하고 어떻게 수정해야 바람직한지 설명 또는 코드를 작성해주세요.

let num = 0;

let increase = function () {
	return ++num;
};

console.log(increase()); //1
console.log(increase()); //2
console.log(increase()); //3

나쁜점

1. 전역변수를 사용하고 있다

2. 카운트 상태(num 변수의 값) increase 함수가 호출되기 전까지 변경되지 않고 유지되어야 한다.

3. 이를 위해 카운트 상태(num 변수의 값)는 increase 함수만이 변경할 수 있어야 한다.

// p. 403
// 카운트 상태 변경 함수
const increase = (function () {
  let num = 0;
  // 클로저(현재 정의된 위치에 의해 상위 스코프인 즉시 실행 함수의 렉시컬 환경을 기억하는 클로저)
  return function () {
    // 카운트 상태를 1만큼 증가시킨다
    return ++num
  };
}());

console.log(increase()); // 1
console.log(increase()); // 2
console.log(increase()); // 3

ㄴ 만약에 즉시실행함수를 감싼 그룹 연산자가 없으면??

→ p.178 12챕터 함수

그룹 연산자로 함수를 묶은 이유 : 함수 리터럴로 평가되어 함수 객체를 만들기 위해서

(function () {
  let num = 0;
  // 클로저(현재 정의된 위치에 의해 상위 스코프인 즉시 실행 함수의 렉시컬 환경을 기억하는 클로저)
  return function () {
    // 카운트 상태를 1만큼 증가시킨다
    return ++num
  };
}());

출력:
ƒ () {
    // 카운트 상태를 1만큼 증가시킨다
    return ++num
  }

const increase = (function () {
  let num = 0;
  // 클로저(현재 정의된 위치에 의해 상위 스코프인 즉시 실행 함수의 렉시컬 환경을 기억하는 클로저)
  return function () {
    // 카운트 상태를 1만큼 증가시킨다
    return ++num
  };
}());

출력: x

3. this란 무엇인가요? & 어떤 함수 호출 방식에 따라 어떤 값이 this에 바인딩 되는 지 설명해주세요. (상지)

this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기참조 변수 입니다. this는 함수가 호출되는 방식에 따라 this에 바인딩될 값이 결정됩니다.

• 일반 함수호출 : this에는 전역 객체가 바인딩된다.
• 메서드 호출 : this에는 메서드를 호출한 객체가 바인딩된다.
• 생성자 함수 호출 : this에는 생성자 함수가 생성할 인스턴스가 바인딩 된다.
• Function.Prototype.apply/call/bind 메서드에 의한 간접 호출 : this로 사용할 객체와 인수 리스트를 인수로 전달받아 함수를 호출하며 this에는 인수가 바인딩 된다.