치춘짱베리굿나이스

lodash 본문

ClientSide/라이브러리

lodash

치춘 2022. 5. 14. 12:27

lodash

설치

$> npm i lodash
$> yarn add lodash

npm 링크

Contributors

lodash

용례

이름이 lodash인 이유는 라이브러리를 사용할 때 언더바 (_ = low dash) 를 쓰기 때문이다

객체, 배열 등의 자바스크립트 / 타입스크립트 기본 데이터 구조를 쉽게 다룰 수 있도록 도와주는 라이브러리

심지어 성능도 좋아 라이브러리를 가져다 쓴다고 무거워지거나 성능저하가 크게 일어나지 않는다

중복값 제거, 객체 데이터 추출, 깊은 복사, 특정 데이터 삭제 등 바닐라 자바스크립트로 두세줄 걸릴 만한 일들을 lodash를 사용하면 한 줄 정도만에 간단하게 끝낼 수 있다

이제 배열에서 요소 하나 삭제할 때 slice 두번 하고 합치는 더러운 일을 안 해도 된다.......

Lodash 공식 문서 (훨씬 많은 메서드 정보 있음)

Lodash Documentation

이거 하나 끼고 코딩하면 든든하다

메서드 종류가 정말정말 많아서 주로 쓰일 것 같은 메서드만 정리해보고자 한다

용례: 값 가져오기

배열의 첫 번째 요소 가져오기: _.head

let arr = [111, 222, 333, 444, 555, 111, 222];

console.log(_.head(arr));

// 111

head 메서드를 사용하면 배열의 첫 번째 값을 반환한다

값이 없을 경우 undefined를 반환한다

배열의 마지막 요소 가져오기: _.last

let arr = [111, 222, 333, 444, 555, 111, 222];

console.log(_.last(arr));

// 222

last 메서드를 사용하면 배열의 마지막 값을 반환한다

배열의 끝을 모를 때 arr[arr.length - 1] 을 쓸 필요가 없다

배열 / 객체에서 랜덤 값 추출하기: _.sample

let arr = [111, 222, 333, 444, 555, 111, 222];

console.log(_.sample(arr));

// 111 => 배열 안의 요소들 중 랜덤으로 반환

sample 메서드를 사용하면 배열 내에서 아무 값이나 랜덤으로 반환한다

돌려돌려 돌림판 만들 때 좋을 듯

let obj = { name: 'aaa', age: 20, phoneNumber: 11111111 };

