코어 자바스크립트 정리 - [5] 클로저

01 - 클로저의 의미 및 원리 이해

클로저(Closure)는여러 함수형 프로그래밍 언어에서 등장하는 보편적인 특징.
어떤 함수 A에서 선언한 변수(B)를 참조하는 내부함수를 외부로 전달할 경우, 함수 A의 실행 컨텍스트가 종료된 후에도 변수(B)가 사라지지 않는 현상.

 

외부 함수의 변수를 참조하는 내부 함수 예제)

var outer = function () {
    var a = 1;
    var inner = function () {
        return ++a;
    }
    return inner;
}
var outer2 = outer();
console.log(outer2());	// 2
console.log(outer2());	// 3

outer 함수의 실행컨텍스트는 종료되었지만, inner 함수에서 변수 a를 참조하고 있으므로, 변수 a는 가비지 컬렉터의 대상이 아님.

 

 

02 - 클로저와 메모리 관리

※ 사용하지 않게 된 클로저에 대해서는 메모리를 차지하지 않도록 관리해줄 필요가 있음.

 

클로저는 어떤 필요에 의해 의도적으로 함수의 지역변수를 메모리를 소호하도록 함.

필요성이 사라진 시점에 참조카운트를 0으로 만들면( 식별자에 기본형 데이터 할당), 가비지컬랙터가 메모리를 회수.

 

var outer = (function () {
    var a = 1;
    var inner = function () {
        return ++a;
    }
    return inner;
})();
console.log(outer());	// 2
console.log(outer());	// 3
outer = null;

 

03 - 클로저 활용 사례

1) 콜백 함수 내부에서 외부 데이터를 사용하고자 할 때

 

2) 접근 원한 제어(정보 은닉)

정보 은닉 : 어떤 모듈의 내부 로직에 대해 외부로의 노출을 최소화해서 모듈간의 결합도를 낮추고, 유연성을 높이는 현대 프로그래밍 언어의 개념.

1. 함수A에 지역변수 및 내부함수를 작성
2. 외부에 접근권한을 주고자 하는 대상으로 구성된 참조형 데이터를 return

var createCar = function () {
    var fuel = Math.ceil(Math.random() * 10 + 10);
    var power = Math.ceil(Math.random() * 3 + 2);
	
    var publicMember = {
        run: function () { ... },
    };
    Object.freeze(publicMember);
    return publicMember;
};
var car = createCar();

car 식별자로는 fuel, power 변수에 접근할 수 없다. run()  함수만 접근 가능.

3) 부분 적용 함수

 n개의 인자를 받는 함수에 미리 m 개의 인자만 념겨 기억시켰다가, 나중에 (n-m)개의 인자를 넘기면 비로소 원래 하수의 실행 결과를 얻을 수 있게끔 하는 함수.

4) 커링 함수

부분 적용 함수와 맥락은 일치하지만 한번에 하나의 인수만 전달, 마지막 인자가 전달되기 전까지는 원본함수가 실행되지 않는다는 특징이 있다.

커링함수 예제)

const LostArkAPIURL_BASE = 'https://developer-lostark.game.onstove.com';
const API_EVENTS = '/events';
const API_NOTICES = '/notices';
const API_CHARACTERS = '/characters';
// 생략 .....

// ES6
const createLostArkAPIURL = baseUrl => category => apiName => { return baseUrl + category + apiName };
// const createLostArkAPIURL = function (baseUrl) {
//     return function (category) {
//         return function (apiName) {
//             return baseUrl + category + apiName;
//         }
//     }
// }

const createCategoryURL = createLostArkAPIURL(LostArkAPIURL_BASE);

const createNewsURL = createCategoryURL('/news');
const createCharactersURL = createCategoryURL('/characters');
const createArmoriesURL = createCategoryURL('/armories');
// 생략 .....

const url_news_events = createNewsURL(API_EVENTS);
const url_news_notice = createNewsURL(API_NOTICES);
const url_character = createCharactersURL('');
const url_armories = createArmoriesURL(API_CHARACTERS);
// 생략 .....

---

참조 : 코어 자바스크립트 ( 정재남 )