[JavaScript/자바스크립트]스코프, 렉시컬환경, 실행 컨텍스트

스코프(scope)

매개변수를 참조할 수 있는 유효범위.즉, 스코프는 식별자가 유효한 범위.

렉시컬 환경의 환경 레코드.

매개변수의 스코프가 함수 몸체 내부로 한정되기때문에 함수와 밀접한 관련이 있다.

블럭 외부에서는 블럭 내부의 변수를 참조할 수 없다.

---

변수의 스코프는 좁을수록 좋다. (전역 변수를 반드시 사용할 이유를 찾지 못한다면 지역 변수를 사용해야 한다.

---

자바스크립트 엔진은 이름이 같은 두 개의 변수 중에서 어떤 변수를 참조해야 할것인지를 결정하는데,

이를 식별자 결정(identifier resolution)이라 한다.

---

따라서 스코프를 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙이라고도 할 수 있다.

변수는 코드의 가장 바깥 영역뿐 아니라 코드 블록이나 함수 몸체 내에서도선언할 수 있다. 이때 코드 블록이나 함수는 중첩될 수 있다.

또한 var 키워드로 선언한 변수, let 또는 const 키워드로 선언한 변수의 스코프도 다르게 동작한다.

 

 var  :  function-scoped

 let 또는 const : block-scoped

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/let

let - JavaScript | MDN

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/const

const - JavaScript | MDN

 

//      var은 

• 블록레벨 스코프 안됨
• 함수 레벨 스코프만 지원됨

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/var

var - JavaScript | MDN

---

https://hans-j.tistory.com/82

[JavaScript/자바스크립트] 값과 변수

---

렉시컬 환경(lexical environment) 

코드가 어디서 실행되며 주변에 어떤 코드가 있는지, 식별자-변수 매핑을 포함하는 데이터 구조.

키와 값을 갖는 객체 형태의 스코프(전역, 함수, 블록 스코프)를 생성하여 식별자를 키로 등록하고 식별자에 바인딩 된 값을 관리.

즉,  스코프를 구분하여 식별자를 등록하고 관리하는 저장소 역할.

즉 코드의 문맥은 렉시컬 환경으로 이뤄지며, 이를 구현한 것이 실행 컨텍스트(execution context).

---

식별자와 스코프는 실행 컨텍스트의 렉시컬 환경(lexical environment)으로 관리하고, 

코드 실행 순서는 실행 컨텍스의 스택으로 관리.

---

실행 컨텍스트(execution context)

코드의 실행순서와 스코프를 기억하는, 자바스크립트 코드가 실행되는 환경.

소스코드를 실행하는 데 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역.

식별자(변수, 함수, 클래스 등의 이름)를 등록하고 관리하는 스코프와 코드 실행 순서 관리를 구현한 내부 메커니즘

모든 코드는 실행 컨텍스트를 통해 실행되고 관리.

---

ECMAscript사양은 소스코드를 4가지 타입으로 구분한다.

// 소스코드의 타입에 따라 실행 컨텍스트를 생성하는 과정과 관리내용이 다르기 때문에 구분되어있다.

---

전역 코드

// 전역에 존재하는 소스코드.

---

함수 코드

// 지역 변수, 매개 변수, arguments 객체(함수에 전달된 인수에 해당하는 Array형태의 객체)를 관리하는 코드.

---

eval 코드

//빌트인 전역 함수인 eval함수에 인수로 전달되어 실행되는 소스코드.

---

모듈 코드

// 모듈 내부에 존재하는 소스코드.

// 모듈은 유사한 기능의 기능 또는 그룹. 이들은 파일 내에서 함께 그룹화되며,
   더 큰 응용프로그램으로 호출될 때 특정 태스크를 실행하는 코드를 포함.

// https://www.freecodecamp.org/news/javascript-modules-explained-with-examples/

---

// 전역 변수 선언
const x = 1;
const y = 2;

// 함수 정의
function foo(a) {
  const x = 10;
  const y = 20;

  //메서드 호출
  console.log(a + x + y); // 130
}

//함수 호출
foo(100);

//메서드 호출
console.log(x + y); //3

전역코드와 함수코드로 구성되어 있을 때, 실행 컨테스트는 아래와 같이 실행된다.

1. 전역 코드 평가

전역 변수와 전역 함수가 실행 컨텍스트가 관리하는 전역 스코프에 등록된다.

2. 전역 코드 실행

전역 코드가 순차적으로 실행되기 시작한다.

3. 함수 코드 평가

함수 내부에서 지역 변수처럼 사용할 수 있는 arguments 객체(함수에 전달된 인수에 해당하는 Array 형태)가 생성되어 지역 스코프에 등록되고 this바인딩도 결정된다.

4. 함수 코드 실행

식별자인 console을 스코프 체인을 통해 검색한다.

다음은 log 프로퍼티를 console객체의 프로토타입 체인을 통해 검색한다.

a, x ,y 식별자는 스코프 체인을 통해 검색한다.

// 이처럼 코드가 실행되려면 스코프를 구분하여 식별자와 바인딩된 값이 관리되어야한다.

---

https://developer.mozilla.org/en-US/docs/Glossary/Scope

Scope - MDN Web Docs Glossary: Definitions of Web-related terms | MDN

---

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management

Memory management - JavaScript | MDN

---

**모던 자바스크립트 deep dive (이웅모 선생님) 를 읽고 참고하여 작성하는 글입니다 **