자바스크립트는 강력하고 다재다능한 프로그래밍 언어이며 보다 효율적이고, 유지 보수가 용이하며, 가독성이 높은 코드를 작성하는 데 도움이 되는 기능들을 많이 내장하고 있습니다.
이 글에서는, 내장된 기능을 사용해 성능을 향상하고 코드를 더 멋지게 보이도록 하는 아주 강력한 함수들을 만드는 방법을 설명하려고 합니다. 이는 자바스크립트 작업을 더욱 즐겁고 효율적으로 만들어 줍니다. 자바스크립트 개발자로서 코드 품질을 최적화하기 위해 유틸리티 파일/클래스에 저장할 수 있는 Debounce, Throttle, Once, Memoize, Curry, Partial, Pipe, Compose, Pick, Omit, 그리고 Zip까지 다뤄보겠습니다.
Pipe
Pipe 함수는 여러 개의 함수를 연결하고 그 연결고리에서 어떤 함수의 결과를 다음 함수로 전달하고 싶을 때 사용하는 유틸리티 함수입니다. Unix pipe 연산자와 유사하며 자바스크립트의 reduce() 함수를 사용하여 모든 함수를 왼쪽에서 오른쪽으로 적용합니다.
function pipe(...funcs) {
return function piped(...args) {
return funcs.reduce((result, func) => [func.call(this, ...result)], args)[0];
};
}파이프 함수를 이해하기 위해 다음 세 가지 함수가 있다고 가정해보겠습니다.
- 문자열에 접두사를 붙이는 함수
- 문자열에 접미사를 붙이는 함수
- 문자열을 대문자로 변환하는 함수
그렇다면 파이프 함수를 사용하여 문자열을 왼쪽에서 오른쪽으로 하나씩 모두 적용하는 새로운 함수를 만들 수 있습니다.
// 문자열에 추가하는 함수들 정의
function addPrefix(str) {
return "prefix-" + str;
}
function addSuffix(str) {
return str + "-suffix";
}
function toUppercase(str) {
return str.toUpperCase()
}
// 세 가지 함수를 올바른 순서로 적용한 파이프된 함수를 생성
const decorated1 = pipe(addPrefix, addSuffix, toUppercase);
const decorated2 = pipe(toUppercase, addPrefix, addSuffix);
// 입력 문자열로 파이프된 함수 호출
const result1 = decorated1("hello"); // PREFIX-HELLO-SUFFIX
const result2 = decorated2("hello"); // prefix-HELLO-suffix이 예제에서, decorated1과 decorated2 함수는 addPrefix, addSuffix, toUppercase 함수들을 각기 다른 순서로 파이프하여 생성되었습니다. 이 함수들은 전달받은 입력 문자열에 원래의 세 함수를 주어진 순서대로 적용합니다. 파이프 함수에 전달된 순서가 다르기 때문에 결과 값으로 나온 문자열도 다를 것입니다.
Compose
Compose 함수는 Pipe 함수와 같지만, 주어진 함수들을 모두 적용하기 위해 reduceRight을 사용한다는 차이가 있습니다.
function compose(...funcs) {
return function composed(...args) {
return funcs.reduceRight((result, func) => [func.call(this, ...result)], args)[0];
};
}이렇게 하면 기능은 동일하지만, 함수들이 오른쪽에서 왼쪽으로 적용됩니다.
Pick
자바스크립트의 Pick 함수는 객체에서 특정한 값들을 선택하는 목적으로 사용됩니다. 주어진 객체에서 특정한 프로퍼티들을 선택하여 새로운 객체를 생성하는 방법입니다. 프로퍼티가 사용 가능한 경우 어떤 객체에서 프로퍼티의 하위 집합을 추출할 수 있도록 하는 함수형 프로그래밍 기법입니다.
Pick 함수의 구현은 다음과 같습니다.
function pick(obj, keys) {
return keys.reduce((acc, key) => {
if (obj.hasOwnProperty(key)) {
acc[key] = obj[key];
}
return acc;
}, {});
}이 함수는 두 개의 매개변수를 갖습니다.
obj: 새로운 객체를 생성할 때 사용하는 원본 객체keys: 새로운 객체로 선택할 키의 배열
새 객체를 생성하기 위해 함수는 reduce() 메서드를 사용하여 키를 반복하고 원본 객체의 프로퍼티와 비교합니다. 만약 값이 존재한다면, {}로 초기화된 reduce 함수의 누산기 객체에 값이 추가됩니다.
reduce 함수가 끝나면, 누산기 객체는 새로운 객체가 되고 그 객체는 keys 배열에 있던 특정 프로퍼티들만 갖게 됩니다.
이 함수는 데이터를 과도하게 가져오는 것을 방지하고자 할 때 유용합니다. Pick 함수를 사용하면, 데이터베이스에서 객체를 가져온 후 필요한 프로퍼티만 pick() 하여 호출자에게 반환할 수 있습니다.
const obj = {
id: 1,
name: 'Paul',
password: '82ada72easd7',
role: 'admin',
website: 'https://www.paulsblog.dev',
};
const selected = pick(obj, ['name', 'website']);
console.log(selected); // { name: 'Paul', website: 'https://www.paulsblog.dev' }name과 website 프로퍼티만 가지는 새로운 객체를 생성하기 위해 pick() 함수가 사용되었습니다. role, password, id와 같은 프로퍼티는 호출자에게 노출하지 않는 것이죠.
다음 시간에는 Omit 함수부터 알아보겠습니다.
