실행 컨텍스트란 자바스크립트가 실행될 때 생성되는 하나의 실행 단위입니다.

실행 컨텍스트 개념

ECMAScript에서는 실행 컨텍스트는 실행 가능한 코드를 형상화하고 구분하는 추상적인 개념이라고 기술하는데요, 실행 가능한 자바스크립트 코드 블록이 실행되는 환경이라 볼 수 있겠습니다.

ECMAScript는 실행 컨텍스트가 규정되는 경우를 세 가지로 말하고 있습니다.

• 전역 코드
• eval() 함수로 실행되는 코드
• 함수 안의 코드를 실행할 경우

코드가 실행되면 실행 컨텍스트가 생성되고, 실행 컨텍스트에서 가장 위를 차지하는 컨텍스트가 현재 실행되고 있는 컨텍스트라고 보면 되겠습니다.

console.log("전역 컨텍스트");

function context1() {
  console.log("컨텍스트 1");
}

function context2() {
  context1();
  console.log("컨텍스트 2");
}

context2();

// 전역 컨텍스트
// 컨텍스트 1
// 컨텍스트 2

위의 예제와 같이 전역 실행 컨텍스트가 먼저 실행되고, 새로운 함수를 호출하게 되면서 새로운 컨텍스트가 만들어지고 실행되며, 종료되면 반환한다. 이렇게 반복 후 전역 실행 컨텍스트의 실행이 완료되면 모든 실행이 끝나게 됩니다.

스코프 체인

자바스크립트의 코드를 이해하려면 스코프 체인의 이해를 필수적으로 해야합니다.
자바스크립트 함수 내의 블록 즉 { } 안에 있는 블록은, 유효 범위가 없습니다.

EX

function example() {
  if () {}
  for () {}
}

위의 예제와 같이 if와 for가 바로 그렇습니다.
오직 함수만이 유효 범위의 한 단위가 되는 것입니다.

이 유효 범위를 나타내는 스코프는 함수 객체 내에서 연결 리스트 형식으로 관리되고, 바로 이것을 스코프 체인이라고 합니다.

스코프체인은 현재 실행 컨텍스트 변수의 객체와 상위 컨텍스트의 스코프 체인을 참조합니다.

EX

const value = "value";

function print(){
  const value = "value2";
  
  function printV() {
    return var;  
  }
  
  console.log(printV());
}

print(); // value2

전역 변수로 var가 "value"라는 값으로 설정되었습니다.
그리고 print 함수에서 또다시 value라는 변수를 "value2"라고 선언했습니다.
print()라는 함수 객체가 처음 생성될 당시 실행 컨텍스트는 전역 객체의 스코프를 참조합니다. 따라서 각 함수가 실행될 때 생성되는 실행 컨텍스트의 스코프 체인은 전역 객체(value)와 그 앞에 만들어진 변수 객체(value2)가 추가되는데요. 그래서 value2가 콘솔에 찍히게 된 것입니다.

클로저

EX

function outerFunc() {
  const x = 1;
  return function() {
  	console.log(x);
  }
}

const newFunc = outerFunc();
newFunc(); // 1

대부분 클로저는 위 패턴으로 구현되는게 일반적입니다.
클로저란 closed, bound라는 의미로, 생명 주기가 끝난 외부 함수의 변수를 참조하는 함수라고 합니다.
즉, 이미 끝난 컨텍스트 안에 있는 변수를 사용하는 패턴인 것이죠.
바로 이런 패턴을 활용한다면 함수형 프로그래밍이 구현 가능해지게 됩니다.

EX

function outerFunc(name, age) {
  function innerFunc(job) {
    console.log(name, age, job);
  }
  return innerFunc;
}

const newFunc = outerFunc("cskim132", 20);
console.log(newFunc("programmer")); // cskim132, 20, programmer

이런걸 흔히 커링이라고도 하죠.

EX

const outerFunc = (name, age) => job => console.log(name, age, job);

console.log(outerFuncs("cskim132", 20)("programmer"));

위와 같은 형식으로도 구현이 가능합니다!

---

마무리

이상 컨텍스트와 클로저에 대해 알아봤습니다.
다음 게시글에선 함수형 프로그래밍에 대해 알아보겠습니다!

출처

• 인사이드 자바스크립트