Lodash Method

TigerStoneV·2022년 3월 29일

🧀 Lodash Method

자주 쓰이는 Lodash 메소드와 간단 설명
우선 user에 대한 선언을 먼저 진행한다.

const user = {
    name: 'Tiger',
    age: 30,
    email: ["abc@naver.com"]
}

🥬 _.cloneDeep

얕은복사와 깊은복사를 할때 필요한 메소드이다.
얕은 복사란

const copy2User = Object.assign({},user) // 빈배열에 user을 넣고 복사.
console.log(copy2User === user) // false
user.age = 15 
console.log('user',user)  //user.age =15
console.log('copy2User',copy2User) copy2User.age = 10
// 복사!
const copy3User = {...user}
user.age = 25  
console.log(copy3User === user ) //false
user.email.push('abccd@naver.com') 
//user.email 과 copy3User.email의 값이 둘다 들어감.
//이게 얕은복사의 한계

얕은 복사를 통해서 참조형하나는 복사가 가능하지만 그 안에 있는 또다른 참조가 있을 경우는 복사가 되지 않음.

const copy4User = _.cloneDeep(user)
user.email.push('kkakkak@naver.com')
user.age = 50
console.log(user.email === copy4User.email) //false
console.log(user)  // email의 객체가 3개
console.log(copy4User) // email의 객체가 2개 kkakkak~가 안들어있음

_.cloneDeep 깊은 복사를 하기위해서 쓰임

🥬 _.uniq

배열에서 중복값 제거

console.log(_.uniq([1,1,1,3,2])) // [1 ,3, 2] 출력

🥬 _.uniqBy

배열안에서 기준을 잡고 기준에 맞게 중복을 제거

const UsersA=[
    {id:1 ,name: 'berry'}, 
    {id:3 , name : 'monkey'}
]
const UsersB=[
    {id:1 ,name: 'berry'},
    {id:2 , name : 'cat'}
    ]
const UsersC = UsersA.concat(UsersB)
console.log(UsersC) //일반 콘캣같은 경우 중복을 신경쓰지않음
const UsersD = _.uniqBy(UsersC,'id') // 콘캣으로 합친 배열에서 id의 중첩된 것들을 검사하여반환.
console.log(UsersD)

🥬 _.unionBy

방금 concat()을 한뒤 uniqBy를 써서 중복을 제거한 작업을 하나로 합쳐서 합치면서 기준에맞게 중복을 제거하여 배열로 반환.

const UsersE = _.unionBy(UsersA,UsersB,'id')
console.log(UsersE)

🥬 _.find

배열안에서 처음으로 참이되는 객체

const users = [
    {id:1 ,name: '1erry'}, 
    {id:2 ,name: '2erry'}, 
    {id:3 ,name: '3erry'}, 
    {id:4 ,name: '4erry'},     
]
const foundUser = _.find(users,{name:'1erry'}) //users에서 {name:'1erry}가 참이되는 객체 반환
console.log(foundUser)

🥬 _.findIndex

처음으로 참이되는 객체의 인덱스 반환.

const foundUserIndex = _.findIndex(users,{name:'3erry'})
console.log(foundUserIndex)

🥬 _.remove

지정된 객체를 지우고 배열반환

_.remove(users , {name:'4erry'})
console.log(users)

🥬 _.filter

일치하는 값들의 배열

// 콜백함수를 실행하여 true를 반환하는 값들의 배열을 반환합니다.
_.filter([4, 5, 6], function(n) {
  return n % 2 == 0;
});
// → [4, 6]

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

// 입력한 object의 key와 value들을 모두 포함하는 객체들을 배열로 반환합니다.
_.filter(users, { 'age': 36, 'active': true });
// → [{ 'user': 'barney', 'age': 36, 'active': true }]

// 입력한 key와 value가 있는 객체들을 배열로 반환합니다.
_.filter(users, 'active', false);
// → [{ 'user': 'barney', 'age': 36, 'active': true }]

// 입력한 key값이 true인 객체들을 배열로 반환합니다.
_.filter(users, 'active');
// → [{ 'user': 'barney', 'age': 36, 'active': true }]

🥬 _.forEach

배열은 한개의 값씩 대입하여 함수를 실행시킴.

_([1, 2]).forEach(function(n) {
  console.log(n);
}).value();
// 1
// 2

object는 한개의 value와 키를 대입하여 함수를 실행시킵니다.

_.forEach({ 'a': 1, 'b': 2 }, function(n, key) {
  console.log(n, key);
});
// 1
// "a"
// 2
// "b"

🥬 _.map

계산한 결과 값의 배열

function timesThree(n) {
  return n * 3;
}

// 해당함수를 실행하고 그 결과를 배열로 반환합니다.
_.map([1, 2], timesThree);
// → [3, 6]

// 해당함수를 실행하고 그 결과를 배열로 반환합니다.
_.map({ 'a': 1, 'b': 2 }, timesThree);
// → [3, 6]

var users = [
  { 'user': 'barney' },
  { 'user': 'fred' }
];

// key값만 집어넣을 경우 해당 value값들을 배열로 반환해줍니다.
_.map(users, 'user');
// → ['barney', 'fred']