[Tech] 클로저와 렉시컬 스코프/환경

클로저(Closure)란?!

클로저는 내부 함수가 자신이 선언될 때의 환경의 범위(= Lexical Scope)를 기억하여,
함수가 해당 범위 밖에서 호출되어도 해당 범위에 접근할 수 있는 함수를 말한다.

function 외부함수() {
    var 값 = 10;
    var 내부함수 = function () { console.log(값); };
    return 내부함수;
}

var 내부호출 = 외부함수();
내부호출();

• 위의 예시처럼, 외부함수는 내부함수를 반환하고 호출 스택에서 제거된다.

• 따라서, 마치 내부함수는 외부함수의 변수에 접근하지 못한 것처럼 보인다.

• 그러나, 자신을 포함한 외부함수보다 내부함수가 더 오래 유지되면,
  내부함수가 범위 밖에서 호출되어도 외부함수의 지역 변수에 접근할 수 있다!

이러한 함수를 클로저(Closure)라 한다!

---

클로저는 어디서 사용하나?!

• 클로저를 주로 사용하는 이유는 전역 변수의 단점을 피하기 위해서다.
  • 전역 변수의 단점: 어디서나 접근과 변경이 가능해서 여러 오류를 범할수 있음.
• 따라서, 상태 유지에서도 사용된다.
• 더불어, 정보 은닉과 캡슐화를 위한 방식으로도 활용된다.

---

렉시컬 스코프(Lexical Scope)란?!

• 변수(함수)가 있으면, 해당 변수(함수)가 유효한 스코프를 따진다.
• 여기서 말하는 스코프(=scope)는 말 그대로 범위를 말하며, 흔히 전역(global)인가, 지역(local)인가로 구분한다.

그렇다면, 여기서 말하는 렉시컬 스코프(Lexical Scope)는!

• 이런 범위가 어디서 선언했는지에 따라 결정되는 것을 의미한다.

• 다른 말로 정적 스코프(Static Scope)라고도 한다.

  var 값 = 25;
  
  function 함수1() {
    var 값 = 50;
    함수2();
  } 
  
  function 함수2() { console.log(값);}
    
  함수1();
  함수2();
  

  • 해당 예제에서, 각각의 함수를 호출하면, 두 함수 모두 동일하게 25가 출력된다.
  • 이는 값이라는 변수가 최초에 가장 외부인 곳에서 선언되었으로, 해당 범위가 전역으로 결정되었기 때문이다!

반대로, 어디서 호출 했는가에 따라 정해지는 동적 스코프도(Dynamic Scpoe)도 존재한다.

---

렉시컬 환경(Lexical Invirionment)란?!

• 렉시컬 환경은 실행 컨텍스트(Execution Context)의 Record와 Outer를 포함한다.
• 이는 식별자(변수, 함수)와 식별자의 값, 스코프 체인을 포함한 자료구조를 말한다.
• 함수 호출 때 마다, 새로운 렉시컬 환경이 생성되며, 이는 현재 실행 중인 코드 블록의 식별자 정보를 관리한다.
• 그리고 함수 실행이 종료되면, 해당 렉시컬 환경은 제거된다.

렉시컬 환경의 구성 요소

실행 컨텍스트의 Record(Environment Record)

• 현재 스코프에 속한 모든 지역 변수를 저장하는 구조
• 선언적 환경(변수 및 함수 선언) + 객체 바인딩을 포함한 환경을 의미.

실행 컨텍스트의 Outer(Outer Environment Reference)

• 현재 스코프의 외부 스코프(부모 스코프)를 참조
• 이 특징으로, 스코프 체인을 형성하여 현재 스코프에 없는 식별자를 찾을 수 있도록 함.

---

✨ 출처

프론트엔드 기술 면접 질문
Blog, [JS] 📚 클로저 (Closure) 개념 완벽 정리
Blog, [태기의 개발] 렉시컬 스코프
Blog, [JavaScript] 렉시컬 환경 (Lexical Environment)

---