[JavaScript] 자바스크립트 클로저

클로저란

클로저는 함수와 함수가 선언된 렉시컬 환경의 조합이다.

풀어서 말하자면 함수가 생성된 당시의 외부 변수를 기억해, 생성 이후에도 계속 접근할 수 있게 해주는 기능을 말한다. 

외부 함수의 실행이 끝나 외부 함수가 소멸해도 내부 함수는 외부 함수의 변수에 접근이 가능하다.

JS의 코드적으로 보자면 아래처럼 비공개 변수를 가질 수 있는 환경에 있는 함수 정도가 되겠다. 

 

var makeClosure = function() {
  var name = 'hello';
  return function () {
    console.log(name);
  }
};
var closure = makeClosure(); 
closure(); // 'hello';

 

클로저를 사용하는 상황

- 현재 상태를 유지하고 변경된 최신 상태를 유지한다.

예: HTML 요소 토글 이벤트

 

- 정보의 은닉이 가능하다.

 

- 전역 변수를 사용하는 대신 클로저를 사용할 수 있다. 

전역변수는 언제든지 변경될 수 있어 오류를 일으키기 쉬워 가급적 쓰지 않는게 좋은데, 클로저가 이 전역 변수를 써야하는 상황을 어느 정도 대체할 수 있다.  

 

예시코드: 카운터 

function makeCounter() {
  let privateCounter = 0;
  
  return function () {
    return privateCounter++;
  };
}

let counter = makeCounter();

console.log(counter()); //  0
counter();
console.log(counter()); // 2

 

 

---

참고 자료

 

MDN Docs https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures

poiemaweb https://poiemaweb.com/js-closure

코딩앙마 https://youtu.be/tpl2oXQkGZs