Unit 9. [JS]클로저

📣  클로저 함수

✔️ 화살표 함수

const add = (x, y) => x + y;
add(5, 7)	// 12

 

✔️ 화살표를 두 번 사용

const adder = x => y => x + y;
adder(5)(7);	// 12

typeof adder(5)	// 'function'

adder(5)	//	y => x + y 얘 자체가 리턴값임.

함수의 호출이 두 번 발생한다. 
adder(5)의 리턴 값이 함수임을 의미 -> (y => x + y) 자체가 adder(5)의 리턴값이다.

 

✔️ 클로저 함수의 기본 형태

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

1️⃣ 함수를 리턴하는 함수
2️⃣ 클로저의 핵심은 '스코프를 이용해서 변수의 접근을 닫는(closure) 데'에 있다.
➰ 리턴하는 함수에 의해 스코프가 구분된다.
➰ 위 예시에서 x가 선언된 함수는 '외부 함수', y가 선언된 함수는 '내부 함수'라고 부른다.
=> 이 클로저 함수는 스코프가 분리되어 있다는 의미.
🚨 내부 함수에 선언된 변수는 외부 함수가 사용할 수 없다.
🚨 3️⃣ 외부 함수에 선언된 변수는 내부 함수가 사용할 수 있다.

 

📣  클로저의 활용

✔️ 외부 함수의 실행이 끝나더라도, 외부 함수 내 변수가 메모리 상에 저장된다.

const adder = function(x) {
	return function(y) {
    		return x + y;
    	}
}
const add5 = adder(5);	// y => x + y 여기서 x에 5라는 값이 담겨있음.
add5(7)	// 12	y에 7이라는 값을 넣음.
add5(10)	// 15

변수 add5 에는 클로저를 통해 리턴한 함수가 담겨 있다.
add5 는 adder 함수에서 인자로 넘긴 5라는 값을 x 변수에 계속 담고있다. (외부 함수의 실행이 끝났는데도)
외부 함수 실행은 이미 끝났지만, add5(7) 처럼 x=5 라는 값은 사용 가능하다. 

 

✔️ 클로저로 HTML 문자열 만들기

const tagMaker = tag => content => `<${tag}>${content}</${tag}>`

const divMaker = tagMaker('div');
divMaker('hello');	// '<div>hello</div>' 외부 함수가 끝나도 tag는 계속 div를 담고 있고 사용가능함.
divMaker('codestates');	// '<div>codestates</div>'

const anchoMaker = tagMaker('a');
anchoMaker('go');	// '<a>go</a>'
anchorMaker('urclass');	// '<a>urclass</a>'

특정 데이터를 스코프 안에 가두어 둔 채로 계속 사용할 수 있게 해준다.

 

✔️ 클로저 모듈 패턴

✔️ 모듈화 : 함수의 재사용성을 극대화하여 함수 하나를 완전히 독립적인 부품 형태로 분리하는 것.

const makeCounter = () => {
	let value = 0;
    
    return {
    	increase: () => {
        	value = value + 1
        },
        decrease: () => {
       		value = value - 1
        },
        getValue: () => value
        }
    }
    const counter1 = makeCounter();
    
    counter1.increase();
    counter1.decrease();
    counter1.getValue();	// 0
    
    const counter2 = makeCounter();
    counter2.decrease();
    counter2.decrease();
    counter2.getValue();	// -2

내부 함수를 객체에 담아 여러 개의 내부 함수를 리턴하도록 만든다.
counter1 은 { increase: f, decrease: f, getValue: f } 객체이다.

🚨 어떤 경우에도 value 는 직접 수정이 불가능 하다 -> 외부 스코프에서는 내부 스코프의 변수에 접근 할 수 없기 때문
➰ 대신, 리턴하는 객체가 제공하는 메서드를 통해 value 값을 간접적으로 조작 할 수 있다. -> 정보의 접근 제한(캡슐화)

만약 스코프로 value를 감싸지 않았다면 value를 다루기 위해서는 value의 값이 전역 변수여야 했을 것이다.
클로저로 불필요한 전역 변수 사용을 줄이고 , 값을 안전하게 다룰 수 있다.

counter1과 counter2에서 value는 각각 독립적이라서 서로에게 영향을 끼치지 않는다.