[JavaScript] 클로저를 통해 코드 최적화(Optimizing)하기

클로저(Closure)를 응용하여 반복되는 사전작업(변수 정의)을 피하는 방법을 사용해 본다.

// 함수 호출 시마다 a, b라는 변수가 계속 정의된다.

const compare = (x) => {
    const a = 10;
    const b = 20;
    return x > a && x > b ? "bigger" : "smaller";
}

console.log(compare(30));
console.log(compare(5));

↓

// 클로저를 이용한다.
// a와 b의 값은 compare 내부 스코프에 한 번 저장된다.
// 그러면 return 안의 anonymous 함수가 compare의 렉시컬 환경에서 a, b의 값을 참조해 온다.

const compare = (x) => {
    const a = 10;
    const b = 20;
    return x => x > a && x > b ? "bigger" : "smaller";
}


const com = compare();
console.log(com(30));
console.log(com(5));

a와 b를 전역변수로 만드는 방법보다 독립성은 좋아보인다.

 

중첩된 함수도 같은 방법으로 할 수 있다.

// print1 함수를 호출할 때마다 test 함수 표현식이 정의됨
const print1 = (x) => {
    const test = a => {
        console.log(a);
    }
    
    return test(x);
}

print1(2);

// pri 함수 표현식을 호출하면 test 함수 표현식은 한 번만 정의됨
const print2 = (x) => {
    const test = a => {
        console.log(a);
    }
    
    return x => test(x);
}

const pri = print2();
pri(2);
pri(3);