Lodash, 더 쉽고 효율적인 코드 작성하기

자바스크립트/타입스크립트 활용하여 서버를 개발 하면서 반복되는 작업이나 복잡한 데이터 처리로 인한 코드가 길어지는 현상을 어떻게 해결 할까? 를 늘 고민을 하고 있었습니다.

Lodash는 제가 하고 있는 고민을 어느 정도 해결해주는 라이브러리입니다.

자주 사용하는 함수를 예시와 함께 정리하도록 하겠습니다.

데이터 검사

_.isEmpty : 값이 비어있는지 확인

• _.isEmpty 함수는 Lodash 라이브러리에서 제공하는 기능 중 하나로, 입력된 값이 비어있는지 여부를 확인해주는 함수입니다.
• 이 함수는 다양한 유형의 값들에 대해 사용할 수 있습니다. 예를 들어, 배열, 객체, 문자열 등에 대해서 비어있는지 여부를 판단합니다.
• _.isEmpty 함수는 값이 비어있을 경우 true를 반환하고, 값이 존재할 경우 false를 반환합니다.
• 이 함수는 특히 복잡한 데이터 구조를 다루는데 있어 유용하게 사용될 수 있습니다.

_.isEmpty([])         :  true   // 빈 배열
_.isEmpty([1, 2, 3])  :  false  // 값이 있는 배열
_.isEmpty(null)       :  true   // null 값
_.isEmpty(true)       :  true   // 불리언 값
_.isEmpty(1)          :  true   // 숫자 값
_.isEmpty({ a: 1 })   :  false  // 값이 있는 객체

_.isEqual : 두 값의 동등성 확인

• _.isEqual 함수는 Lodash 라이브러리에서 제공하는 기능 중 하나로, 두 입력된 값이 동일한지 여부를 확인해주는 함수입니다.
• 이 함수는 기본 자료형 뿐만 아니라 객체나 배열 등에 대해서도 깊은 비교를 수행합니다.
• _.isEqual 함수는 두 값이 동일할 경우 true를 반환하고, 그렇지 않을 경우 false를 반환합니다.

_.isEqual([1, 2, 3], [1, 2, 3])  :  true   // 동일한 배열
_.isEqual({ a: 1 }, { a: 1 })     :  true   // 동일한 객체
_.isEqual(1, 1)                   :  true   // 동일한 숫자
_.isEqual('a', 'a')               :  true   // 동일한 문자
_.isEqual(null, null)             :  true   // 동일한 null 값
_.isEqual(undefined, undefined)   :  true   // 동일한 undefined 값
_.isEqual(NaN, NaN)               :  true   // 동일한 NaN 값

_.isEqualWith : 사용자 정의 동등 비교

• _.isEqualWith 함수는 _.isEqual과 비슷하지만, 사용자가 정의한 비교 함수를 추가로 인수로 받아 그 함수를 사용하여 동등성을 비교합니다.
• 사용자 정의 비교 함수는 두 값을 인수로 받아 true 또는 false를 반환해야 합니다.

function compare(a, b) {
  return a === b;
}

_.isEqualWith([1, 2, 3], [1, 2, 3], compare)  :  true   // 동일한 배열
_.isEqualWith({ a: 1 }, { a: 1 }, compare)     :  true   // 동일한 객체
_.isEqualWith(1, 1, compare)                   :  true   // 동일한 숫자
_.isEqualWith('a', 'a', compare)               :  true   // 동일한 문자
_.isEqualWith(null, null, compare)             :  true   // 동일한 null 값
_.isEqualWith(undefined, undefined, compare)   :  true   // 동일한 undefined 값
_.isEqualWith(NaN, NaN, compare)               :  false  // NaN 값은 사용자 정의 비교함수에 따라 결과가 다를 수 있습니다.

배열 함수

_.filter: 조건에 맞는 요소 필터링

• _.filter 함수는 Lodash 라이브러리에서 제공하는 기능 중 하나로, 입력된 컬렉션(배열이나 객체)에서 특정 조건에 일치하는 요소만을 추출하여 새로운 컬렉션을 생성하는 함수입니다.
• 이 함수는 첫 번째 인자로 컬렉션, 두 번째 인자로 조건을 나타내는 함수를 받습니다. 조건 함수는 각 요소를 인자로 받아 조건에 맞는지 (true) 아닌지 (false)를 반환합니다.
• 조건에 맞는 요소가 없을 경우 빈 배열을 반환합니다.

