자바스크립트의 스코프와 실행 컨텍스트

• 자바스크립트의 스코프와 실행 컨텍스트에 대해서 정리하기로 하였다.
• 선언된 변수가 어디서 어디까지 유효한지에 대해 정확히 알기위해서는 이 내용들을 알아야겠다고 생각하였다.

스코프 (scope)

• 스코프는 식별자(변수)에 대한 유효범위로, 현재 실행중인 콘텍스트를 의미한다.
  🧃 변수 또는 다른 표현식이 해당 스코프내에 존재하지 않으면 사용할 수 없다.

• 스코프는 계층적인 구조를 갖기에 하위 스코프는 상위 스코프에 접근할 수 있지만, 상위 스코프는 하위 스코프에 접근할 수 없다.

const a = 10;

{
	const b = 20;
    console.log(a); // 10 
    console.log(b); // 20
}

console.log(a); // 10 
console.log(b); // Uncaught ReferenceError: b is not defined

• 스코프에는 전역 스코프(Global scope)와 지역 스코프(Local scope)가 있다.

🍸 전역 스코프는 가장 바깥 영역을 의미한다. 위의 예제에서는 a가 전역 스코프에서 선언된 변수다.

🌼 로컬 스코프는 함수 내부의 영역을 의미한다. 함수 내부에 선언된 변수는 로컬 스코프에 존재하며 바깥의 전역 스코프에서는 사용될 수 없다. 위에 예제에서는 변수 b가 로컬 스코프에 선언되었다.

• 렉시컬 스코프(Lexical Scope)는 함수의 호출 위치가 아니라 함수가 선언된 위치에 따라서 상위 스코프가 결정되는 것을 의미한다.

const a = 10;

const printA = () => {
	console.log(a);
}

const checkLexical = () => {
	const a = -7;
	printA();
}

checkLexical(); // 10

• 위의 예제에서 함수가 호출된 위치를 기준으로 변수 a를 찾기 시작하는 것이 아니라, 함수가 선언된 위치를 기준으로 시작하여 상위 스코프에서 변수 a를 찾는다.

실행 컨텍스트 (Execution Context)

• 실행 컨텍스트는 코드의 실행에 필요한 환경정보가 모인 객체를 의미한다.
  🍪 필요한 환경정보로 스코프, 변수, 함수 선언, this가 있다.

• 자바스크립트 엔진은 실행 컨텍스트를 물리적인 객체로 관리한다.
  🍫 이 객체는 변수 객체 (Variable Object), 스코프 체인 (Scope Chain), this value를 프로퍼티로 갖는다.

• 가장 바깥 영역인 전역 컨텍스트와 함수의 내부 영역인 함수 컨텍스트가 있다.

• 실행 컨텍스트는 실행 컨텍스트 스택과 렉시컬 환경으로 구성된다.

🍺 실행 컨텍스트 스택은 코드 실행 순서를 관리한다. 가장 먼저 전역 컨텍스트가 들어간다.
🍏 렉시컬 환경은 모든 식별자(변수)와 바인딩된 값, 스코프를 저장하고 관리한다.

• 실행 컨텍스트가 활성화 될 때 호이스팅, this값 바인딩, 외부 환경정보 구성이 일어난다.

참고 자료 : https://developer.mozilla.org/ko/docs/Glossary/Scope, https://poiemaweb.com/js-execution-context