자바스크립트 핵심개념 2탄 (실행 컨텍스트 / 클로저 개념에 대해)

이병수·2020년 10월 22일

오늘은 자바스크립트 핵심개념 2탄 실행컨텍스트와 클로저의 개념에 대해 알아보자! 그럼 let's get it 💕🤘

이 글은 zerocho의 강의 및 블로깅 개념을 혼자 소화할 목적으로 쓴 글으로 공부를 목적으로 본다면 위 사이트에서 공부하기를 추천드립니다:)

실행 컨텍스트

개념

실행 가능한 코드를 형상화하고 구분하는 추상적인 개념이라고 정의하면 된다.
쉽게 말하자면 코드들이 실행되기 위한 환경이라고 이해하면 될 것 같다.
(코드가 실행된다면 Execution Context 내부에서 실행되고 있는 것이다.)

자바스크립트 엔진에서 코드를 실행하기 위해서는 실행에 필요한 정보를 알고 있어야한다.
실행컨텍스트는 자바스크립트가 왜 그렇게 동작하는 지를 알려주는 핵심 개념이다. 예제를 통해 알아보자~!

var name = 'zero'; // (1)변수 선언 (6)변수 대입
function wow(word) { // (2)변수 선언 (3)변수 대입
  console.log(word + ' ' + name); // (11)
}
function say () { // (4)변수 선언 (5)변수 대입
  var name = 'nero'; // (8)
  console.log(name); // (9)
  wow('hello'); // (10)
}
say(); // (7)

이전 블로깅를 봤다면 손쉽게 'nero hello zero'가 반환되는 것을 알 수있다.

처음 코드를 실행하는 순간 모든 것을 포함하는 전역 컨텍스트가 생긴다. 이것은 모든 것을 관리하는 환경이며 페이지가 종료될 때까지 유지된다.
전역컨텍스트 말고도 함수 컨텍스트가 있는데 함수를 호출할 때마다 함수 컨텍스트가 하나씩 생긴다.

컨텍스트의 네 가지 원칙

먼저 전역 컨텍스트 하나 생성 후, 함수 호출 시마다 함수 컨텍스트가 생긴다.

컨텍스트 생성 시 컨텍스트 안에 변수객체(arguments, variable), scope chain, this가 생성긴다.

컨텍스트 생성 후 함수가 실행되는데, 사용되는 변수들은 변수 객체 안에서 값을 찾고, 없다면 스코프 체인을 따라 올라가며 찾는다.

함수 실행이 마무리되면 해당 컨텍스트는 사라진다.(클로저 제외) 페이지가 종료되면 전역 컨텍스트가 사라진다.

위 예를 통해 컨텍스트의 생성과정에 대해 알아보자

전역 컨텍스트

'전역 컨텍스트': {
  변수객체: {
    arguments: null,
    variable: ['name', 'wow', 'say'],
  },
  scopeChain: ['전역 변수객체'],
  this: window,
}

함수 컨텍스트


'say 컨텍스트': {
  변수객체: {
    arguments: null,
    variable: ['name'], // 초기화 후 [{ name: 'nero' }]가 됨
  },
  scopeChain: ['say 변수객체', '전역 변수객체'],
  this: window,
}


'wow 컨텍스트': {
  변수객체: {
    arguments: [{ word : 'hello' }],
    variable: null,
  },
  scopeChain: ['wow 변수객체', '전역 변수객체'],
  this: window,
}

클로저

정의

자신이 생성될때의 환경을 기억하는 함수

자바스크립트는 함수 안에서도 함수를 선언 할 수 있다. 전자를 외부함수라 정의하고 후자를 내부함수라 정의해보면 기본적으로 내부함수는 외부함수의 요소에 접근이 가능한데 외부함수에서 그 함수의 수명이 다 하여 외부함수가 종료된 후에도 외부함수의 변수에 내부함수가 접근 할 수 있는 메커니즘을 클로져라고 한다.

예시

function outer() {
  var a = 1;
  var b = 'B'; 
  
  function inner() {
  var a =2 ;
  console.log(b);
  }
  return inner 
}

var someFun = outer();
someFun();

다른 언어의 경우 outer 내부에 선언된 변수는 outer가 실행된 순간, 리턴되면 b의 변수는 사라진다고 생각 하지만 자바스크립트에서는 클로저의 기능으로 생성한 시점의 스코프를 들고 있음

다른 예시를 보자

function outter() {
  var titile = 'coding everybody';
  return function() {
    alert(title);
  }
}
inner = outter();
inner();

outter 함수 return 값이 inner라는 변수에 할당되고 outter 함수는 종료가 된다. 다른 언어의 경우 outter함수가 종료가 되므로 title 변수가 사라지는데 자바스크립트는 자신이 생성될 때의 환경을 기억해서(생성 시점 스코프를 들고있음) title 변수에 접근하여 'coding everybody'라는 출력값을 가져온다.

추가 예제 : https://yuddomack.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%81%B4%EB%A1%9C%EC%A0%80Closure