자바스크립트의 클로저(Closure)와 스코프(Scope) 아주 쉽게 이해하기

개요

---

최근에 자바스크립트를 배우는 친구와 대화를 나누면서 클로저(Closure)와 스코프(Scope)에 대한 질문을 받았다. 많은 개발자들이 이 두 개념을 처음 접했을 때 혼란스러워하는 것을 보았다. 그래서 이번 글에서는 자바스크립트의 클로저와 스코프를 쉽게 이해할 수 있도록 설명해 보려고 한다.

 

스코프란 무엇인가?

---

스코프는 변수의 유효 범위를 정의하는 개념이다. 자바스크립트에서는 전역 스코프와 지역 스코프가 있다. 전역 스코프는 코드의 어디에서나 접근 가능한 반면, 지역 스코프는 특정 함수 내에서만 접근할 수 있다.

 

예를 들어, 아래와 같은 코드를 보자.

let globalVar = "나는 전역 변수다!";

function testScope() {
    let localVar = "나는 지역 변수다!";
    console.log(globalVar); // 접근 가능
    console.log(localVar);   // 접근 가능
}

testScope();
console.log(localVar);       // 오류 발생: localVar는 정의되지 않았습니다.

 

위 예제에서 globalVar는 전역 변수이므로 함수 내외부 모두에서 접근 가능하지만, localVar는 testScope 함수 내에서만 접근할 수 있다.

 

클로저란 무엇인가?

---

클로저는 함수가 선언될 당시의 스코프를 기억하는 함수이다. 즉, 클로저는 내부 함수가 외부 함수의 변수에 접근할 수 있게 해준다. 클로저는 주로 데이터 은닉, 상태 유지 등의 용도로 사용된다.

 

아래 예제를 통해 클로저를 이해해 보자.

function outerFunction() {
    let outerVar = "나는 외부 변수다!";

    function innerFunction() {
        console.log(outerVar); // 클로저: 외부 함수의 변수를 접근 가능
    }

    return innerFunction;
}

const inner = outerFunction();
inner(); // "나는 외부 변수다!" 출력

 

위 코드에서 innerFunction은 outerFunction의 outerVar에 접근할 수 있다. 이는 innerFunction이 outerFunction의 스코프를 기억하기 때문이다.

 

클로저의 활용 예시

---

클로저는 주로 데이터 은닉이나 상태 유지를 위해 사용된다. 예를 들어, 카운터를 구현해 보자.

function createCounter() {
    let count = 0;

    return {
        increment: function() {
            count++;
            return count;
        },
        decrement: function() {
            count--;
            return count;
        },
        getCount: function() {
            return count;
        }
    };
}

const counter = createCounter();
console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
console.log(counter.decrement()); // 1
console.log(counter.getCount());  // 1

 

위 코드에서 count 변수는 클로저를 통해 외부에서 직접 접근할 수 없고, 오직 increment, decrement, getCount 메소드를 통해서만 조작할 수 있다. 이렇게 클로저는 데이터의 은닉성을 제공한다.

 

정리

---

클로저와 스코프는 자바스크립트의 핵심 개념이다. 스코프는 변수가 어디에서 접근 가능한지를 결정하고, 클로저는 함수가 외부 스코프의 변수를 기억하게 만들어준다. 이러한 개념을 잘 이해하면, 자바스크립트로 복잡한 동작을 구현할 때 더 능숙해질 수 있다. 클로저는 특히 데이터 은닉과 같은 중요한 패턴을 구현할 때 매우 유용하다.

 

자바스크립트에서 클로저와 스코프를 완벽히 이해하는 것이 처음엔 어려울 수 있지만, 한 번 익히고 나면 매우 강력한 도구가 된다. 이 글을 통해 조금 더 쉽게 이해할 수 있었다면 좋겠다.