lodash와 lodash-es 차이점과 번들사이즈, 자주쓰이는 문법

JavaScript 개발을 하다 보면 코드의 효율성과 가독성을 높이기 위해 Lodash 라이브러리를 사용하는 경우가 많습니다. 이번 포스트에서는 Lodash의 기본 버전과 ECMAScript 모듈 형식인 lodash-es의 차이점, 번들 사이즈 최적화, 그리고 자주 쓰이는 문법과 예시 코드를 살펴보겠습니다.

 

Lodash란?

Lodash는 자바스크립트의 유틸리티 라이브러리 중 하나로, 배열, 객체, 함수 등 다양한 데이터 구조를 다루기 위한 유용한 기능들을 제공합니다. 코드를 간결하게 작성할 수 있도록 도와주며, 성능과 크로스 브라우징을 고려해 구현되어 있어 브라우저와 Node.js 환경 모두에서 널리 사용되고 있습니다.

lodash와 lodash-es의 차이점

Lodash

• 모듈 시스템:
  Lodash는 CommonJS 형식을 사용합니다.
  require('lodash')와 같이 전체 라이브러리를 불러와 사용하게 됩니다.
• 번들 크기:
  프로젝트에서 실제로 필요한 함수만 사용하더라도, 전체 라이브러리가 번들에 포함됩니다.
  이로 인해 불필요한 코드까지 포함되어 번들 사이즈가 커질 수 있습니다.

lodash-es

• 모듈 시스템:
  Lodash-es는 ECMAScript 모듈(ESM) 형식으로 제공됩니다.
  import { uniq } from 'lodash-es';와 같이 필요한 함수만 선택적으로 가져올 수 있습니다.
• 트리 쉐이킹(Tree Shaking):
  ESM 형식을 사용하면 빌드 도구(Webpack, Rollup 등)에서 트리 쉐이킹을 통해 사용되지 않는 코드를 제거할 수 있습니다.
  이를 통해 번들 사이즈를 최적화할 수 있습니다.

요약:

• lodash: CommonJS 기반 → 전체 라이브러리 불러오기 → 번들 사이즈가 클 수 있음
• lodash-es: ESM 기반 → 필요한 함수만 선택적으로 불러오기 → 트리 쉐이킹을 통한 번들 최적화 가능

 

주의사항:

• 모듈 시스템 지원: 프로젝트 환경(Node.js, 브라우저 등)에 따라 적절한 버전을 선택해야 합니다.
• 빌드 도구 설정: lodash-es를 사용할 경우, 트리 쉐이킹이 제대로 동작하도록 빌드 도구의 설정을 확인하세요.

Lodash의 특징

• 효율적인 함수 작성: 최적화된 함수를 제공하여 빠른 실행 속도를 지원합니다.
• 다양한 기능: 배열, 객체 조작, 함수형 프로그래밍 지원, 그리고 유용한 유틸리티 함수들을 제공합니다.
• 크로스 브라우징 지원: 다양한 브라우저 환경에서 호환되도록 설계되었습니다.
• 모듈화: 필요한 기능만 선택적으로 사용할 수 있도록 모듈화 되어 있어, 프로젝트의 요구사항에 맞게 최적화할 수 있습니다.

자주 쓰는 lodash-es 문법과 예시

lodash-es를 사용하면 필요한 함수만 가져와 사용할 수 있으므로 코드가 더욱 간결해지고, 번들 사이즈 최적화에도 도움이 됩니다. 아래는 자주 사용되는 lodash-es 함수들의 예시입니다.

 

1. 배열에서 중복 제거

import { uniq } from 'lodash-es';

const uniqueNumbers = uniq([1, 2, 2, 3, 4, 4, 5]);
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

 

2. 객체 배열에서 고유한 값 추출

import { uniqBy } from 'lodash-es';

const users = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 3, name: 'John' },
];

const uniqueNames = uniqBy(users, 'name');
console.log(uniqueNames); 
// [{ id: 1, name: 'John' }, { id: 2, name: 'Jane' }]

 

3. 배열 합치기

import { concat } from 'lodash-es';

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

const mergedArray = concat(array1, array2);
console.log(mergedArray); // [1, 2, 3, 4, 5, 6]

 

4. 배열 요소 정렬

import { sortBy } from 'lodash-es';

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

const sortedNumbers = sortBy(numbers);
console.log(sortedNumbers); // [1, 1, 2, 3, 3, 4, 5, 5, 6, 9]

 

5. 배열에서 특정 개수만큼 요소 추출

import { take } from 'lodash-es';

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

const slicedNumbers = take(numbers, 3);
console.log(slicedNumbers); // [1, 2, 3]

 

6. 객체 속성으로 그룹화

import { groupBy } from 'lodash-es';

const users = [
  { id: 1, name: 'John', age: 25 },
  { id: 2, name: 'Jane', age: 30 },
  { id: 3, name: 'Bob', age: 25 },
];

const groupedByAge = groupBy(users, 'age');
console.log(groupedByAge);
/*
{
  '25': [{ id: 1, name: 'John', age: 25 }, { id: 3, name: 'Bob', age: 25 }],
  '30': [{ id: 2, name: 'Jane', age: 30 }]
}
*/

 

7. 배열 요소 거르기

import { filter } from 'lodash-es';

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

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

 

8. 객체 배열에서 최댓값 찾기

import { maxBy } from 'lodash-es';

const users = [
  { id: 1, name: 'John', score: 80 },
  { id: 2, name: 'Jane', score: 95 },
  { id: 3, name: 'Bob', score: 88 },
];

const maxScoreUser = maxBy(users, 'score');
console.log(maxScoreUser); // { id: 2, name: 'Jane', score: 95 }

9. 배열 요소 무작위 섞기

import { shuffle } from 'lodash-es';

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

const shuffledNumbers = shuffle(numbers);
console.log(shuffledNumbers); // 무작위로 섞인 배열

10. 객체 배열에서 속성 추출

import { map } from 'lodash-es';

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

const userIds = map(users, 'id');
console.log(userIds); // [1, 2, 3]

 

 

끝