[JS] 클로저 간단 정리

이채현

💡 Javascript closure

• 클로저는 먼저 자바스크립트 변수의 유효범위를 이해해야한다.
• 클로저를 명확히 무엇이다라고 말하기는 어렵다.

function returnX(){
    return 'x';
}

const x = returnX()
console.log(typeof x) // string

----------------------------------------------

function returnX() {
    let x = 'x';
    return function returnY() {
        return x + 'y';
    }
}

const x = returnX()
console.log(typeof x) // function => return 값이 함수 덩어리이기 때문에

const x = returnX()();
console.log(typeof x) // string
function sum(num1) {
    return function (num2) {
        return num1 + num2;
    };
}

const sum5 = sum(5); // 숫자5가 계속 바인딩되어 있는 상태
console.log(sum5(10)); // 15

은닉화

function privateData() {
    let temp = 'a';
    return temp;
}

const result = privateData(); // privateData를 실행시켜야만 temp값을 알 수 있다.
console.log(result);

-------------------------------------

function privateData() {
    let temp = 'a';
    return {
        value: () => {
            return temp;
        },
        changeValue: (newVal) => {
            temp = newVal;
        }
    };
}

const private = privateData();
console.log(private.value()); // a
private.changeValue('b');
console.log(private.value()); // b

활용사례

• 고민해봤을 때 debounce와 throttle에서 …사용

  • debounce: 어떤 이벤트를 실행할 때 과하게 실행되는 것을 지연시켜주는 역할 (클릭지연..무한스크롤 지연)

  buttonElement.addEventListener(
      'click',
      debounce(handleClick, 500),
  )
  
  function debounce(func, timeout = 300) {
      let timer;
  
      return (...args) => {
          clearTimeout(timer);
  
          timer = setTimeout(() => {
              func.apply(this, args);
          })
      }
  }