🦎 [딥다이브 스터디] 23. 실행 컨텍스트, 클로저

실행컨텍스트?

자바스트립트의 동작원리를 담고있다. 소스코드를 실행하는데 필요한 환경을 제공하고, 실행결과를 실제로 관리한다. 즉, 실행 컨텍스트는 식별자를 등록하고 관리하는 스코프와 코드 실행 순서 관리를 구현한 내부 메커니즘으로 모든 코드는 실행 컨텍스트를 통해 실행되고 관리된다. 실행 컨텍스트의 스택은 코드 실행 순서를 관리한다.그렇기에 클로저, 호이스팅, 스코프등의 개념을 이해하는 데 핵심적이다.

(소스코드평가과정)
1.처음 코드를 실행하면 전역 컨텍스크가 생성된다.
2.함수를 호출할 때마다 함수 컨텍스트가 하나씩 더 생긴다.
(소스코드 실행과정 = 런타임)
3.변수는 변수 객체안에서 값을 찾고, 없다면 스코프 체인을 따라 올라가며 찾는다.
4.함수 실행이 끝나면 해당 컨텍스트는 사라진다 (단, 클로저 제외)

“A closure is the combination of a function and the lexical environment within which that function was declared.”
클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경(Lexical environment)과의 조합이다.
(출처: MDN)

자바스크립트 엔진은 함수를 어디서 호출했는지가 아니라 함수를 어디에 정의했는지에 따라 상위 스코프를 결정한다. 이를 렉시컬 스코프(정적 스코프)라 한다. 위 정의에서 말하는 “함수”란 반환된 내부함수를 의미하고 “그 함수가 선언될 때의 렉시컬 환경(Lexical environment)”란 내부 함수가 선언됐을 때의 스코프를 의미한다. 즉, 클로저는 반환된 내부함수가 자신이 선언됐을 때의 환경(Lexical environment)인 스코프를 기억하여 자신이 선언됐을 때의 환경(스코프) 밖에서 호출되어도 그 환경(스코프)에 접근할 수 있는 함수를 말한다. 이를 조금 더 간단히 말하면 클로저는 자신이 생성될 때의 환경(Lexical environment)을 기억하는 함수다라고 말할 수 있겠다.

//example

const x = 1;

function foo() {
  const x = 10;
  bar();
}

function bar() {
  console.log(x);
}

foo(); //1 
bar(); //1 

// 두 함수 모두 전역에서 정의 되었기 때문에, bar()는 foo() 내부 변수에 접근 불가능.

호이스팅?

호이스팅이란 변수를 선언하고 초기화했을 때 선언 부분이 최상단으로 끌어올려지는 현상을 의미한다. 변수는 선언부분만 끌어올려진다. 함수 표현식이 아니라 함수 선언식일 때는 식 자체가 통째로 끌어올려진다. 즉 선언과 동시에 대입된다. 그래서 호출을 선언 이전에 해도 동작한다. 단, 표현식으로 선언한 경우 에러 발생.

클로저?

클로저는 js만의 개념은 아니다. 함수를 일급객체로 취급하는 함수형 프로그래밍 언어에서 사용되는 중요 특성이다. 자바스크립트의 모든 함수는 상위 스코프를 기억하며, 어디서 호출하든지 상관없이 유지된다. 그러나, 상위 스코프의 어떤 식별자도 참조하지 않는 함수는, 브라우저의 최적화를 위해 상위 스코프를 기억하지 않는다. 클로저는 1. 중첩 함수가 상위 스코프의 식별자를 참조하고 있고 2.중첩 함수가 외부 함수보다 더 오래 유지되는 경우에 한정하는 것이 일반적이다.

//클로저라고 하지 않는다.
function foo() {
  const x = 1;
  
  //상위 스코프의 식별자를 참조하지 않는다.
  function bar() {
    const z = 3;
    debugger;
    console.log(z);
  }
}

function foo() {
  const x = 1;
  
  //bar는 클로저였지만 곧바로 소멸하며 외부로 반환되지 않는다.
  //클로저라고 하지 않는다.
  function bar() {
    console.log(x);
  }
  bar();
}

foo();

function foo() {
  const x = 1;
  
  //클로저
  //외부 함수보다 더 오래 유지되며 상위 스코프의 식별자를 사용한다.
  function bar() {
    console.log(x);
  }
  return bar();
}

const bar = foo();
bar();

클로저를 사용하는 이유

1. 클로저는 상태가 의도치 않게 변경되지 않도록 안전하게 은닉하고 특정 함수에게만 상태 변경을 허용하여 상태를 안전하게 변경하고 유지하기 위해 사용한다. (불변성 유지) 일반적으로 변수 값은 누군가에 의해 언제든지 변경될 수 있어 오류 발생의 근본적 원인이 될 수 있다. 외부 상태 변경이나 가변 데이터를 피하고 불변성을 지향하는 함수형 프로그래밍에서 부수 효과를 최대한 억제하여 오류를 피하고 프로그램의 안전성을 높이기 위해 클로저는 적극적으로 사용된다.

2. 클로저가 가장 유용하게 사용되는 상황은 현재 상태를 기억하고 변경된 최신 상태를 유지하는 것이다.
   클로저는 현재 상태를 기억하고 이 상태가 변경되어도 최신 상태를 유지해야 하는 상황에 매우 유용하다. 만약 자바스크립트에 클로저라는 기능이 없다면 상태를 유지하기 위해 전역 변수를 사용할 수 밖에 없다. 전역 변수는 언제든지 누구나 접근할 수 있고 변경할 수 있기 때문에 많은 부작용을 유발해 오류의 원인이 되므로 사용을 억제해야 한다.

function makeCounter(){
	let num = 0; //은닉화 
    return function(){
    	return num++;
    }
}

let counter = makeCounter();
console.log(counter()); //0;
console.log(counter()); //1;
console.log(counter());//2; 




function Counter() {
  // 카운트를 유지하기 위한 자유 변수
  var counter = 0;

  // 클로저
  this.increase = function () {
    return ++counter;
  };

  // 클로저
  this.decrease = function () {
    return --counter;
  };
}

const counter = new Counter();

console.log(counter.increase()); // 1
console.log(counter.decrease()); // 0

출처:
https://poiemaweb.com/js-closure