JavaScript 코드 품질 향상을 위한 8가지 고급 함수

사진: Unsplash 의 Blake Connally

 

 

코드의 효율성과 가독성을 높이는 8가지 고급 JavaScript 함수들

 

1. Debounce (디바운스)

빠른 연속 이벤트 호출을 방지하는 기능입니다. 예를 들어, 사용자가 창 크기를 조정할 때 여러 번의 이벤트 호출을 줄여 성능을 향상시킵니다.

function debounce(func, delay) {
  let timeout;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(context, args), delay);
  };
}

window.addEventListener("resize", debounce(function() {
  console.log("창 크기가 조정되었습니다.");
}, 250));

 

2. Throttle (쓰로틀)

함수의 호출 빈도를 제한합니다. 예를 들어, 스크롤 중에 발생하는 이벤트를 제한하여 성능 문제를 방지합니다.

function throttle(func, delay) {
  let lastFunc;
  let lastRan;
  return function() {
    const context = this;
    const args = arguments;
    if (!lastRan) {
      func.apply(context, args);
      lastRan = Date.now();
    } else {
      clearTimeout(lastFunc);
      lastFunc = setTimeout(function() {
        if ((Date.now() - lastRan) >= delay) {
          func.apply(context, args);
          lastRan = Date.now();
        }
      }, delay - (Date.now() - lastRan));
    }
  }
}

window.addEventListener("scroll", throttle(function() {
  console.log("스크롤 이벤트 처리");
}, 1000));

 

3. Once (원스)

함수가 단 한 번만 실행되도록 합니다. 예를 들어, 한 번만 실행되어야 하는 이벤트 핸들러에 유용합니다.

function once(func) {
  let executed = false;
  return function() {
    if (!executed) {
      executed = true;
      func.apply(this, arguments);
    }
  };
}

const initialize = once(function() {
  console.log("초기화 실행");
});
initialize();
initialize(); // 이 라인은 아무 효과가 없습니다.

 

4. Memoize (메모아이즈)

함수의 계산 결과를 캐시하여 같은 매개변수로 함수가 호출될 때 재계산을 방지합니다.

function memoize(fn) {
  const cache = {};
  return function(...args) {
    const key = JSON.stringify(args);
    if (!cache[key]) {
      cache[key] = fn.apply(this, args);
    }
    return cache[key];
  };
}

const complexCalculation = memoize(function(x, y) {
  // 복잡한 계산
  return x + y; // 예시
});
console.log(complexCalculation(10, 5));
console.log(complexCalculation(10, 5)); // 캐시된 결과를 사용

 

5. Curry (커리)

여러 매개변수를 가진 함수를 한 번에 하나의 매개변수만 받는 함수들의 체인으로 변환합니다.

function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(this, args);
    } else {
      return function(...args2) {
        return curried.apply(this, args.concat(args2));
      }
    }
  };
}

function sum(a, b, c) {
  return a + b + c;
}
const curriedSum = curry(sum);
console.log(curriedSum(1)(2)(3)); // 6

 

 

6. Compose (컴포즈)

여러 함수를 조합하여 새로운 함수를 만듭니다. 함수들은 오른쪽에서 왼쪽 순으로 실행됩니다.

function compose(...fns) {
  return fns.reduceRight((prevFn, nextFn) => 
    (...args) => nextFn(prevFn(...args)), 
    value => value
  );
}

function multiplyByTwo(x) {
  return x * 2;
}
function addThree(x) {
  return x + 3;
}
const multiplyAndAdd = compose(addThree, multiplyByTwo);
console.log(multiplyAndAdd(5)); // (5 * 2) + 3 = 13

 

7. Pick (픽)

객체에서 특정 속성들만 선택하여 새로운 객체를 만듭니다.

function pick(obj, ...keys) {
  return keys.reduce((result, key) => {
    if (obj.hasOwnProperty(key)) {
      result[key] = obj[key];
    }
    return result;
  }, {});
}

const user = {
  name: 'John Doe',
  age: 30,
  email: 'john@example.com'
};
const pickedUser = pick(user, 'name', 'email');
console.log(pickedUser); // { name: 'John Doe', email: 'john@example.com' }

 

8. Zip (집)

여러 배열들의 동일한 인덱스에 있는 요소들을 묶어 새로운 배열을 생성합니다.

function zip(...arrays) {
  const maxLength = Math.max(...arrays.map(arr => arr.length));
  return Array.from({ length: maxLength }, (_, i) => {
    return arrays.map(arr => arr[i]);
  });
}

const names = ['Alice', 'Bob', 'Charlie'];
const ages = [24, 30, 22];
const zipped = zip(names, ages);
console.log(zipped); // [['Alice', 24], ['Bob', 30], ['Charlie', 22]]