당신은 실행 컨텍스트를 아십니까?

소스코드를 보고 개념을 설명하라의 공부방법을 적용해보려한다.

그래서 모던자바스크립트의 책예제를 통해 소스코드를 분석해보자

 

const x = 1;
const y = 2;

function foo(a) {
 const x = 10;
 const y = 20;
	
 console.log(a+x+y); // 답1
}

foo(100);
console.log(x+y); // 답2

 

답1 : 130
답2 : 3


소스코드의 흐름을 설명하시오.

전역 스코프
const x = 1과 const y = 2가 호이스팅되어 메모리에 할당됩니다.
호이스팅: 변수들이 메모리에서 공간을 차지하지만 값은 초기화되지 않습니다.

함수 호출
foo(100)가 호출되면 새로운 실행 컨텍스트가 만들어집니다.
함수 스코프에서 const x = 10과 const y = 20이 초기화됩니다

변수 참조 및 계산 
console.log(a + x + y)에서, 함수 스코프의 x와 y를 참조해 100 + 10 + 20이 계산되고 130이 출력됩니다.
console.log(x + y)에서는 전역 스코프의 x와 y를 참조해 1 + 2가 계산되어 3이 출력됩니다.