[javascript] Lodash의 유틸리티 함수들과 사용 예제
Lodash는 자바스크립트 유틸리티 라이브러리로, 다양한 기능을 제공하는 함수들로 구성되어 있습니다. 이번 포스트에서는 Lodash의 몇 가지 유용한 함수들과 간단한 사용 예제를 살펴보겠습니다.
1. _.map
_.map 함수는 배열의 각 요소에 대해 주어진 함수를 실행하고 그 결과를 새로운 배열로 반환합니다. 다음은 _.map 함수를 사용하여 배열의 값을 제곱하는 예제입니다.
const array = [1, 2, 3, 4, 5];
const squaredArray = _.map(array, (num) => num * num);
console.log(squaredArray);
// 출력: [1, 4, 9, 16, 25]
2. _.filter
_.filter 함수는 주어진 조건을 만족하는 배열의 요소들로 새로운 배열을 생성합니다. 다음은 _.filter 함수를 사용하여 배열에서 짝수만 필터링하는 예제입니다.
const array = [1, 2, 3, 4, 5];
const evenArray = _.filter(array, (num) => num % 2 === 0);
console.log(evenArray);
// 출력: [2, 4]
3. _.find
_.find 함수는 주어진 조건을 만족하는 첫 번째 요소를 반환합니다. 다음은 _.find 함수를 사용하여 객체 배열에서 특정 조건을 만족하는 첫 번째 객체를 찾는 예제입니다.
const users = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 },
{ name: 'Charlie', age: 35 }
];
const user = _.find(users, { name: 'Bob' });
console.log(user);
// 출력: { name: 'Bob', age: 30 }
4. _.groupBy
_.groupBy 함수는 배열의 요소들을 주어진 함수의 결과를 기준으로 그룹화하여 객체로 반환합니다. 다음은 _.groupBy 함수를 사용하여 배열을 나이로 그룹화하는 예제입니다.
const users = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 },
{ name: 'Charlie', age: 35 }
];
const groupedUsers = _.groupBy(users, (user) => user.age);
console.log(groupedUsers);
// 출력: { '25': [{ name: 'Alice', age: 25 }], '30': [{ name: 'Bob', age: 30 }], '35': [{ name: 'Charlie', age: 35 }] }
5. _.debounce
_.debounce 함수는 주어진 함수의 실행을 지연시킵니다. 특히 이벤트 핸들러와 함께 사용하여 사용자의 연속된 이벤트 발생을 제어하는 데 유용합니다. 다음은 _.debounce 함수를 사용하여 입력 필드에 입력이 멈출 때마다 검색 함수를 호출하는 예제입니다.
const searchInput = document.getElementById('search-input');
const search = _.debounce((query) => {
// 검색 함수 실행
console.log(`Searching for "${query}"...`);
}, 500);
searchInput.addEventListener('input', (event) => {
const query = event.target.value;
search(query);
});
이상으로 Lodash의 유틸리티 함수들과 간단한 사용 예제를 살펴보았습니다. 추가적인 함수들에 대한 자세한 내용은 Lodash 공식 문서를 참고하시기 바랍니다.