TIL#27

박감자·2024년 10월 25일

TIL

목록 보기

27/34

클로져란

어우...
머리 아파
-박감자-

달리기반

주말에 아무래도 강의 영상 돌려보면서 복습이 시급해 보인다.
내용은 적지만 알찬 는낌.... 코드가 왜 이렇게 돌아가는가 라는 의문이 계속 드는 수업이었다.

실행 컨텍스트 (Execution Context)

자바스크립트 코드를 실행하는데 필요한 환경을 제공하는 객체

compile : 레코드 수집(호이스팅) 및 상위 스코프(Outer) 결정
runtime : 함수 실행 시 실행 컨텍스트를 콜 스택에 푸쉬하고 변수에 값 할당

3 가지로 구성이 되어있는데

VE: 평가 단계에서 필요한 환경
LE: 실행 단계에서 필요한 환경
thisBinding : 이제는 지겨워요

그 중 LE는 Record와 Outer로 이루어져 있다

Record : 선언된 변수, 함수, 클래스 등이 기록
Outer : 상위 스코프를 가르키고 있는 공간 -> 스코프 체인을 형성

이벤트 루프

비동기 작업을 관리하고 순서대로 프로그램의 실행 흐름을 제어하기 위한 장치

마이크로 테스크 큐가 콜 스택 큐보다 높다!

예제

console.log("1. Start");

setTimeout(() => {
  console.log("2. Timeout callback");
}, 0);

Promise.resolve().then(() => {
  console.log("3. Microtask");
});

console.log("4. End");

// Sol) 1 4 3 2

// Example 2
console.log("1. Start");

setTimeout(() => {
	console.log("2. setTimeout")
}, 0)

fetch("https://jsonplaceholder.typicode.com/posts/1")
.then(res => {
	console.log("3. fetch 실행완료!")
})

Promise.resolve().then(() => {
    const currentTime = Date.now();
    while (Date.now() - currentTime < 3000) {}
  console.log("4. Microtask");
});

console.log("5. End");

// Sol) 1 5 4 2 3
// (2 3 Queue에 먼저 줄 서는 순서 - fetch 걸리는 시간에 따른다)

클로져

함수와 함수가 선언된 렉시컬 환경과의 조합
ㅋㅋㅋㅋㅋㅋㅋㅋ 이게 말이 된다는 사실이 놀랍다

클로저의 예제 (어제 TIL에서 썼기 때문에 조금만 적어보는 중)

function outerFn(x) {
  const outerVar = x;

  function innerFn(y) {
    return outerVar + y;
  }

  return innerFn;
}

const addFive = outerFn(5); // 클로저 생성!
console.log(addFive(3));
console.log(addFive(10));