[JS] Chapter 8. 클로저

 

 

 

 

 

 

 

 

클로저

 

함수를 리턴하는 함수

 

// 클로저 함수의 기본 형태
const adder = function (x) {
	return function(y) { // 리턴값이 함수의 형태
		return x+y;
	}
}

 

 

외부 함수와 내부 함수

 

리턴하는 함수에 의해 스코프(변수의 접근 범위)가 구분됨

 

const adder = function (x) {
	return function(y) { 
		return x+y; // 함수 안의 함수가 내부 함수
	} // 전체가 외부 함수
}

 

실습) 외부 함수는 y에 접근 가능한가?

 

      내부 함수는 x에 접근 가능한가?

 

바깥 스코프에서는 안쪽 스코프 접근 불가 정답 : x

바깥 스코프에서 선언한 변수 접근 가능 정답 : o

 

 

클로저의 활용

 

☑️ 데이터를 보존하는 함수

 

외부 함수의 실행이 끝나더라도, 외부 함수 내 변수 사용 가능

html에서도 활용 가능

 

☑️ 클로저 모듈 패턴

 

const makeCounter = () => {
	let value = 0;

	return {
		increase: () => {
			value = value + 1
		}, // 내부 함수 1
		decrease: () => {
			value = value - 1
		}, // 내부 함수 2
		getValue: () => value
	} // 내부 함수 3
}

const counter1 = makeCounter();
counter1 // {increase: f, decrease: f, getValue: f }

 

 

정보의 접근 제한 (캡슐화)

Q) value 라는 변수에 값을 새롭게 할당 가능한가?

A) X 스코프 규칙에 의해 불가능

→ 전역변수로 value를 선언하는 것이 좋치 않기 때문