클로저

hzn·2022년 9월 6일
0

JavaScript

목록 보기
6/17
post-thumbnail

클로저

  • 외부함수의 실행 컨텍스트가 종료된 후에도 해당 함수에서 선언된 변수가 사라지지 않고 🌟메모리를 계속 차지🌟하는 현상

  • 중첩 함수에서 상위 스코프의 식별자를 참조하고 있고, 해당 상위 스코프(외부 함수)의 실행 컨텍스트가 끝나도 해당 함수(내부 함수)가 계속 그 식별자를 참조하면서 식별자가 메모리를 계속 차지하고 있다면 클로저 함수이다.

클로저의 특징

1. 함수를 리턴하는 함수 형태

const adder = function(x) {
	return function(y) {
		return x+y;
    }
}

2. 내부 함수는 외부 함수의 변수에 접근 가능

  • 외부 함수는 내부 함수의 변수에 접근 불가

3. 외부 함수의 실행이 끝나도 데이터가 사라지지 않고 메모리를 차지

  • 외부 함수의 실행이 끝나도 외부 함수 내 변수가 메모리 상에 저장되어 있다.

클로저의 사용

  • 어떤 변수(식별자)을 특정 함수에 의해서만 바꾸고 싶을 때, 변수와 함수를 외부 함수로 감싸고 함수를 리턴하는 방식으로 클로저를 만든다.

클로저 적용 전

let count = 0; // 전역 변수 (어디서든 접근 가능)
function countPlus() {
  count = count + 1;
}
...
// 1억 개의 어떤 코드...
count = 100 // 아무데서나 count에 접근해 값을 할당할 수 있다. 
console.log(count) // 100 

이런 상황을 막고 싶다면...

클로저 적용 후

function outer() {
	let count = 0;
	function countPlus() {
		  count = count + 1;
	}
	return countPlus; // 사용할 함수를 return해줘서 외부에서 접근할 수 있게 한다. 
}
...
// 1억개의 코드
// 이제 외부에서는 countPlus 함수를 통하지 않고는 변수 count에 접근할 수 없음.

0개의 댓글