[JavaScript] 클로저

렉시컬 스코프

스코프란 변수나 함수의 접근가능한 유효 범위를 의미하며, 렉시컬 스코프(정적 스코프) 규칙을 따름
JavaScript 스코프는 전역/로컬 스코프로 나뉘며 렉시컬 스코프 규칙에 따라 결정된다.

❖렉시컬 스코프 규칙:변수가 선언된 위치에 따라 접근 가능 범위가 결정

자바스크립트 변수 참조 과정

함수가 실행될때마다 메모리상에 실행컨텍스트 생성

• 실행컨텍스트 안에는 렉시컬 환경 존재
• 여기에 현재 스코프에서 선언한 모든 변수와 함수들이 저장된 환경 레코드 존재
• 현재 환경에서 찾지 못한 변수 상위 스코프에서 찾기위해 상위 스코프를 가리키는 외부 렉시컬 환경 참조도 갖고있음

코드 상에서 변수나 함수를 참조하면

1. 현재 환경 레코드에서 찾기
2. 외부 렉시컬환경 참조를 통해 상위 스코프 참조
3. 없을경우 전역 스코프까지 올라가며, 없으면 Reference Error

---

클로저 개념을 이해해도 언제 어떻게 쓰이는지 모르겠음

function countWithoutClosure {
  let count = 0;
	return count;
}
console. log(countWithoutClosure()); // '0'
console. log(count); // ReferenceError: count is not defined

렉시컬 스코프 규칙에 따라 함수안에서 선언한 변수는 함수 안에서만 접근 가능

1. 함수가 실행되면 함수 내부 변수(count)는 메모리에 올라감
2. return -> 메모리 상 제거
3. 함수바깥에서는 변수가 제거된 상태이므로 참조 불가

기본적인 closure 형태

클로저는 함수가 생성될 때의 스코프(외부 변수)에 접근할 수 있는 성질을 의미
함수 선언문 바깥에서도 함수 스코프를 참조할 수 있음
React useState에서 클로저 개념 사용

function countWithClosure() {
let count = 0;
return {
  increase: function () {
	count++;
	return count;
	},
  decrease: function () {
	count--；
	return count;
  },
  getCount: function () {
	return count;
  },
 };
}

함수 return문에서 함수 내부의 변수를 사용하는 함수를 다시 return하면 함수 선언문 바깥에서도 스코프에 접근 가능

const counter = countWithClosure;
console. log(counter getCount()); // 0
counter. increase();
console. log(counter.getCount()); // 1
counter. decrease();
console. log(counter.getCount)); // 0

counter 변수: function increase,function decrease,function getCount 클로저에 의해 return될때 함수 실행에 필요한 상위 스코프도 메모리로 가져옴(counter)
--> counter가 클로저에 의해 메모리에 캡쳐되고있음

---

정리

Closre
자바스크립트는 렉시컬 스코프 규칙을 따름
따라서, 일반적인 방식으로는 함수 선언문 밖에서 함수 스코프에 접근할 수 없음 이를 보완하기 위한 방법이 클로저 함수임
클로저 수는 스코프가 상위 함수의 스코프를 참조하는 항수를 return 하는 방식 React의 useState, moment 라이브러리에서 사용하는 방식