코드 품질을 높여주는 유용한 자바스크립트 함수 - (4)

자바스크립트는 강력하고 다재다능한 프로그래밍 언어이며 보다 효율적이고, 유지 보수가 용이하며, 가독성이 높은 코드를 작성하는 데 도움이 되는 기능들을 많이 내장하고 있습니다.

이 글에서는, 내장된 기능을 사용해 성능을 향상하고 코드를 더 멋지게 보이도록 하는 아주 강력한 함수들을 만드는 방법을 설명하려고 합니다. 이는 자바스크립트 작업을 더욱 즐겁고 효율적으로 만들어 줍니다. 자바스크립트 개발자로서 코드 품질을 최적화하기 위해 유틸리티 파일/클래스에 저장할 수 있는 Debounce, Throttle, Once, Memoize, Curry, Partial, Pipe, Compose, Pick, Omit, 그리고 Zip까지 다뤄보겠습니다.

Omit

Omit 함수는 Pick 함수와 정반대입니다. 어떤 객체에서 특정한 프로퍼티들을 제거하고 싶을 때 사용합니다. 특정 프로퍼티들을 숨겨 데이터를 과도하게 가져오는 것을 방지하는 것이죠. 숨기고자 하는 프로퍼티의 개수가 보여주고자 하는 프로퍼티의 개수보다 적다면 Pick를 대체하여 사용할 수 있습니다.

function omit(obj, keys) {
  return Object.keys(obj)
    .filter(key => !keys.includes(key))
    .reduce((acc, key) => {
      acc[key] = obj[key];
      return acc;
    }, {});
}

이 함수는 두 개의 매개변수를 받습니다.

• obj: 새로운 객체를 생성할 때 사용하는 원본 객체
• keys: 새로운 객체에서 제외할 키의 배열

새로운 객체를 생성하고 특정한 프로퍼티들을 제거하려면 Object.keys() 함수를 사용하여 원본 객체에 대한 키 배열을 생성합니다. 그런 다음 자바스크립트의 filter() 함수로 keys 인수에 명시된 키들을 모두 제거합니다. reduce 함수를 사용하여 남아있는 키를 순회하고 keys 배열에 존재하지 않는 모든 키를 가지는 새로운 객체를 반환합니다.

실제로 id 프로퍼티만 제거하고 싶은 큰 사용자 객체 데이터가 있을 때 사용할 수 있습니다.

const obj = {
    id: 1,
    name: 'Paul',
    job: 'Senior Engineer',
    twitter: 'https://www.twitter.com/paulknulst',
    website: 'https://www.paulsblog.dev',
};

const selected = omit(obj, ['id']);
console.log(selected); // {name: 'Paul', job: 'Senior Engineer', twitter: 'https://www.twitter.com/paulknulst', website: 'https://www.paulsblog.dev'}

이 예제에서, omit() 함수는 id 프로퍼티를 제거하고 객체를 반환하기 때문에 for 루프를 사용하거나, obj.id = undefined를 설정해주거나, pick()을 사용하여 선택할 모든 속성들을 제공하는 것보다 코드의 가독성을 높일 수 있습니다.

Zip

Zip 함수는 전달된 요소들의 배열을 다른 배열의 요소와 결합하는 자바스크립트 함수이며, 여러 배열을 하나의 튜플 배열로 결합하는 데 사용됩니다. 결과 배열에는 각 배열에서 상응하는 요소들이 포함됩니다. 이러한 기능은 어떠한 방식으로든 병합하거나 연관시켜야 하는 여러 소스의 데이터로 작업할 때 자주 사용됩니다.

파이썬과 다르게 자바스크립트는 Zip 함수를 내장하고 있지 않습니다. 하지만 구현은 간단합니다.

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

이 자바스크립트 스니펫은 배열들의 새로운 배열을 생성하는데, 모든 하위 배열은 제공된 배열들의 요소로 구성됩니다. 즉, 원래 배열의 모든 요소는 또 다른 배열에서 동일한 인덱스를 가지는 요소와 매핑된다는 것입니다.

예를 들어 다음과 같은 세 배열이 있다고 가정해봅시다.

1. x 좌표를 가지는 배열
2. y 좌표를 가지는 배열
3. z 좌표를 가지는 배열

zip 함수가 없다면, 배열들을 직접 순회하여 x, y, z 요소를 쌍으로 연결해야 합니다. 하지만 zip 함수를 사용하면, 세 배열을 전달하여 새로운 (x, y, z) 튜플의 배열을 생성할 수 있습니다.

// 좌표를 포함하는 세 배열을 정의
const xCoordinates = [1, 2, 3, 4];
const yCoordinates = [5, 6, 7, 8];
const zCoordinates = [3, 6, 1, 7];

// 각 좌표의 배열을 zip된 배열로 만들기
const points = zip(xCoordinates, yCoordinates, zCoordinates);

// 좌표들의 zip된 배열 사용
console.log(points);  // [[1, 5, 3], [2, 6, 6], [3, 7, 1], [4, 8, 7]]

이 예제에서, zip 함수는 xCoordinates, yCoordinates, zCoordinates 세 가지 배열을 튜플들로 이루어진 한 배열로 결합시킵니다.

마무리

이 글에서는 더 효율적이고, 가독성 있고, 유지보수가 용이한 자바스크립트 코드를 작성하는 데 도움이 되는 강력하고 유용한 함수들에 대해 다루었습니다. 소개한 함수들을 올바르게 적용하여, 앞으로의 코드 품질을 더욱 향상시키고, 프로젝트 작업을 더 쉽게 만들어보려고 합니다.

설명한 자바스크립트 함수는 핵심 자바스크립트 언어의 일부분은 아니지만, underscore.js, lodash와 같이 이미 널리 사용되는 자바스크립트 프레임워크에 구현되어 있습니다.

마지막으로, 실제 소프트웨어 프로젝트에서 이 함수들을 효과적으로 사용하는 법을 배우려면 지속적인 연습이 필요할 것이라고 생각합니다. 하지만, 시간이 지나면 이 함수들을 쉽고 효율적으로 사용하여 더욱 가독성 있고 유지보수가 용이한 코드를 작성하게 될 것입니다. 또한, 전반적인 코드의 품질도 같이 최적화될 것입니다.