🙋 클로저?
클로저는 함수가 선언될 때의 스코프를 기억해서 함수가 생성된 후에도 그 스코프에 접근할 수 있는 기능!
클로저는 자바스크립트의 함수가 일급 객체라는 특성과 렉시컬 스코프의 조합으로 만들어진다.
🧑💻 클로저 예시 코드
function outerFunction(outerVariable) {
return function innerFunction(innerVariable) {
console.log('Outer Variable: ' + outerVariable);
console.log('Inner Variable: ' + innerVariable);
};
}
const newFunction = outerFunction('outside');
newFunction('inside');-
outerFunction('outside')를 호출하면
outerVariable에 'outside'가 들어간다. -
return 값으로 innerFunction이 리턴됨
그런데 그냥 함수가 아니라, outerVariable 값을 “기억한 채” 리턴됨 -
const newFunction = outerFunction('outside');
이제 newFunction은 사실 innerFunction
게다가 outerVariable = 'outside' 라는 정보를 기억하고 있음. -
newFunction('inside');
여기서 innerVariable = 'inside'
그리고 outerVariable도 기억하고 있으므로
출력값 :
Outer Variable: outside
Inner Variable: inside
❓ 클로저는 언제 활용할까?
1. 데이터 은닉
클로저는 외부에서 접근할 수 없는 비공개 변수와 함수를 만들 수 있다.
데이터 은닉, 외부 접근 막는다 ➡️ 데이터 무결성 유지 가능
function createCounter() {
let count = 0; // 외부에서는 접근 불가능한 변수!
return {
increment: function() {
count++;
console.log('Count:', count);
},
getCount: function() {
return count;
}
};
}
const counter = createCounter();
counter.increment(); // Count: 1
counter.increment(); // Count: 2
console.log(counter.getCount()); // 2
console.log(counter.count); // undefined! 접근 불가!increment()와 getCount() 함수는 count를 기억하고 있어서
클로저를 통해 접근 가능하다.
그래서 count를 조작하거나 확인할 수 있는 유일한 방법은
increment()와 getCount()를 통해서만 가능하다.
2. 비동기 작업
클로저는 비동기 작업에서 이전의 실행 컨텍스트를 유지해야 할 때 유용하다.
함수 실행 시점의 변수를 참조할 수 있게 한다.
function createLogger(name) {
return function() {
console.log(`Logger: ${name}`);
};
}
const logger = createLogger('MyApp');
setTimeout(logger, 1000); // 1초 후에 'Logger: MyApp' 출력내부 함수는 클로저이기 때문에 name 변수에 MyApp을 저장하여 1초 후에도 해당 값이 유지되어 출력이 된다.
3. 모듈 패턴 구현
모듈 패턴 : 특정 기능 캡슐화, 선택적으로 외부에 노출, 코드의 응집력🔝, 유지보수성 향상
클로저를 활용해서 필요한 함수와 데이터만 외부에 노출시키면서 모듈 패턴 구현 가능
매일메일 매일 할 수 있을지....1일차 시작!
