렉시컬 환경과 클로저

 

Throttling을 알아보다가 렉시컬 환경과 클로저에 대한 이야기가 나와서

꼭 이 부분을 학습해야 편할 것 같아 이래저래 찾아보고 열심히 학습해보았다

 

렉시컬 환경(Lexical Environment) -> 어휘적 환경?

• 코드가 작성된 그 문맥의 환경을 의미 -> 약간 범위를 나타내는 말로 유추가 됨
• 변수나 함수가 선언된 위치에 따라 해당 변수나 함수가 접근할 수 있는 범위가 결정됨 -> 참 말이 어려움ㅋㅋㅋㅋ

function outer() {
  let x = 10;  // 렉시컬 환경의 일부
  
  function inner() {
    console.log(x);  // inner 함수는 outer의 렉시컬 환경에 접근 가능
  }
}

 

코드로 보면 조금이나마 이해가 되는데 그렇다면 함수안에 있는

내부 함수들은 자신의 영역 밖의 변수나  함수에게 접근이 가능한 것일까? -> 가능함!!!!

 

이를 스코프 체인(Scope Chain)이라고 하며 코드와 특징을 살펴볼까유

function outer() {
  let name = '김코딩';     // outer 함수의 변수
  
  function inner() {
    let greeting = '안녕하세요';  // inner 함수의 변수
    console.log(`${greeting}, ${name}`);  // outer의 name에 접근 가능
  }
  
  inner();  // "안녕하세요, 김코딩"
  // console.log(greeting);  // ❌ Error: greeting은 접근 불가
}

• 안쪽 함수(inner)는 바깥쪽 함수(outer)의 변수에 접근 가능
• 바깥쪽 함수(outer)는 안쪽 함수(inner)의 변수에 접근 불가능
• 이런 흐름으로 계속 바깥으로 확장하고 확장하고 이런 느낌

따라서 각 함수들이 다른 함수의 변수에 접근하는 것은 

 

안쪽에서 바깥쪽으로 접근 가능한 것 = 스코프 체인

변수를 찾을 때 안쪽에서 바깥쪽으로 찾아가는 것 = 스코프 체이닝 이라고 함!

 

따라서 정리를 하자면 모든 함수는 자신만의 렉시컬 환경이라는 것을 가지고 

 

만약 한 함수가 내부  함수라면 그 함수는 외부 렉시컬 환경에 접근이 가능한 것이며

이를 스코프 체인 혹은 스코프 체이닝을 사용한다고 보면 되며

더 쉽게 정리하자면 렉시컬 환경이란

각 함수의 스코프 즉, 범위!!!!!!!!!

 

이제 렉시컬을 이해했으니 클로저 활용에 대해서 다시 이해해볼까..

 

클로저

---

 

클로저 활용

 

코드 예시 ( throttling 관련 코드임)

let isThrottled = false;  // 외부 변수

return (...args: Parameters<T>) => {  // 내부 함수
  // 이 함수는 isThrottled 변수를 기억하고 접근
}

• 클로저는 함수와 그 함수가 선언된 렉시컬 환경의 조합임
• isThrottled 변수는 외부 함수(throttle)의 스코프에 있음
• 반환되는 내부 함수는 외부 스코프의 isThrottled에 접근 가능
• 이를 통해 쓰로틀링 상태를 유지하고 관리할 수 있음

---

그니까  클로저를 활용해서 내부 함수와 외부 함수 사이의 연결 고리를 제공하고

이로 인해 두 함수 범위 내에서 변수에 접근할 수 있는 스코프 체인을 만들어 줌으로서

내부 함수에서 외부 함수에 있는 isThrottled라는 변수를 읽고 변경할 수 있게 되어

쓰로틀링의 상태를 유지하고 관리한다! -> 캬

 

따라서 클로저란 함수 안에 또 다른 함수가 존재할 때,

내부 함수가 외부 함수의 렉시컬 환경에 있는 변수에 접근하고

이를 읽거나 변경할 수 있도록 스코프 체인을 활용하는 메커니즘이며

이를 통해 함수 실행이 끝나도 외부 함수의 변수 상태를 유지하고 관리할 수 있게 되는 것!!

 

 

마치며

잘 정리가 된건진 몰라도 머리속으로 이해가 어느정도 되어서 만족스럽다 이걸로 끝!