[javascript] Lodash의 주요 기능과 기능 예제

21 Nov 2023

javascript

Lodash는 JavaScript 유틸리티 라이브러리로, 다양한 기능과 유용한 도구를 제공합니다. 이번 글에서는 Lodash의 주요 기능과 함께 기능 예제를 알아보겠습니다.

주요 기능

1. Collection 관련 기능

Lodash는 배열과 객체를 다루기 위한 다양한 함수를 제공합니다. 몇 가지 대표적인 기능은 다음과 같습니다.

_.each: 배열 또는 객체의 각 요소에 대해 반복 작업을 수행합니다.
_.filter: 특정 조건으로 필터링된 요소들로 이루어진 배열을 반환합니다.
_.map: 각 요소에 함수를 적용하여 새로운 배열을 반환합니다.
_.find: 특정 조건을 만족하는 첫 번째 요소를 반환합니다.
_.groupBy: 지정된 속성을 기준으로 요소들을 그룹화한 객체를 반환합니다.

2. 함수 관련 기능

Lodash는 함수와 관련된 다양한 기능을 제공합니다. 대표적인 예제는 다음과 같습니다.

_.debounce: 함수를 지연 실행하는 디바운스 기능을 제공합니다.
_.throttle: 함수 호출을 제어하여 일정 시간 동안 한 번만 실행되도록 합니다.
_.memoize: 함수 호출 결과를 캐싱하여 중복 호출을 방지합니다.

3. 문자열 관련 기능

Lodash는 문자열을 다루기 위한 다양한 함수를 제공합니다. 몇 가지 예제는 다음과 같습니다.

_.camelCase: 문자열을 카멜 케이스로 변환합니다.
_.truncate: 문자열을 지정된 길이로 자르고 생략 부호를 추가합니다.

기능 예제

Collection 관련 기능 예제

const users = [
  { name: 'John', age: 25, gender: 'male' },
  { name: 'Jane', age: 30, gender: 'female' },
  { name: 'Mike', age: 35, gender: 'male' },
];

// 각 유저의 이름을 출력
_.each(users, user => {
  console.log(user.name);
});

// 남성 유저들의 배열 반환
const males = _.filter(users, { gender: 'male' });

// 유저 나이 총합 계산
const totalAge = _.reduce(users, (sum, user) => sum + user.age, 0);

함수 관련 기능 예제

// 디바운스 함수 예제
const searchUsers = _.debounce(() => {
  // 사용자 검색 로직
}, 300);

// 즉시 실행하지 않고 300ms 후에 한 번 실행됨
searchUsers();

// 스크롤 이벤트를 처리하는 스로틀 함수 예제
window.addEventListener('scroll', _.throttle(() => {
  // 스크롤 이벤트 처리 로직
}, 1000));

// 중복 계산을 방지하기 위한 함수 예제
const calculateSum = _.memoize((a, b) => {
  console.log('Calculating...');
  return a + b;
});

// 처음 호출 시에만 계산 로직이 실행됨
console.log(calculateSum(2, 3)); // Calculating... 5
console.log(calculateSum(2, 3)); // 5

문자열 관련 기능 예제

const name = 'hello_world';

// 카멜 케이스로 변환
const camelCaseName = _.camelCase(name);
console.log(camelCaseName); // helloWorld

const longText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';

// 문자열 자르기
const truncatedText = _.truncate(longText, { length: 20 });
console.log(truncatedText); // Lorem ipsum dolor...

위 예제들은 Lodash의 일부 기능과 예제를 보여주는 것이며, Lodash는 이 외에도 다양한 유용한 기능을 제공합니다. Lodash의 공식 문서를 참고하여 더 많은 기능을 확인해보세요.

참고 자료:

Lodash 공식 문서: https://lodash.com/