자바스크립트 클로저(Clouser) 개념 잡기

클로저란 무엇인가.. 클로저는 저도 아직 개념잡기가 힘들고, 아직 까진 실무에 활용해 본 적이 없는데 만약에 실무에 사용을 하게 된다면 따로 포스팅을 하는걸로..

클로저란 무엇일까 ?

쉽게 말해 함수 내부에 만든 지역 변수가 사라지지 않고 계속해서 값을 유지하고 있는 상태를 말합니다.

1
2
3
4
5
6
function 외부함수() {
    var 변수A;
    function 내부함수() {
        변수A 사용;
    }
}

클로저는 일종의 현상이기 때문에 정해진 문법은 없습니다. 그래도 표현하자면 위의 문법처럼 내부함수에서 내부함수를 표현하고 있는 함수(외부함수)의 변수 A를 사용하는 구조인 경우로 표현할 수 있으며 내부 함수를 클로저 함수라고 부릅니다. 또한 변수A는 클로저 현상에 의해 외부함수() 호출이 끝나더라도 사라지지 않고 값을 유지하게 됩니다.

함수를 호출할 때마다 1씩 증가하는 API를 만들었습니다. 아래 예제는 1만 세번 출력되네요. 왜냐하면 함수가 끝나고 다시 실행하게 되면 var count는 0으로 초기화되어 증감연산자를 통해 1이되어 리턴되기 때문입니다.

1
2
3
4
5
6
7
8
9
10
function addCount() {
    var count = 0;
    count++;
 
    return count;
}
 
console.log(addCount()); //1출력
console.log(addCount()); //1출력
console.log(addCount()); //1출력

물론 아래와 같이 전역변수를 선언하여 addCount()를 호출하는 것도 하나의 방법이지만 클로저를 사용한 것이 아닙니다.

1
2
3
4
5
6
7
8
9
10
11
var count = 0;
 
function addCount() {
    count++;
 
    return count;
}
 
console.log(addCount()); //1 출력
console.log(addCount()); //2 출력
console.log(addCount()); //3 출력

클로저를 사용한다면 아래와 같이 사용하면 됩니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function fncCount() {
    var count = 0;
 
    function addCount() {
        count++;
 
        return count;
    }
 
    return addCount;
}
 
var counter = fncCount();
 
console.log(counter());
console.log(counter());
console.log(counter());

코드 설명

1. fncCounter() 함수가 호출되면 지역변수 0이 초기화 됨에 따라 만들어 집니다. 그리고 내부에 addCount() 함수가 만들어지고 addCount() 함수가 만들어지고 fncCounter() 함수는 종료됩니다.

2. counter()가 실행되면 addCount() 함수가 실행되어 증감 연산자에 의해서 count 값이 0에서 1로 증가하기 때문에 1이 출력됩니다.

3. 4. 둘 모두 counter()가 실행되면 count 값이 증가하기 때문에 2와 3이 출력됩니다.

위와 같이 변수가 메모리에서 제거되지 않고 계속해서 값을 유지하는 상태를 클로저라고 부르며 내부에 있는 함수를 우리는 클로저 함수라고 합니다.

클로저를 사용하면 좋은 점

연관 있는 변수와 기능(중첩 함수)을 하나의 함수로 묶어 독립적으로 실행시킬 수가 있습니다. 또한 함수 내부에 데이터가 만들어지기 때문에 함수 외부에서 수정할 수 없는 보호된 데이터를 만들 수 있습니다. 객체 지향 프로그래밍에서는 private 데이터라고 부릅니다.

저작자표시 비영리