[javascript] Lodash의 품질 관리 함수들과 사용 예제
Lodash는 JavaScript 유틸리티 라이브러리로서, 다양한 기능을 제공하여 개발자들의 생산성을 향상시키는 훌륭한 도구입니다. 이번에는 Lodash의 품질 관리 함수들에 대해 알아보고, 사용 예제를 살펴보겠습니다.
1. Lodash 품질 관리 함수들
1.1. debounce
debounce 함수는 지정된 시간 동안 연속적으로 호출되는 함수를 제어하는 데 사용됩니다. 이는 사용자 입력과 같이 빈번하게 발생하는 이벤트를 처리하는 데 유용합니다.
사용 예제:
import { debounce } from 'lodash';
// 연속적인 입력을 처리하는 함수
const handleInput = debounce((value) => {
console.log(value);
}, 500); // 500ms 동안 입력이 없으면 함수가 실행됩니다.
// 입력 이벤트 리스너 등록
document.getElementById('search-input').addEventListener('input', (event) => {
handleInput(event.target.value);
});
1.2. throttle
throttle 함수는 지정된 시간 동안 연속적으로 호출되는 함수를 제어하는 데 사용됩니다. 이는 스크롤 이벤트와 같이 고비용 연산을 수행해야 하는 경우에 유용합니다.
사용 예제:
import { throttle } from 'lodash';
// 스크롤 이벤트를 처리하는 함수
const handleScroll = throttle(() => {
console.log('스크롤 이벤트 발생');
}, 1000); // 1000ms 동안 최대 1번만 함수가 실행됩니다.
// 스크롤 이벤트 리스너 등록
window.addEventListener('scroll', handleScroll);
2. 사용 예제
2.1. Lodash의 효율적인 배열 조작
import { chunk, compact, difference } from 'lodash';
// 배열을 지정된 크기로 나누기
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const chunks = chunk(arr, 3);
console.log(chunks); // [[1, 2, 3], [4, 5, 6], [7, 8, 9], [10]]
// 배열에서 falsy한 값 제거
const arrWithFalsyValues = [0, 1, false, 2, '', 3, undefined, null, 4, NaN];
const compactArr = compact(arrWithFalsyValues);
console.log(compactArr); // [1, 2, 3, 4]
// 두 개의 배열에서 다른 요소들만 추출
const arr1 = [1, 2, 3, 4, 5];
const arr2 = [3, 4, 5, 6, 7];
const diff = difference(arr1, arr2);
console.log(diff); // [1, 2]