Lodash 사용법
const usersA = [
{userId: '1', name: 'hyerin'},
{userId: '2', name: 'Neo'}
]
const usersB = [
{userId: '1', name: 'hyerin'},
{userId: '3', name: 'Amy'}
]
const usersC = usersA.concat(usersB)
console.log('concat', usersC) //concat (4) [{…}, {…}, {…}, {…}]
/＊ 0: {userId: "1", name: "hyerin"}
1: {userId: "2", name: "Neo"}
2: {userId: "1", name: "hyerin"}
3: {userId: "3", name: "Amy"} ＊/
고유값
- 배열데이터 안에 들어있는 여러개의 객체 데이터들은 기본적인 구조가 같고 고유값을 의미하는 id 값들이 들어 있음
- 고유값 : userId
.concat()
- 2개의 배열데이터를 병합해서 새로운 배열데이터를 반환
- 단순하게 합쳐버리는 concat 메소드를 사용하면 중복되는 데이터 발생
_.uniq
- 배열데이터 안에 들어있는 중복되는 값들을 고유하게 바꿔줌
- 손쉽게 중복되는 내용들을 제거해서 새로운 배열을 만들어 낼 수 있음
_.uniqBy
- _.uniqBy 메소드가 해당하는 배열의 이름에서 해당하는 속성의 이름으로 고유한 값만 정리해서 반환해줌
- 하나의 배열데이터에서 어떤 특정한 속성의 이름으로 고유화를 시켜주는 메소드이고 사용하는 인수는 배열데이터 1개
- 이미 중복이 발생한 배열데이터에서 중복을 제거할 때에는 _.uniqBy 사용
const usersA = [
{userId: '1', name: 'hyerin'},
{userId: '2', name: 'Neo'}
]
const usersB = [
{userId: '1', name: 'hyerin'},
{userId: '3', name: 'Amy'}
]
const usersC = usersA.concat(usersB)
console.log('concat', usersC) //concat (4) [{…}, {…}, {…}, {…}]
/＊ 0: {userId: "1", name: "hyerin"}
1: {userId: "2", name: "Neo"}
2: {userId: "1", name: "hyerin"}
3: {userId: "3", name: "Amy"} ＊/
console.log('uniqBy',_.uniqBy(usersC, 'userId')) //uniqBy (3) [{…}, {…}, {…}]
/＊ 0: {userId: "1", name: "hyerin"}
1: {userId: "2", name: "Neo"}
2: {userId: "3", name: "Amy"} ＊/
_.unionBy
- 합치기 전, 여러개의 배열데이터를 적어주고 맨 마지막에 고유화 작업을 시킬 속성의 이름을 명시 해주면 고유화가 된 새로운 배열을 반환
- 즉, 중복이 발생할 수 있는 배열데이터가 2개이고 합치기 전이라면 _.unionBy를 통해서 고유하게 합칠 수 있음
- 아래와 같이 첫 번째 인수와 두 번째 인수에 배열데이터의 이름을 적고 합칠 때 고유값으로 사용할 속성의 이름을 세 번째 인수에 명시해주면 세번째 인수에 해당하는 값을 고유하게 판단해서 두개의 배열을 합쳐줌
const usersA = [
{userId: '1', name: 'hyerin'},
{userId: '2', name: 'Neo'}
]
const usersB = [
{userId: '1', name: 'hyerin'},
{userId: '3', name: 'Amy'}
]
const usersD = _.unionBy(usersA, usersB, 'userId')
console.log('unionBy', usersD) //unionBy (3) [{…}, {…}, {…}]
/＊ 0: {userId: "1", name: "hyerin"}
1: {userId: "2", name: "Neo"}
2: {userId: "3", name: "Amy"} ＊/
_.find
- _.find는 일치하는 요소를 반환
const users = [
{ userId: '1', name: 'hyerin' },
{ userId: '2', name: 'Neo' },
{ userId: '3', name: 'Amy' },
{ userId: '4', name: 'Evan' },
{ userId: '5', name: 'Lewis' }
]
const foundUser = _.find(users, { name: 'Amy' })
- _.find 메소드 첫번째 인수에 users라는 배열데이터 넣음
- 2번째 인수의 내용이 포함되어져 있는 특정 객체를 users라는 배열데이터에서 _.find메소드로 찾아서 그 결과를 foundUser라는 변수에 할당
console.log(foundUser) //{userId: "3", name: "Amy"}
_.findIndex
- _.findIndex는 찾은 요소의 인덱스를 반환
const users = [
{ userId: '1', name: 'hyerin' },
{ userId: '2', name: 'Neo' },
{ userId: '3', name: 'Amy' },
{ userId: '4', name: 'Evan' },
{ userId: '5', name: 'Lewis' }
]
const foundUserIndex = _.findIndex(users, { name: 'Amy' })
- 해당하는 객체의 index번호 반환 (zero-based 기준)
console.log(foundUserIndex) //2
_.remove
- 찾아서 삭제하고 제거된 요소의 새 배열을 반환
const users = [
{ userId: '1', name: 'hyerin' },
{ userId: '2', name: 'Neo' },
{ userId: '3', name: 'Amy' },
{ userId: '4', name: 'Evan' },
{ userId: '5', name: 'Lewis' }
]
_.remove(users, { name: 'hyerin' })
console.log(users) //(4) [{…}, {…}, {…}, {…}]
/＊ 0: {userId: "2", name: "Neo"}
1: {userId: "3", name: "Amy"}
2: {userId: "4", name: "Evan"}
3: {userId: "5", name: "Lewis"} ＊/
