[mjt] 변수의 유효범위와 클로저에 대해 알아보자
변수의 유효범위와 클로저에 대해 알아보자
JavaScript에서 변수의 유효범위(Scope)와 클로저(Closure)는 함수 동작 방식과 데이터 접근을 이해하는 데 핵심적인 개념이다. 변수의 유효범위와 클로저의 원리를 알아보도록 하자.
변수의 유효범위란?
-
변수의 유효범위란 변수에 접근할 수 있는 코드의 범위를 뜻한다. - JavaScript에서는 유효범위가 전역 스코프(Global Scope)와 지역 스코프(Local Scope)로 나뉜다.
1-1) 전역 스코프
- 함수 외부에서 선언된 변수는 전역 스코프를 가진다.
- 프로그램 어디에서나 접근 가능하다.
let globalVar = "나는 전역 변수!";
function displayGlobalVar() {
console.log(globalVar); // 출력: 나는 전역 변수!
}
displayGlobalVar();
1-2) 지역 스코프
- 함수 내부에서 선언된 변수는 지역 스코프를 가진다.
- 함수 외부에서는 접근할 수 없다.
function localScopeExample() {
let localVar = "나는 지역 변수!";
console.log(localVar); // 출력: 나는 지역 변수!
}
localScopeExample();
console.log(localVar); // ReferenceError: localVar is not defined
유효범위 체인(Scope Chain)
- JavaScript는 중첩 함수에서 변수에 접근할 때
유효범위 체인을 따른다. - 즉, 내부 함수는 자신이 속한 외부 함수의 변수에 접근할 수 있다.
function outer() {
let outerVar = "외부 변수";
function inner() {
let innerVar = "내부 변수";
console.log(outerVar); // 출력: 외부 변수
}
inner();
console.log(innerVar); // ReferenceError: innerVar is not defined
}
outer();
클로저란?
- 클로저는 함수가 선언될 당시의 유효범위를 기억하고, 그 유효범위에 접근할 수 있는 함수를 말한다.
- 즉, 함수가 외부 변수에 접근할 수 있는 기능을 제공합니다.
function makeCounter() {
let count = 0; // 외부 변수
return function () {
count++; // 외부 변수에 접근
return count;
};
}
const counter = makeCounter();
console.log(counter()); // 출력: 1
console.log(counter()); // 출력: 2
console.log(counter()); // 출력: 3
3-1) 활용사례: 데이터 은닉
클로저를 사용하여 변수에 직접 접근하지 못하도록 보호할 수 있다.
function createSecret() {
let secret = "비밀!";
return {
getSecret: function () {
return secret;
},
setSecret: function (newSecret) {
secret = newSecret;
},
};
}
const mySecret = createSecret();
console.log(mySecret.getSecret()); // 출력: 비밀!
mySecret.setSecret("새로운 비밀");
console.log(mySecret.getSecret()); // 출력: 새로운 비밀
3-2) 클로저 사용 시 주의사항
-
메모리 누수- 클로저가 참조 중인 외부 변수가 해제되지 않아 메모리가 증가할 수 있다.
-
과도한 사용- 모든 상황에서 클로저를 사용하는 것은 성능에 부정적인 영향을 줄 수 있다.
회고
- 변수의 유효범위는 코드를 안전하고 효율적으로 작성하는 데 중요하다.
- 클로저는 외부 변수에 대한 접근 권한을 제공하여 다양한 활용을 가능하게 한다.