자바스크립트 클로저

클로저 함수의 특징

1. 함수를 리턴하는 함수입니다.
2. 리턴하는 함수에 의해 스코프가 구분됩니다.
3. 외부 함수의 변수에 접근 가능한 내부 함수 입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

function counterClosure(){
    let count = 0
    return {
        increase : function() {
            count++
        },
        getCount : function() {
            return count
        }
    }
}

const counter1 = counterClosure()
const counter2 = counterClosure()

counter1.increase()
counter1.increase()
console.log(`counter 1의 값 ${counter1.getCount()}`) 
// 'counter 1의 값 2'
counter2.increase()
console.log(`counter 2의 값 ${counter1.getCount()}`)
// 'counter 2의 값 1'

1 ~ 2 코드 설명
counterClosure 함수를 정의하고 count 변수에 0을 할당합니다.

3 ~ 11 코드 설명
counterClosure 함수는 객체를 반환하는데 객체는 increase, getCount 메소드가 있고 모두 변수 count에 접근합니다.

13 ~ 14 코드 설명
counterClosure 함수를 호출하고 반환된 객체를 counter1,counter2에 할당합니다.

16 ~ 20 코드 설명
counter1, counter2 객체의 increase 메소드를 호출하면 2라인에서 볼 수 있는 counterClosure 함수 내부의 count 변수에 모두 접근합니다.
하지만 counter1, counter2의 getCount를 호출한 결과를 보면 counter1의 메소드들이 가리키는 count와 counter2의 메소드들이 가리키는 count가 다른 값을 가지고 있습니다.