클로저

클로저(Closure)

자바스크립트 언어만의 고유 개념은 아님.
일급 객체로서의 함수 개념이 존재하는 언어에서 사용되는 개념. (js, python, swift, go.. )
렉시컬 스코프(Lexical Scope) 사용

✔ 일급 객체

일급 객체 (first-class object): 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체

• 1. 변수에 함수를 할당
• 2. 함수를 인자로 다른 함수에 전달(콜백, 고차함수를 작성하는데 사용)
• 3. 함수를 반환(함수는 값으로 취급. 팩토리, 클로저를 작성하는데 사용)
• 4. 객체의 프로퍼티로 함수를 할당
• 5. 배열의 요소로 함수를 할당 가능
     함수를 일급 객체로 취급함으로써 코드를 더 간결하게 짤 수 있고, 모듈화된 형태로 작성 가능하게 해준다.

외부에 있는 변수가 내부에 있는 함수와 함수 호출한 후에도 종료되지 않고 계속 참조 하는 것.
외부의 변수와 내부의 함수가 끊기지 않고 연결고리가 계속 이어져 있는 것.

[1]: 클로저 코드1 --> 바깥쪽에 있는 함수의 변수를 내부 함수가 참조하는 것

const external = () => {
  let number = 65;
  let internal = () => {
    let char_ = String.fromCharCode(number);
    console.log(char_, number++); // internal 함수 내부에서는 number가 없으므로 상위로 올라가서 number를 찾음
    // console.log(number);
  };
  internal();
};

external(); // A 65
external(); // A 65 ..?
external();

console.log('-----------------------------');

[2]: 클로자 코드2

const external2 = () => {
    let number = 65;
    let internal = () => {
        let char_ = String.fromCharCode(number);
        return `${char_}: ${number++}`; // 함수형 프로그래밍에서는 자꾸 return 해주는 것이 좋음.
    };
    return internal();
};
console.log(external2()); // A: 65
console.log(external2()); // A: 65
console.log(external2()); // A: 65 ...

console.log('-----------------------------');

[3]: 클로저 코드3

const out = () => {
    let number = 65;
    let internal = () => {
        let char_ = String.fromCharCode(number);
        return `${char_}: ${number++}`; // 함수형 프로그래밍에서는 자꾸 return 해주는 것이 좋음.
    };
    return internal; // 함수의 실행 결과가 아닌 함수 자체를 반환하면 외부와 연결고리가 계속 남게 된다.
};

const out2 = out();
console.log(out2());
console.log(out2());
console.log(out2());
console.log(out2());

[4]: 클로저 코드3 (이벤트 리스너)

// 클로저 사용 x 코드.. 비효율 적으로 리스너 실행때마다 변수 선언, 상태유지 X
document.getElementById("btn").addEventListener("click", function () {
	const count = 0;
  	console.log(count + 1);
});

// 클로저 사용 코드. 불필요한 변수선언 줄이고, 상태 유지 가능
function makeCounter() {
	let count = 0;
  	return function () {
      count++;
      console.log(count);
    }
}

const counter = makeCounter();

document.getElementById("btn").addEventListener("click", counter);

🤞클로저를 사용함으로서 장점

• 캡슐화로 변수를 외부에서 직접 접근할 수 없게 보호 활 수 있다.
• 상태 유지로 함수 호출이 종료된 후에도 변수를 유지할 수 있다.
• 이벤트 리스너에 불필요한 변수 선언을 줄이고, 불필요한 DOM 접근을 줄일 수 있다.
  불필요한 변수 선언을 줄임 (매번 새로 선언되는 문제 해결)
  DOM 접근을 최소화하여 성능 최적화 가능 (한 번만 탐색 후 재사용)