클로저란 ?
클로저( Closure )는 Javascript에서 자체 비공개 변수에 접근할 수 있는 함수로, 외부 함수의 실행이 종료된 후에도 외부( Closure ) 함수의 범위에 있는 변수에 접근할 수 있습니다.
즉, 주변 컨텍스트에서 변수를 폐쇄하여 상태를 유지합니다.
클로저의 핵심 내용
1. 외부 함수 ( Enclosing Function ): 클로저는 일반적으로 외부 함수라고 알려진 다른 함수 내에서 생성됩니다.
이 외부 함수는 변수를 정의하고 클로저 함수를 포함할 수 있습니다.
function outer () {
let outerVar = 10;
function closure () {
console.log(outerVar);
}
return closure;
}
const myClosure = outer();
myClosure(); // 10
2. Private Variables: 클로저는 변수를 캡슐화하고 보호하여 클로저 함수에 비공개로 만들 수 있습니다.
위 예제에서 outerVar는 클로저 함수에 비공개 입니다.
3. 외부 함수 스코프에 대한 액세스: 클로저 함수는 외부 함수의 실행이 완료된 후에도 포함하는 (외부) 함수의 변수 및 매개변수에 액세스할 수 있습니다. 이는 Javascript 엔진이 스코프 체인을 그대로 유지하기 때문에 가능합니다.
4. 반환 함수: 종종 외부 함수에서 클로저가 반환되어 외부 함수에서 호출할 수 있습니다.
이를 통해 "함수 팩토리"의 개념과 지속적인 상태의 함수를 생성할 수 있습니다.
const myClosure = outer();
myClosure(); // 10
클로저 사용 사례
1. 데이터 캡슐화 및 개인 정보 보호: 클로저는 일반적으로 개인 변수 및 메서드를 사용하여 개체를 만드는 데 사용됩니다.
이는 Javascript에서 데이터 숨기기 및 추상화를 구현하는 데 도움이 됩니다.
function createPerson (name) {
let privateName = name;
return {
getName: function () {
return privateName;
},
setName: function (newName) {
privateName = newName;
}
};
}
const person = createPerson("Shiro");
console.log(person.getName()); // Shiro
2. Callback: 클로저는 콜백 함수의 기본이므로 나중에 실행해도 원래 컨텍스트에 계속 액세스할 수 있습니다.
function something (callback) {
setTimeout(function () {
console.log("확인");
callback();
}, 1000);
}
something(function () {
console.log("Callback ~");
})
/*
확인
Callback ~
*/
3. Function Factory: 클로저는 지속적인 구성이나 동작을 갖춘 특수 함수를 만들 수 있습니다.
function createMultiple (factor) {
return function (x) {
return x * factor;
};
}
const double = createMultiple(2);
console.log(double(5)); // 10
요약을 하자면, 클로저는 Javascript의 강력하고 다양한 기능입니다.
이는 개인 변수를 생성하고, 상태를 유지하고, 기능을 캡슐화하는 방법을 제공합니다.
효과적인 Javascript 개발을 위해서는 클로저 이해가 중요합니다. 특히 데이터 개인 정보 보호, 콜백 함수 및 동적 함수 생성과 관련된 시나리오에서는 더욱 그렇습니다.
'IT > IT ★★★' 카테고리의 다른 글
| [ JS ] Local Storage, Session Storage, Cookies에 대하여 (1) | 2023.09.15 |
|---|---|
| [ JS ] this란 ? (0) | 2023.09.14 |
| [ JS ] 호이스팅이란 ? (0) | 2023.09.14 |
| [ JS ] 재귀함수 (0) | 2023.02.27 |
| [ Web ] 브라우저 렌더링 ( Browser Rendering ) (0) | 2023.01.30 |
