2022-02-12

이채현

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

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);
        })
    }
}

은닉화

활용사례

카테고리

최근 글

태그