웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > lodash

lodash uniqBy() 메소드 알아보기

Last Modified : 2020-09-17 / Created : 2020-09-17
11,882
View Count

lodash 메소드 중 하나인 uniqBy() 메소드에 대하여 알아봅니다.



# lodash uniqBy() 알아보기


uniqBy()는 lodash 신규 업데이트를 통해 기존의 unique()에서 분리된  메소드 중 하나입니다. 이름처럼 컬렉션 데이터를 특정 값을 기준으로 고유의 값(unique)만 가져올 수 있습니다.

_.uniqBy(데이터, 기준값)


두 번째 인자는 어떤 값을 기준으로 유니크한 값을 얻을 지 입력해야 합니다.

- 첫 번째 값 : 컬렉션 데이터
- 두 번째 인자 : 구분할 기준 값

참고로 컬렉션 데이터가 아닌 단순한 배열 값의 고유 값을 얻어야 한다면 uniq() 메소드를 사용하세요. 자세한 내용은 아래 링크를 참고하시기 바랍니다.

링크 바로가기 >
https://webisfree.com/2020-09-15/lodash-메소드-uniq()-알아보기

그럼 컬렉션 값에서 고유한 값 만을 얻기 위한 방법 uniqBy()를 알아봅니다.


! 컬렉션 값에 uniq() 사용하여 고유의 값만 얻는 방법


uniqBy()는 컬렉션 데이터인 배열에 적용할 수 있습니다. 아래와 같이 배열 안에 여러 개의 객체 값을 가지는 변수 myArray가 있습니다.
myArray = [
  {a: 1, b: 2},
  {a: 2, b: 2},
  {a: 2, b: 2}
]

객체의 내부를 보면 값 중에서 두 번째, 세 번째 객체의 값이 동일합니다. 그럼 uniqBy()를 사용하여 중복된 값을 제거해 보도록 하겠습니다. 먼저 a 값을 기준으로 새로운 변수 newArray를 만들어 보려고 합니다.
newArray = _.uniqBy(myArray, 'a');

// 출력결과
{a: 1, b: 2}
{a: 2, b: 2}

결과를 보면 같은 값이 사라진 것을 알 수 있습니다. 다음으로 b를 기준으로 어떻게 반환되는지 확인해봅니다.
newArray = _.uniqBy(myArray, 'b');

// 출력결과
{a: 1, b: 2}

이번에는 하나의 결과만 반환되었습니다. b는 모두 2라는 동일한 값을 가지고 있으므로 단 하나의 값만 반환되게 됩니다.


# 마치면서


여기까지 lodash 라이브러리의 uniqBy()에 대하여 자세히 알아보았습니다. 이처럼 컬렉션 데이터의 고유 값을 얻기 위해서는 uniq()가 아닌 uniqBy()를 사용하는다는 점을 기억해주세요!

참고로 기존의 unique()가 분리되면서 이 외의 여러 메소드로 구분되었습니다. 다음 번에는 다른 메소드를 알아보도록 하겠습니다.

Previous

lodash 메소드 uniq() 알아보기

Previous

[lodash] 배열의 역순으로 순서 바꾸기, reverse