[javascript] Lodash의 디자인 함수들과 사용 예제

21 Nov 2023

javascript

Lodash는 자바스크립트 유틸리티 라이브러리로서, 다양한 기능과 디자인 패턴을 제공합니다. 이번 포스트에서는 Lodash에서 제공하는 몇 가지 디자인 함수들을 살펴보고, 각 함수의 사용 예제를 설명하겠습니다.

1. _.map

_.map 함수는 배열의 각 요소에 대해 특정 함수를 적용하고, 그 결과를 새로운 배열로 반환합니다. 일반적으로 배열 요소를 변형하거나 특정 속성을 추출하는 데 사용됩니다.

const array = [1, 2, 3, 4, 5];

const tripledArray = _.map(array, (num) => num * 3);
console.log(tripledArray); // [3, 6, 9, 12, 15]

const names = [{ name: 'John' }, { name: 'Jane' }, { name: 'Joe' }];

const nameArray = _.map(names, (person) => person.name);
console.log(nameArray); // ['John', 'Jane', 'Joe']

2. _.filter

_.filter 함수는 배열에서 특정 조건을 만족하는 요소들로 이루어진 새로운 배열을 반환합니다. 주어진 함수의 반환값이 true인 요소들로 필터링됩니다.

const numbers = [1, 2, 3, 4, 5];

const evenNumbers = _.filter(numbers, (num) => num % 2 === 0);
console.log(evenNumbers); // [2, 4]

const students = [{ name: 'John', grade: 'A' }, { name: 'Jane', grade: 'B' }, { name: 'Joe', grade: 'A' }];

const aGradeStudents = _.filter(students, (student) => student.grade === 'A');
console.log(aGradeStudents); // [{ name: 'John', grade: 'A' }, { name: 'Joe', grade: 'A' }]

3. _.reduce

_.reduce 함수는 배열의 요소를 순회하면서 누적 값을 계산하는 함수입니다. 누적 값을 반환합니다.

const numbers = [1, 2, 3, 4, 5];

const sum = _.reduce(numbers, (total, num) => total + num, 0);
console.log(sum); // 15

const grades = [80, 90, 70, 85, 95];

const averageGrade = _.reduce(grades, (total, grade) => total + grade, 0) / grades.length;
console.log(averageGrade); // 84

4. _.groupBy

_.groupBy 함수는 배열을 주어진 기준에 따라 그룹화하여 객체로 반환합니다. 각 그룹은 해당 기준 값을 키로 가지고, 해당 그룹에 속하는 요소들의 배열을 값으로 가집니다.

const students = [{ name: 'John', grade: 'A' }, { name: 'Jane', grade: 'B' }, { name: 'Joe', grade: 'A' }];

const studentsByGrade = _.groupBy(students, 'grade');
console.log(studentsByGrade);
// {
//   'A': [{ name: 'John', grade: 'A' }, { name: 'Joe', grade: 'A' }],
//   'B': [{ name: 'Jane', grade: 'B' }]
// }

이상으로 Lodash의 일부 디자인 함수들과 사용 예제에 대해 알아보았습니다. Lodash는 많은 유용한 함수들을 제공하므로, 자세한 내용은 Lodash의 공식 문서를 참고해주세요.