console.log(_.sample(obj)

//20 => 객체 안의 요소들 중 랜덤으로 value를 반환

객체도 적용되며, key / value 쌍이 아닌 value만 랜덤으로 반환한다

용례: 검색하기

배열에서 특정 값 검색하기: _.find

let arr = [
  { name: 'peter', age: 16 },
  { name: 'james', age: 11 },
  { name: 'vivian', age: 13 },
];

console.log(_.find(arr, (v) => v.age > 12));

// {name: 'peter', age: 16}

find 메서드의 두 번째 인자로 필터링 함수를 지정하면, 해당 함수가 true를 반환하는 첫 번째 값을 반환한다

일반 배열은 값을 그대로 반환하기만 하기 때문에, 객체가 담긴 배열에서 사용하면 좋을 것 같다

예시로 v.age를 조건으로 검색하면 조건에 부합하는 첫 번째 객체를 그대로 반환하기 때문이다

결과값이 여러 개더라도 첫 번째 결과값만을 반환한다

let arr = [
  { name: 'peter', age: 16 },
  { name: 'james', age: 11 },
  { name: 'vivian', age: 13 },
];

console.log(_.find(arr, (v) => v.age > 17));

// undefined

조건에 맞는 값이 없을 경우 undefined를 반환한다

배열에서 특정 값의 인덱스 검색하기: _.findIndex

let arr = [111, 222, 333, 444, 555, 111, 222];

console.log(_.findIndex(arr, (v) => v === 555));

// 4

findIndex 메서드의 두 번째 인자로 필터링 함수를 지정하면, 해당 함수가 true를 반환하는 첫 번째 값의 인덱스를 반환한다

객체 배열 뿐만 아닌 일반 배열에서도 유용한 것이, 값을 그대로 반환하는게 아닌 인덱스를 반환하기 때문에 요긴하게 쓰인다

첫 번째 결과값이 아닌 마지막 결과값을 알고 싶다면 findLastIndex 메소드를 사용하자

let arr = [
  { name: 'peter', age: 16 },
  { name: 'james', age: 11 },
  { name: 'vivian', age: 13 },
];

console.log(_.findIndex(arr, (v) => v.age < 14));

// 1

당연하지만 객체 배열에서도 가능하다

용례: 값 제거하기

배열에서 특정 값 제거하기: _.pull

let arr = [111, 222, 333, 444, 555, 111, 222];

console.log(_.pull(arr, 111));

// [222, 333, 444, 555, 222]

pull 메소드의 두 번째 인자로 배열에서 삭제하고 싶은 값을 지정하면 해당 값이 삭제된 배열을 반환한다

let arr = [111, 222, 333, 444, 555, 111, 222];

console.log(_.pull(arr, 111, 222));

// [333, 444, 555]

삭제하고 싶은 값을 여러 개 지정할 수 있다 (완전 짱 편함)

배열에서 중복 값 삭제하기: _.uniq

let arr = [111, 222, 333, 444, 555, 111, 222];

console.log(_.uniq(arr));

// [111, 222, 333, 444, 555]

uniq 메소드를 사용하면 중복 값을 삭제한 배열을 반환한다

객체 배열에는 적용되지 않는다

객체 배열에서 특정 기준으로 중복 값 삭제하기: _.uniqBy

const arr = [
  { name: 'james', age: 16 },
  { name: 'angular', age: 18 },
  { name: 'svelte', age: 16 },
  { name: 'react', age: 10 },
  { name: 'vue', age: 12 },
];

console.log(_.uniqBy(arr, 'age'));
//  [
//      { name: 'james', age: 16 },
//      { name: 'angular', age: 18 },
//      { name: 'react', age: 10 },
//      { name: 'vue', age: 12 },
//  ];

uniqBy 메서드의 두 번째 인자로 중복 값을 거르고자 하는 키 이름을 지정하면 해당 키에 대하여 중복을 제거한다

위의 예시에서는 age 키의 중복을 제거하고자 했고, 결과적으로 같은 age를 갖는 ‘james’ 와 ‘svelte’ 중 먼저 등장한 ‘james’만 살아남았다

배열에서 특정 값 필터로 제거하기: _.remove

let arr = [111, 222, 333, 111, 111];

console.log(_.remove(arr, (n) => n === 111));
console.log(arr);

// [111] => 삭제된 값들
// [222, 333] => 삭제하고 남은 값들

remove 메서드의 첫번째 인자로 정리하고자 하는 배열, 두 번째 인자로 필터링 조건 함수를 넣는다

remove 메서드는 필터링 함수에서 true를 반환하는 요소들을 반환하고, 첫 번째 인자로 넣은 배열에서 해당 요소들이 삭제된다

let arr = [
  { name: 'peter', age: 16 },
  { name: 'james', age: 11 },
  { name: 'vivian', age: 13 },
];

console.log(_.remove(arr, { age: 11 }));
console.log(arr);

// [{name: 'james', age: 11}] => 삭제된 값들
// [{name: 'peter', age: 16}, {name: 'vivian', age: 13}] => 삭제하고 남은 값들

함수 대신 객체를 넣으면 해당 key에 대하여 value를 가진 모든 원소를 지운다

let arr = [
  { name: 'peter', age: 16 },
  { name: 'james', age: 11 },
  { name: 'vivian', age: 13 },
];
console.log(_.remove(arr, (v) => v.age < 15));
console.log(arr);

// [{name: 'james', age: 11}, {name: 'vivian', age: 13}] => 삭제된 값들
// [{name: 'peter', age: 16}] => 삭제하고 남은 값들

물론 객체에 대한 조건식도 가능하다

용례: 조작하기

배열 채우기: _.fill

let arr = [111, 222, 333, 444, 555, 111, 222];

console.log(_.fill(arr, 0));

// [0, 0, 0, 0, 0, 0, 0]

fill 메서드로 전체 배열을 두 번째 인자값으로 덮어씌울 수 있다

let arr = [111, 222, 333, 444, 555, 111, 222];

console.log(_.fill(arr, 0, 1, 2));

// [111, 0, 333, 444, 555, 111, 222]

세번째, 네번째 인자를 제공할 경우 세번째 인자 인덱스부터 네번째 인자 인덱스 전까지 값을 채운다

예시에서는 세번째 인자가 1, 네번째 인자가 2이기 때문에 1 ≤ i < 2 인 인덱스에만 값을 채웠다

let arr = [111, 222, 333, 444, 555, 111, 222];

console.log(_.fill(arr, 0, 1));

// [111, 0, 0, 0, 0, 0, 0]

네 번째 인자를 명시하지 않는다면, 세 번째 인자 인덱스부터 끝까지 값을 채운다

예시에서는 세 번째 인자가 1이기 때문에 1 ≤ i < arr.length 인 인덱스에 값을 채웠다

다차원 배열 깊이 1씩 줄이기: _.flatten

let arr = [111, 222, [333, 444, [555, 111, 222]]];

console.log(_.flatten(arr));

// [111, 222, 333, 444, [555, 111, 222]]

flatten 메서드는 이차원 이상 배열의 깊이를 1씩 줄인 새 배열을 반환한다

다차원 배열 깊이 1로 만들기: _.flattenDeep

let arr = [111, 222, [333, 444, [555, 111, 222]]];

console.log(_.flattenDeep(arr));

// [111, 222, 333, 444, 555, 111, 222]

flattenDeep 메서드로 깊이 3 이상의 배열도 1로 만든다

배열 합치고 중복 제거하기: _.union

let arr = [111, 222, 333];
let arr2 = [333, 444, 555];

console.log(_.union(arr, arr2));

// [111, 222, 333, 444, 555]

union 메서드는 인자로 들어온 배열을 합치고 중복값을 제거한다

let arr = [111, 222, 333];
let arr2 = [333, 444, 555];
let arr3 = [444, 555, 666, 777];

console.log(_.union(arr, arr2, arr3));

// [111, 222, 333, 444, 555, 666, 777]

배열의 개수는 제한이 없다

let arr = [
  { name: 'peter', age: 16 },
  { name: 'james', age: 11 },
  { name: 'vivian', age: 13 },
];

let arr2 = [
  { name: 'peter', age: 16 },
  { name: 'thomas', age: 18 },
  { name: 'rachel', age: 20 },
];

console.log(_.union(arr, arr2));

// [
//  { name: 'peter', age: 16 },
//  { name: 'james', age: 11 },
//  { name: 'vivian', age: 13 },
//  { name: 'peter', age: 16 },
//  { name: 'thomas', age: 18 },
//  { name: 'rachel', age: 20 }
// ]

객체 배열도 합치는 건 가능하지만, 중복 제거는 안 된다

배열 합치고 특정 조건으로 중복 제거하기: _.unionBy

let arr = [
  { name: 'peter', age: 16 },
  { name: 'james', age: 11 },
  { name: 'vivian', age: 13 },
];

let arr2 = [
  { name: 'dean', age: 16 },
  { name: 'thomas', age: 18 },
  { name: 'rachel', age: 20 },
];

console.log(_.unionBy(arr, arr2, (v) => v.age));

//    [
//        { name: 'peter', age: 16 },
//        { name: 'james', age: 11 },
//        { name: 'vivian', age: 13 },
//        { name: 'thomas', age: 18 },
//        { name: 'rachel', age: 20 }
//    ]

위에서 객체 배열은 중복 제거가 안 됐었는데, 중복 제거를 하는 방법이 있다

unionBy 메서드를 사용해서 조건을 마지막 인자로 넘겨주면 된다

예시에서 age 값이 같은 요소끼리 제거된 것을 볼 수 있다

배열에 값 더하기: _.concat

let arr = [
  { name: 'peter', age: 16 },
  { name: 'james', age: 11 },
  { name: 'vivian', age: 13 },
];

console.log(_.concat(arr, { name: 'susie', age: 21 }));

//    [
//        { name: 'peter', age: 16 },
//        { name: 'james', age: 11 },
//        { name: 'vivian', age: 13 },
//        { name: 'susie', age: 21 },
//    ]

배열의 뒤에 값을 추가할 수 있다

let arr = [
  { name: 'peter', age: 16 },
  { name: 'james', age: 11 },
  { name: 'vivian', age: 13 },
];

console.log(_.concat(arr, { name: 'susie', age: 21 }, { name: 'jane', age: 24 }));

//    [
//        { name: 'peter', age: 16 },
//        { name: 'james', age: 11 },
//        { name: 'vivian', age: 13 },
//        { name: 'susie', age: 21 },
//        { name: 'jane', age: 24 },
//    ]

여러 값을 넣는 것도 가능하다

let arr = [
  { name: 'peter', age: 16 },
  { name: 'james', age: 11 },
  { name: 'vivian', age: 13 },
];

let arr2 = [
  { name: 'dean', age: 16 },
  { name: 'thomas', age: 18 },
  { name: 'rachel', age: 20 },
];

console.log(_.concat(arr, ...arr2));

그렇다는 것은 전개 구문을 사용할 수도 있다는 것

용례: 복사하기

깊은 복사하기: _.cloneDeep

let arr = [111, 222, 333, 444, 555, 111, 222];
let arr2 = _.cloneDeep(arr);
arr2[0] = 0;

console.log(arr);
console.log(arr2);

// [111, 222, 333, 444, 555, 111, 222]
// [0, 222, 333, 444, 555, 111, 222]

cloneDeep 메서드를 통해 깊은 복사를 할 수 있다

arr을 깊은 복사하여 arr2를 만들고, arr2의 특정 값을 수정해보았다

arr2의 값을 수정해도 arr에 영향이 전혀 없는 것으로 보아 깊은 복사가 잘 된 것을 알 수 있다

얕은 복사를 원하면 clone 메서드를 사용하면 된다 (근데 굳이..?)

용례: 값 Iteration

배열 및 객체에 함수 적용하기: _.forEach

let arr = [111, 222, 333, 444, 555, 111, 222];

_.forEach(arr, (v) => console.log(v));

// 111
// 222
// 333
// 444
// 555
// 111
// 222

forEach 메서드로 배열의 모든 값에 대하여 두 번째 인자로 넣은 함수 (iteratee)를 적용할 수 있다

let obj = { name: 'aaa', age: 20, phoneNumber: 11111111 };

_.forEach(arr, (v) => console.log(v));

// aaa
// 20
// 11111111

객체도 되며, 모든 value 값에 대하여 함수를 적용한다

let obj = { name: 'aaa', age: 20, phoneNumber: 11111111 };
arr2[0] = 0;

_.forEach(obj, (v, k) => {
  console.log(v);
  console.log(k);
});

iteratee 함수에 두 번째 인자를 추가하면 객체의 key 값에도 함수를 적용할 수 있다

each 메서드도 같은 동작을 하는데, 공식 문서를 참고하니 forEach가 each 라는 별칭으로도 사용할 수 있는 것 같다

배열 및 객체에 함수를 적용하여 새 배열 만들기: _.map

let arr = [111, 222, 333, 444, 555, 111, 222];

console.log(_.map(arr, (v) => v + 1));

// [112, 223, 334, 445, 556, 112, 223]

map 메서드는 첫 번째 인자로 들어온 배열의 모든 원소에 두 번째 인자 함수를 적용하여 새로운 배열을 반환한다

원본 배열은 건드리지 않으며, 새로운 배열을 깊은 복사하여 반환한다

let obj = { name: 'aaa', age: 20, phoneNumber: 11111111 };

console.log(_.map(obj, (v) => v + 1));

// ['aaa1', 21, 111111112]

객체도 적용 가능하지만, 반환값은 무조건 배열이므로 주의하자

forEach와 마찬가지로 iteratee의 두 번째 인자로 key를 가져올 수 있다

배열의 모든 값이 조건을 만족하는지 알아보기: _.every

let arr = [
  { name: 'peter', age: 16 },
  { name: 'james', age: 11 },
  { name: 'vivian', age: 13 },
];

console.log(_.every(arr, (v) => v.age > 10));

// true

두 번째 인자로 조건을 정의하고, 배열의 모든 값이 조건에 부합하면 true, 하나라도 어긋나면 false를 반환한다

let arr = [
  { name: 'peter', age: 16 },
  { name: 'james', age: 11 },
  { name: 'vivian', age: 13 },
];

console.log(_.every(arr, (v) => v.age > 12));

// false

‘james’ 가 조건을 만족하지 못했기 때문에 false를 반환한다

let arr = [
  { name: 'peter', homework: true },
  { name: 'james', homework: true },
  { name: 'vivian', homework: true },
];

console.log(_.every(arr, {'homework': true}));

// true

배열 내 객체들의 특정 키가 특정 값을 모두 갖고 있는지 알아볼 수도 있다

let arr = [
  { name: 'peter', homework: true },
  { name: 'james', homework: true },
  { name: 'vivian', homework: true },
];

console.log(_.every(arr, 'homework'));

// true

이렇게 줄일 수도 있다

저작자표시

'ClientSide > 라이브러리' 카테고리의 다른 글

gh-pages로 리액트 프로젝트 배포 + 404 에러처리  (1) 2022.05.15
React-Beautiful-Dnd  (0) 2022.05.15
store  (0) 2022.05.12
classnames  (0) 2022.05.06
react-modal  (0) 2022.03.24
'ClientSide/라이브러리' Related Articles more
Comments