JAVASCRIPT 클로저(Closure)
클로저(Closure)란?
▶ 클로저(Closure)는 외부 함수에서 선언된 변수에 접근할 수 있는 내부 함수를 가리킵니다. 이는 함수가 선언될 때의 환경을 기억하고 이 환경에 접근할 수 있는 함수를 말하며, 클로저는 함수가 선언된 위치에 따라서 그 범위가 결정되는 렉시컬 스코프(Lexical Scope)의 특성을 기반으로 동작합니다.
클로저(Closure)의 특징
1. 외부 함수의 변수에 접근
: 클로저는 자신을 포함하는 외부 함수의 변수에 접근할 수 있는데 이는 내부 함수가 외부 함수의 스코프 체인(Scope Chain)을 가지고 있기 때문에 가능합니다.
1
2
3
4
5
6
7
8
9
10
11
12
function outerFunction() {
var outerVar = "I'm outer";
function innerFunction() {
console.log(outerVar); // 외부 함수의 변수에 접근
}
return innerFunction;
}
var innerFunc = outerFunction();
innerFunc(); // "I'm outer"
- 위의 예시에서 innerFunction은 외부 함수인 outerFunction의 변수인 outerVar에 접근합니다. innerFunction은 외부 함수가 실행된 후에도 outerVar에 접근할 수 있습니다.
2. 환경 유지
: 외부 함수가 실행을 마쳐도 내부 함수는 외부 함수의 변수를 기억하고 있습니다. 이는 클로저가 함수가 선언된 환경을 기억하는 특성 때문에 가능합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function createCounter() {
var count = 0;
return function() {
count++;
console.log(count);
};
}
var counter1 = createCounter();
counter1(); // 1
counter1(); // 2
var counter2 = createCounter();
counter2(); // 1
- 위의 예시에서 createCounter 함수는 카운터를 생성하는 함수를 반환합니다. 이 카운터 함수는 외부 함수인 createCounter의 변수인 count에 접근하고 값을 증가시키는데 내부 함수는 외부 함수의 변수를 기억하기 때문에 호출을 counter1, counter2라는 서로 다른 클로저를 생성해도 독립적으로 환경 상태를 유지할 수 있습니다.
3. 비공개 변수와 메서드 구현
: 클로저를 사용하면 외부에서 접근할 수 없는 비공개(private) 변수와 메서드를 구현할 수 있습니다. 이는 클로저 내부에 선언된 변수와 함수가 외부에서 직접 접근할 수 없기 때문에 해당 변수와 함수는 비공개 상태 유지가 가능합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
function createPerson(name) {
var age = 0;
function getAge() {
return age;
}
function increaseAge() {
age++;
}
return {
getName: function() {
return name;
},
getAge: getAge,
celebrateBirthday: function() {
increaseAge();
console.log(name + " is now " + age + " years old.");
}
};
}
var person1 = createPerson("Alice");
console.log(person1.getName()); // "Alice"
console.log(person1.getAge()); // 0
person1.celebrateBirthday(); // "Alice is now 1 years old."
var person2 = createPerson("Bob");
console.log(person2.getName()); // "Bob"
console.log(person2.getAge()); // 0
person2.celebrateBirthday(); // "Bob is now 1 years old."
- 위의 예시에서 createPerson 함수는 개인 정보를 저장하고 조작하는 객체를 생성합니다.
- 이 때 age 변수는 외부에서 직접 접근할 수 없고, 오직 내부 함수인 getAge와 increaseAge를 통해서만 접근할 수 있습니다.
- 이렇게 함으로써 age 변수는 비공개 상태를 유지하면서도 외부에서 이름과 나이를 읽고 변경할 수 있는 인터페이스를 제공합니다.
클로저(Closure)의 장점과 단점
장점
1. 비공개 변수와 메서드 구현
: 클로저를 사용하면 외부에서 직접 접근할 수 없는 비공개(private) 변수와 메서드를 구현할 수 있습니다. 이는 객체의 상태를 안전하게 보호하고 캡슐화할 수 있게 합니다.
2. 상태 보존 및 유지
: 클로저는 함수가 선언된 환경을 기억하고 이를 유지합니다. 따라서 클로저를 사용하면 함수가 실행된 후에도 해당 환경의 상태를 유지하고 이용할 수 있습니다.
3. 콜백 함수와 비동기 처리
: 클로저를 사용하여 콜백 함수를 생성하면 외부 변수에 접근할 수 있습니다. 이를 통해 비동기 처리나 이벤트 핸들링과 같은 상황에서 유용하게 활용할 수 있습니다.
단점
1. 메모리 누수 가능성
: 클로저는 외부 함수의 변수를 기억하고 유지하는데, 만약 사용하지 않는 외부 변수가 클로저에 의해 계속해서 참조되는 경우엔 메모리 누수(memory leak)를 발생시킬 수 있어 클로저를 사용할 때에는 메모리 관리에 주의해야 합니다.
메모리 누수(memory leak) - 프로그램이 사용하지 않는 메모리를 계속해서 보유하고 있는 상태
2. 성능 저하 가능성
: 클로저는 외부 함수의 변수를 참조하기 위해 스코프 체인을 거쳐야 하는데, 이는 함수 호출 시 매번 스코프 체인을 검색해야 하므로 일부 상황에서 성능 저하를 초래할 수 있습니다.
3. 가독성 감소
: 클로저를 오용하면 코드의 가독성이 감소할 수 있습니다. 특히 클로저를 과도하게 사용하거나 복잡하게 중첩된 클로저를 작성하는 경우 코드의 이해가 어려워질 수 있습니다.
이렇게 오늘은 자바스크립트의 클로저(Closure)에 대해 알아봤는데요,
오늘 정리한 내용도 면접을 준비할 때 나올 수 있는 질문인만큼 미리미리 숙지해서 알아두면 좋을 것 같네요.
그럼 다음엔 또 다른 면접 정보들을 가져와보도록 하겠습니다 😁!