[TIL] 클로저 😧

클로저(Closure)

• 외부함수의 변수에 접근할 수 있는 내부함수
• 함수와 함수가 선언된 어휘적 환경의 조합 (어휘적(lexical) 환경; 변수 및 함수선언의 형태)

함수를 리턴하는 함수

// 화살표 함수(중괄호도 없다!)
const add = (x, y) => x + y;
add(1, 2); // 3;


// 화살표 함수로 표현한 함수 안의 함수
const adder = x => y => x + y;
adder(5); // y => x + y; // 이때 x에 5가 뜨진 않지만 5가 입력된 상태
adder(5)(5); // 10; // 함수를 2번 출력한다.


// 함수 표현식으로 
const adder = function(x) {
	return function(y) {
    	return x + y;
    }
}

typeof adder(2) // 'function'
typeof adder(2)(2) // 'number'

• 클로저 함수 & 스코프
  - function(x); 외부함수, function(y); 내부함수
  -> 내부함수는 외부함수의 변수에 접근 가능하다.
  
  
  

클로저 함수의 활용

• 일반 함수는 함수실행 후 함수 내부에서 선언한 변수를 사용할 수 없다.

function value0 () {
    let value = 0; 
	return value; 
}

console.log(value); // Uncaught ReferenceError: value is not defined
value0 (); //0   

- 클로저 함수는 외부 함수 실행 후 내부에 선언된 변수가 메모리에 저장되어 사용 가능하다.

// 예시 1)
const adder = function(x) {
	return function(y) {
    	return x + y;
    }
}

const add5 = adder(5); // 전달인자 5를 매개변수 x에 담은 상태
add5(1) // 6


// 예시 2)
// 2-1) 화살표 함수
const tagMaker = tag => content => `<${tag}>${content}</${tag}>`

// 2-2) 함수 표현식
const tagMaker = function(tag) {
	return function(content) {
    	return `<${tag}>${content}</${tag}>`
    }
}

const divMaker = tagMaker('div'); // 
console.log(divMaker); ƒ (content) {
    						return `<${tag}>${content}</${tag}>`
    					}
divMaker('hello'); // <div>hello</div>

** 클로저는 특정 데이터(tag)를 스코프 안(function(tag))에 가둔 채로 계속 사용할 수 있게 한다.

클로저 모듈패턴

// 화살표 함수
const makeCounter = () => {
	let value = 0;
    
    return {
    	increase: () => {
        	value = value + 1
        },
        decrease: () => {
        	value = value - 1
        },
        getValue: () => value
    }
}

const counter1 = makeCounter();
counter1 = {increase: ƒ, decrease: ƒ, getValue: ƒ};
typeof counter1; // 'object'



// 함수 표현식으로 만들어보기(실패)
// const makeCounter = function () {
// 	let value = 0;
//     return { 
//     	const increase: funtion () {
//         	value = value + 1;
//         const decrease: funtion () {
//         	value = value - 1;
//         const getValue: getValue () {
//         	value;
//            }
//          }
//        }
//     }
// }

• makeCounter함수를 바꾸지 않고 value 값을 재할당할 수 없다.
  -> [캡슐화; 정보 접근 제한] 외부스코프에서 내부스코프의 변수에 접근할 수 없기 때문
  => makeCounter 함수 스코프로 value를 감싸지 않으면 value값은 전역변수가 됨(side effect 🚫)
• 클로저 함수를 통해 전역변수 사용을 줄이고, 스코프를 통해 값을 안전하게 다룰 수 있음
  
  
• 내부함수를 이용한 간접적인 value 값의 재할당(모듈화)

const counter1 = makeCounter();
counter1.increase(); // 0 + 1 = 1
counter1.increase(); // 1 + 1 = 2
counter1.decrease(); // 2 - 1 = 1
counter1.getValue(); // 1;


const counter2 = makeCounter();
counter2.increase(); // 0 + 1 = 1
counter2.decrease(); // 1 - 1 = 0
counter2.decrease(); // 0 - 1 = -1
counter2.getValue(); // -1;

counter1과 counter2에서의 value값은 각각 보존됨