실전 예제:

let users = [
  { 'user': 'barney', 'age': 36, 'active': true },
  { 'user': 'fred',   'age': 40, 'active': false },
  { 'user': 'pebbles','age': 1,  'active': true }
];

let result = _.filter(users, function(o) { return !o.active; });

// result : [{ 'user': 'fred',   'age': 40, 'active': false }]

let resultAge = _.filter(users, function(o) { return o.age < 40; });

// resultAge : [{ 'user': 'barney', 'age': 36, 'active': true }, { 'user': 'pebbles','age': 1,  'active': true }]

위의 예제에서는 _.filter 함수를 사용하여 active 속성이 false인 사용자와 age가 40 미만인 사용자를 필터링하고 있습니다.

_.groupBy : 특정 기준으로 그룹화

• _.groupBy 함수는 Lodash 라이브러리에서 제공하는 기능 중 하나로, 입력된 컬렉션(배열이나 객체)의 요소들을 특정 기준에 따라 그룹화하는 함수입니다.
• 이 함수는 첫 번째 인자로 컬렉션, 두 번째 인자로 기준을 나타내는 함수 또는 속성 문자열을 받습니다. 기준 함수는 각 요소를 인자로 받아 그룹화 할 기준 값을 반환합니다.
• 이 함수는 객체를 반환하며, 객체의 키는 기준 값, 값은 그룹화된 요소들의 배열입니다.

실전 예제:

let users = [
  { 'user': 'barney', 'age': 36, 'active': true },
  { 'user': 'fred',   'age': 40, 'active': false },
  { 'user': 'pebbles','age': 1,  'active': true }
];

let groupedByAge = _.groupBy(users, 'age');

/*
groupedByAge : {
  "1": [{ 'user': 'pebbles', 'age': 1, 'active': true }],
  "36": [{ 'user': 'barney', 'age': 36, 'active': true }],
  "40": [{ 'user': 'fred', 'age': 40, 'active': false }]
}
*/

let groupedByActive = _.groupBy(users, function(o) { return o.active; });

/*
groupedByActive : {
  "true": [
    { 'user': 'barney', 'age': 36, 'active': true },
    { 'user': 'pebbles','age': 1,  'active': true }
  ],
  "false": [{ 'user': 'fred',   'age': 40, 'active': false }]
}
*/

위의 예제에서는 _.groupBy 함수를 사용하여 age 속성으로 그룹화하고, active 속성으로 그룹화하는 예를 보여줍니다.

_.chunk

_.chunk : 부분 배열로 나누는 기능

Lodash의 _.chunk 함수는 배열을 지정한 크기의 부분 배열로 나누는 기능을 제공합니다. 이 함수는 주로 페이지네이션 기능 구현시에 유용하게 사용됩니다.

_.chunk 함수는 첫 번째 인자로 배열, 두 번째 인자로 부분 배열의 크기를 받습니다. 이 함수는 주어진 배열을 부분 배열의 크기로 나누어 새로운 배열을 생성하고 반환합니다. 만약 부분 배열의 크기가 주어진 배열의 길이보다 크거나 같으면, 원본 배열이 그대로 반환됩니다.

실전 예제: _.chunk 함수를 사용하여 페이지네이션을 구현하는 예시입니다.

const _ = require('lodash');

const items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];  // 아이템 배열
const pageSize = 3;  // 페이지당 아이템 개수
const currentPage = 2;  // 현재 페이지 번호

// 아이템 배열을 페이지당 아이템 개수로 나눠서 새로운 배열을 생성
const paginatedItems = _.chunk(items, pageSize);

// 현재 페이지에 해당하는 아이템 배열을 가져옴
const currentItems = paginatedItems[currentPage - 1];

console.log(currentItems); // [4, 5, 6]

이 코드는 10개의 아이템을 페이지당 3개씩 보여주는 페이지네이션 기능을 구현합니다. _.chunk 함수를 사용하여 아이템 배열을 페이지당 아이템 개수로 나누고, 현재 페이지에 해당하는 아이템 배열을 출력합니다.

이렇게 _.chunk 함수는 페이지네이션 뿐만 아니라, 큰 데이터를 작은 단위로 나누어 처리할 때 유용하게 사용될 수 있습니다.