npm i lodash 알아보고 시작하자

깔끔하고 효율적인 코드를 작성하고자 할 때, lodash 라이브러리를 사용하면 편리합니다. npm i lodash를 사용하면 다양한 유틸리티 함수들을 쉽게 프로젝트에 통합하고 코드의 가독성과 유지보수성을 높일 수 있습니다. 배열, 객체, 문자열 처리부터 고급 함수형 프로그래밍까지 사용 가능합니다.

 

lodash 사용하는 이유는 무엇일까?

• 풍부한 유틸리티 함수

  • 단순한 배열 필터링과 맵핑에서부터, 객체 속성 접근까지 특히 디바운스(debounce)/스로틀(throttle)과 같은 고급 기능까지, lodash는 개발에서 자주 사용하는 패턴을 깔끔하게 해결해주는 다양한 함수를 제공합니다.

• 일관된 API 디자인

  • 함수명이 직관적이고, 동작 방식이 일관적입니다. 한 번 패턴을 숙달하면 다양한 상황에서 재활용하기 좋습니다. 코드 리뷰와 협업시에도 많이 사용됩니다.

• 성능 최적화

  • JavaScript 엔진 특성에 맞춰 최적화되어 있어, 순수하게 JavaScript 구현하는 것보다 조금 더 빠르고 안정적인 성능을 낼 수 있습니다.

 

설치 방법

npm i lodash

 

자주 사용하는 함수들

1. _.map

배열이나 객체를 순회하며 원하는 변환을 쉽게 적용할 수 있습니다.

const arr = [1, 2, 3];
const result = _.map(arr, x => x * 2);
// result: [2, 4, 6]

2. _.debounce

개인적으로 가장 많이 사용하는 기능입니다. 짧은 시간 동안 너무 많이 실행되는 함수를 제어할 때 유용합니다. 스크롤 이벤트, 검색어 자동완성 등 상황에서 부하를 감소시킵니다.

const handleResize = _.debounce(() => {
  console.log('윈도우 사이즈 변경 처리');
}, 200);
window.addEventListener('resize', handleResize);

3. _.cloneDeep

객체나 배열의 깊은 복사를 편리하게 수행합니다.

const obj = { a: 1, b: { c: 2 } };
const newObj = _.cloneDeep(obj);
newObj.b.c = 3;
console.log(obj.b.c); // 여전히 2

map, entries등의 표준함수를 사용해도 문제 없습니다. lodash이외 다양한 함수형 유틸리티 라이브러리도 존재합니다. lodash는 생산성을 높여주는 효과가 있지만, 표준함수를 선호하는 경우 Vanilla JS로 대체해도 문제 없습니다.