자바스크립트의 클로저를 간단한 예제로 알아보기

클로저...자바스크립트를 공부하다보면 만나게 되는 어려운 개념들 중 하나입니다.

클로저를 잘 이해하기 위해서는 버그를 줄일 수 있는 변수 정의 방법에 대해 알아야 합니다.

---

변수를 사용할 때에는 변수를 정의하고, 데이터를 할당해야 합니다.

var 변수;  // 변수 정의
변수 = 10; // 데이터 할당

자바스크립트에서 var 키워드를 사용해서 변수를 정의하면 재정의와 재할당이 모두 가능합니다.

var 변수;
변수 = 10;

var 변수 = 20; // 재정의
변수 = 30;     // 재할당

재정의는 이미 정의된 변수를 다시 정의하는 것이고, 재할당은 이미 데이터를 할당한 변수에 새로운 데이터를 할당하는 것을 의미합니다.

 

자 그럼 변수를 재정의하고 재할당 할 수 있게되면 어떤 문제가 발생할까요?

var 간식;
긴식 = '붕어빵';

console.log(`오늘의 간식은 ${간식}입니다.`);

var 간식;
간식 = '2pm';

console.log(`간식 시간은 ${간식}입니다.`);

간식이라는 동일한 이름의 변수에 각각 간식 종류와 간식시간을 할당해서 사용하였습니다.

같은 이름의 변수를 다른 용도로 사용하였다는 뜻입니다.

 

이럴 경우 간식 시간을 붕어빵으로 안내하거나 간식 종류를 2pm으로 안내할 가능성이 생깁니다.

개발자의 의도와는 다른 방향으로 프로그램이 동작할 수도 있다는 뜻입니다.

 

재할당 역시 마찬가지입니다.

var 고정값 = 0;

console.log(`고정값은 ${고정값} 입니다.`);

만약 프로그램 전체에서 고정된채로 사용해야하는 값이 있는데,

이 값을 아무데서나 변경할 수 있게 된다면 프로그램에 오류가 발생할 것입니다.

 

이런 문제들 때문에 var는 사장되고 재정의가 불가능한 let과 재할당까지 불가능한 const가 등장하게 되었습니다.

---

그래서 이게 클로저와는 무슨상관이냐구요?

클로저는 정보를 은닉하기 위해 만들어진 개념입니다.

특정 조건에서는 데이터를 변경할 수 있지만, 그렇다고 해서 아무나 데이터를 변경할 수는 없도록 하기 위해서 말입니다.

 

클로저의 핵심 개념은 함수 안에서 정의된 변수를 함수가 소멸된 후에도 접근하는 것입니다.

 

말이 어려운데 예제로 살펴보겠습니다.

let 전역변수 = 0;
function 함수1() {
  전역변수++;
}
함수1();
console.log(전역변수);
함수1();
console.log(전역변수);
함수1();
console.log(전역변수);

전역변수는 해당 자바스크립트 파일 전체에서 접근할 수 있는 변수입니다.

그래서 함수 안에서도 함수 밖의 전역변수에 접근할 수 있습니다.

function 함수2() {
  let 지역변수 = 0;
  지역변수++;
  return 지역변수;
}
console.log(함수2());
console.log(함수2());
console.log(함수2());

지역변수는 해당 변수가 정의된 영역 안에서만 접근할 수 있습니다.

함수 안에서 변수가 정의되어 있으면 함수 밖에서는 접근할 수 없습니다.

function 함수3() {
  let 지역변수 = 0;
  return function () {
    return ++지역변수;
  };
}

const 함수상자 = 함수3();

console.log(함수상자());
console.log(함수상자());
console.log(함수상자());

자 이제 클로저입니다.

함수 안에 지역변수를 정의하고, 그 지역변수를 변경할 수 있는 익명 함수를 반환합니다.

익명함수는 별도의 변수에 할당해서 사용할 수 있으며, 지역변수를 정의한 함수가 소멸해도 여전히 지역변수에 접근할 수 있습니다.

 

이 예제에서 알 수 있듯이 클로저의 개념을 활용하면 제한된 환경에서 정의된 변수에 제한된 방법으로만 변경할 수 있습니다.

데이터가 의도치 않게 변경되는 오류를 방지할 수 있다는 뜻입니다.

---

빌드업이 길었지만 클로저에 대한 설명을 최대한 간단하게 해보았습니다.

일단 개념을 어느정도 이해하기만 하면 그 이후로는 눈덩이가 불어나듯 더 쉽게 개념을 이해할 수 있게 됩니다.