[JS] 클로저(Closure)

insuzy·2021년 8월 12일
post-thumbnail

📌 클로저란 ?

  • 클로저는 내부함수가 외부함수 맥락(context)에 접근할 수 있는 것을 가르킨다.
function init() {
  const name = "soobin"; // 지역 변수
  
  function test() { // test() 은 내부 함수이며, 클로저다.
    console.log(name); // 부모 함수에서 선언된 변수를 사용
  }
  
  return test;
}

const inner = init();
inner(); // 'soobin'
  • 외부 함수는 사라졌지만! 외부 함수 밖에서 내부 함수가 호출되면 외부 함수 지역 변수에 접근할 수 있다.
  • why? 클로저는 내부함수가 호출될 때 외부함수의 환경을 기억하고 있기 때문이다.

📎 클로저 모듈화

const counter = (function() {
    var privateCounter = 0;
    function changeBy(val) {
      privateCounter += val;
    }
    return {
      increment: function() {
        changeBy(1);
      },
      decrement: function() {
        changeBy(-1);
      },
      value: function() {
        return privateCounter;
      }
    };
})();

console.log(counter.value()); // logs 0
counter.increment();
counter.increment();
console.log(counter.value()); // logs 2
counter.decrement();
console.log(counter.value()); // logs 1












참고

https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures
https://opentutorials.org/course/743/6544
https://velog.io/@seaworld0125/JavaScript-%ED%81%B4%EB%A1%9C%EC%A0%80-%EA%B7%BC%EB%8D%B0-%EC%9D%B4%EC%A0%9C-%EC%BA%A1%EC%8A%90%ED%99%94%EB%A5%BC-%EA%B3%81%EB%93%A4%EC%9D%B8

profile
UI Developer. publisher

0개의 댓글