execution context & closure

hoonnotes

책과는 완전 다르게 접근할거에요!

왜 책이랑 다르게 진행하나요?

주니어 레벨에서 이렇게 깊게 알 필요가 없다!

너무 자세히 설명해서 오히려 이해하기가 어렵다!

나는 자세히 알고 싶어요!

https://poiemaweb.com/js-execution-context를 참고하세요

내 코드를 실행시키면 어떤일이 일어날까요?

const minimumWage = 12000;

function getDailyWage(wage) {
  const WORKING_HOURS_PER_DAY = 8;
  const result = wage * WORKING_HOURS_PER_DAY;
  return result;
}

const name = "hoon";

자바스크립트 동작 원리

자바스크립트 코드가 실행되면,

- Thread of Execution을 통해 코드가 한줄씩 읽어와져 실행된다

- Memory에 이후에 사용할 데이터들을 저장한다

내 코드를 실행시키면 어떤일이 일어날까요?

const minimumWage = 12000;

function getDailyWage(wage) {
  const WORKING_HOURS_PER_DAY = 8;
  const result = wage * WORKING_HOURS_PER_DAY;
  return result;
}

const name = "hoon";

Global Execution Context

Thread of Execution

Global Memory

minimumWage : 12000

getdailyWage : <function>

name : "hoon"

내 코드를 실행시키면 어떤일이 일어날까요?

const minimumWage = 12000;

function getDailyWage(wage) {
  const WORKING_HOURS_PER_DAY = 8;
  const result = wage * WORKING_HOURS_PER_DAY;
  return result;
}

const lowPayingJob = getDailyWage(minimumWage); 
const highPayingJob = getDailyWage(48000)

내 코드를 실행시키면 어떤일이 일어날까요?

const minimumWage = 12000;

function getDailyWage(wage) {
  const WORKING_HOURS_PER_DAY = 8;
  const result = wage * WORKING_HOURS_PER_DAY;
  return result;
}

const lowPayingJob = getDailyWage(minimumWage); 
const highPayingJob = getDailyWage(48000)

Global Execution Context

Thread of Execution

Global Memory

minimumWage : 12000

getDailyWage : <function>

lowPayingJob :

lowPayingJob : getDailyWage(minimumWage)

내 코드를 실행시키면 어떤일이 일어날까요?

Global Execution Context

Thread of Execution

Global Memory

minimumWage : 12000

getDailyWage : <function>

lowPayingJob :

lowPayingJob : getDailyWage(minimumWage)

Local Execution Context

Thread of Execution

Local Memory

function getDailyWage(wage) {
  const WORKING_HOURS_PER_DAY = 8;
  const result = wage * WORKING_HOURS_PER_DAY;
  return result;
}

const lowPayingJob = getDailyWage(minimumWage);

WORKING_HRS_PER_DAY : 8

result: :

wage : 12000

96000

return result;

96000

콜스택은 뭐에요?

const minimumWage = 12000;

function getDailyWage(wage) {
  const WORKING_HOURS_PER_DAY = 8;
  const result = wage * WORKING_HOURS_PER_DAY;
  return result;
}

const lowPayingJob = getDailyWage(minimumWage); 
const highPayingJob = getDailyWage(48000)

콜스택이란?

자바스크립트가 실행중인 함수를 기록하는 방식

함수를 실행시킨다 = 콜스택에 추가한다

함수 실행 완료 = 콜스택에서 제거

콜스택의 제일 위에 있는 함수가 지금 실행중인 함수

global()

getDailyWage

Call Stack

closure

클로져란?

함수 실행이 종료되면, 함수를 위한 실행 컨텍스트가 제거됨

따라서 내부 메모리에 등록된 값도 다 제거됨

하지만, 외부에서 내부 메모리의 등록된 값을 참조하는 경우 값을 임시로 보관하여 제공

이런 동작 원리를 클로저라 한다!

클로저 살펴보기

function counter() {
  let count = 0;
  const obj = { name: ' hoon' }
  return obj
}

const myCounter = counter();
myCounter();
myCounter();

Global Execution Context

Thread of Execution

Global Memory

counter : <function>

myCounter :

Call Stack

global()

counter()

Thread of Execution

Local Memory

Local Execution Context

count : 0

increase : <function>

return increase

클로저 살펴보기

function counter() {
  let count = 0;
  function increase() {
    count++;
  }
  return increase;
}

const myCounter = counter();
myCounter();
myCounter();

Global Execution Context

Thread of Execution

Global Memory

counter : <function>

myCounter : <function increase>

Call Stack

global()

myCounter()

Thread of Execution

Local Memory

Local Execution Context

count++

클로저 살펴보기

function counter() {
  let count = 0;
  function increase() {
    count++;
  }
  return increase;
}

const myCounter = counter();
myCounter();
myCounter();

Global Execution Context

Thread of Execution

Global Memory

counter : <function>

myCounter :

Call Stack

global()

counter()

Thread of Execution

Local Memory

Local Execution Context

count : 0

increase : <function>

return increase

count: 0