[TIL 61] lodash 사용하기

lodash란?

데이터 구조를 쉽게 핸들링할 수 있게 도와주는 javascript 라이브러리.
_.처럼 lodash wrapper로 변수를 감싸서 사용할 수 있다.
브라우저, Node.js 환경에서 모두 지원한다.

설치

브라우저

<script src="lodash.js"></script>

Node.js

npm i --save lodash

lodash가 제공하는 메소드들은 정말 많지만 (공식문서 참고), 대표적으로 많이 사용되고 유용한 메소드들을 정리해보았다.

Lang Method

_.isNan

값이 null인지 판별한다.

_.isNil

값이 null 혹은 undefined인지 판별한다.

_.isNil(null); //true
_.isNil(undefined); //true

_.cloneDeep

자식 요소를 포함하여 새로운 값이 매핑되는 형태로 복사해준다. (깊은 복사)

const obj = {
  a: 999,
  b: {
    say: 'hello'
  }
};

newObj = _.cloneDeep(obj);

obj === newObj // false
obj.a === newObj.a // false
obj.b === newObj.b // false

Array Method

_.findindex

조건을 만족하는 데이터의 첫 번째 인덱스를 리턴한다. 만족하는 인덱스를 찾지 못한 경우 -1을 리턴한다.

const  users = [
  { user: 'barney', age: 36 },
  { user: 'fred',  age: 40 },
  { user: 'travis', age: 37}
];

// age가 40인 객체가 처음으로 나오는 index 반환
_.findIndex(users, function(user) {
  return user.age === 40;
});
// -> 2

_.fill

입력받은 array에 value을 채워넣는다.

_.pull

array에서 특정 값을 제거한 배열을 리턴한다.

const array = ['hi', 'hello', 'hi', 'bye', 'bye', 'hello', 'seeyou'];

_.pull(array, 'bye', 'seeyou');

//result
[
   "hi",
   "hello",
   "hi",
   "hello"
]

_.uniq

array에서 중복값을 제거한 배열을 리턴한다.

const array = ['hi', 'hello', 'hi', 'bye', 'bye', 'hello', 'seeyou'];

_.uniq(array);

//result
[
   "hi",
   "hello",
   "bye",
   "seeyou"
]

_.uniqBy

특정 기준으로 고유의 값(unique)만 가져올 수 있다.

_.uniqBy([2.1, 1.2, 2.2], Math.floor);
// [2.1, 1.2]

remove

조건에 해당하는 값을 제거하고 리턴한다.

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

const evens = remove(array, function(n){
   return n % 2 === 0;
});

console.log(array);
// [1,3]

console.log(evens);
// [2,4]

_.flattern

2차원 배열을 1차원으로 만든다. 다차원 배열일 경우 모든 배열을 펼치려면 flatternDeep를 사용해야한다.

const gridList = [
  [
    {x: 1, y: 1},
    {x: 1, y: 2},
  ],
    [
    {x: 2, y: 1},
    {x: 2, y: 2},
  ]
]

_.flatten(gridList);

// result
{x: 1, y: 1},
{x: 1, y: 2},
{x: 2, y: 1},
{x: 2, y: 2},

Object Method

._get(object, path, [defaultValue])

객체 경로의 값을 가져온다. 확인된 값이 undefined인 경우 defaultValue가 리턴된다.

const object = { 'a': [{ 'b': { 'c': 3 } }] };
 
_.get(object, 'a[0].b.c');
// 3
_.get(object, ['a', '0', 'b', 'c']);
// 3
_.get(object, 'a.b.c', 'defaultValue');
// 'defaultValue'

_.assign

object를 할당한다. 이미 값이 있으면 덮어씌워진다.

_.assign(
  { banana : 1 }, { orange : 3 },
  { banana : "yello" } , { banana : "good"}
)

// result
{
   "banana": "good",
   "orange": 3
}

Collection Method

_.filter

배열, 객체에도 사용할 수 있다.

const  users = [
  { user: 'barney', age: 36, active: true  },
  { user: 'fred',  age: 40, active: true  },
  { user: 'travis', age: 37, active: true }
];

_.filter(users, function(o) {
  return o.active;
});

//result
[
   {
      "user": "barney",
      "age": 36,
      "active": true
   },
   {
      "user": "fred",
      "age": 40,
      "active": true
   },
   {
      "user": "travis",
      "age": 37,
      "active": true
   }
]

_.sortBy

const users = [
  { 'user': 'fred',   'age': 48 },
  { 'user': 'barney', 'age': 36 },
  { 'user': 'fred',   'age': 40 },
  { 'user': 'barney', 'age': 34 }
];
 
_.sortBy(users, [function(o) { return o.user; }]);
// [['barney', 36], ['barney', 34], ['fred', 48], ['fred', 40]]
 
_.sortBy(users, ['user', 'age']);
// [['barney', 34], ['barney', 36], ['fred', 40], ['fred', 48]]