lodash 사용법 및 유용 기능 총 정리

Lodash는 JavaScript에서 자주 사용되는 배열, 객체, 문자열, 함수 등을 다루기 위한 유틸리티 라이브러리이다.

배열 정리, 객체 병합, 깊은 복사(Deep Clone), 데이터 필터링, 성능 최적화 등의 작업을 쉽게 처리할 수 있도록 도와준다.

1. Lodash 설치

Lodash를 사용하려면 npm 또는 CDN을 통해 설치할 수 있다.

1️⃣ npm을 이용한 설치

npm install lodash

2️⃣ ES6 import 방식으로 사용

import _ from 'lodash';

3️⃣ CDN을 이용한 브라우저에서 사용

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>

2. 배열 관련 함수

 

1️⃣ _.chunk - 배열을 일정한 크기로 나누기

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

console.log(_.chunk(array, 2));
// 결과: [[1, 2], [3, 4], [5, 6]]

 

• 배열을 지정한 크기로 나눠서 새로운 배열을 생성

---

2️⃣ _.difference - 두 배열의 차집합 구하기

const array1 = [1, 2, 3, 4];
const array2 = [2, 4];

console.log(_.difference(array1, array2));
// 결과: [1, 3]​

• 첫 번째 배열에서 두 번째 배열에 존재하는 요소를 제거한 결과를 반환

---

3️⃣ _.uniq - 배열의 중복 요소 제거

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

console.log(_.uniq(array));
// 결과: [1, 2, 3, 4, 5]

• 배열에서 중복된 요소를 제거하고 새로운 배열을 반환

---

4️⃣ _.flatten - 다차원 배열을 평탄화

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

console.log(_.flatten(nestedArray));
// 결과: [1, 2, [3, [4]], 5]

console.log(_.flattenDeep(nestedArray));
// 결과: [1, 2, 3, 4, 5]

 

• _.flatten()은 1단계만 평탄화,
• _.flattenDeep()은 모든 중첩 배열을 평탄화

3. 객체 관련 함수

1️⃣ _.cloneDeep - 객체 깊은 복사

const obj = { a: 1, b: { c: 2 } };

const clone = _.cloneDeep(obj);
clone.b.c = 99;

console.log(obj.b.c); // 결과: 2 (원본 객체가 변경되지 않음)
console.log(clone.b.c); // 결과: 99

• _.cloneDeep()을 사용하면 객체 내부의 중첩된 값까지 새로운 객체로 복사

---

2️⃣ _.merge - 객체 병합

const obj1 = { a: 1, b: { c: 2 } };
const obj2 = { b: { d: 3 }, e: 4 };

console.log(_.merge(obj1, obj2));
// 결과: { a: 1, b: { c: 2, d: 3 }, e: 4 }

• 객체를 재귀적으로 병합
• 중첩된 객체의 속성이 덮어쓰여짐

---

3️⃣ _.pick & _.omit - 특정 키만 선택 또는 제외

const user = { id: 1, name: 'Alice', role: 'admin', age: 25 };

console.log(_.pick(user, ['id', 'name']));
// 결과: { id: 1, name: 'Alice' }

console.log(_.omit(user, ['role', 'age']));
// 결과: { id: 1, name: 'Alice' }

• _.pick() : 필요한 속성만 선택
• _.omit() : 특정 속성을 제외

4. 컬렉션 관련 함수 (배열 + 객체)

Lodash는 배열과 객체를 쉽게 순회하고 데이터를 변환할 수 있도록 도와줌

1️⃣ _.map - 배열 또는 객체를 변환

 

const users = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];

console.log(_.map(users, 'name'));
// 결과: ['Alice', 'Bob']

• 배열을 순회하며 특정 속성 값을 추출하거나 변환

---

2️⃣ _.filter - 조건에 맞는 요소 필터링

const users = [
  { id: 1, name: 'Alice', active: true },
  { id: 2, name: 'Bob', active: false },
  { id: 3, name: 'Charlie', active: true }
];

console.log(_.filter(users, { active: true }));
// 결과: [{ id: 1, name: 'Alice', active: true }, { id: 3, name: 'Charlie', active: true }]

• _.filter()는 특정 조건을 만족하는 요소만 반환

---

3️⃣ _.find - 조건을 만족하는 첫 번째 요소 찾기

const users = [
  { id: 1, name: 'Alice', active: true },
  { id: 2, name: 'Bob', active: false }
];

console.log(_.find(users, { active: false }));
// 결과: { id: 2, name: 'Bob', active: false }​

• _.find()는 조건을 만족하는 첫 번째 요소를 반환

5. 성능 최적화 함수

Lodash는 성능을 최적화할 수 있는 함수도 제공

1️⃣ _.debounce - 이벤트 호출 제한

 

const handleResize = _.debounce(() => {
  console.log('Resized!');
}, 300);

window.addEventListener('resize', handleResize);

• resize 이벤트가 연속으로 발생할 경우, 마지막 이벤트만 실행
• 사용 예: 검색 입력 자동완성, 버튼 연속 클릭 방지 등

---

2️⃣ _.throttle - 일정 시간마다 실행

const handleScroll = _.throttle(() => {
  console.log('Scrolling...');
}, 1000);

window.addEventListener('scroll', handleScroll);

• 지정된 시간 동안 한 번만 실행되도록 제한
• 사용 예: 무한 스크롤, 스크롤 이벤트 최적화 등

정리

기능	함수	설명
배열 조작	_.chunk	배열을 일정 크기로 나눔
	_.difference	두 배열의 차이 계산
	_.uniq	중복 요소 제거
객체 조작	_.cloneDeep	깊은 복사
	_.merge	객체 병합
	_.pick, _.omit	특정 속성 선택 또는 제외
컬렉션	_.map, _.filter, _.find	데이터 변환 및 필터링
성능 최적화	_.debounce	연속 호출 방지
	_.throttle	일정 주기로 실행