[Javascript] find(), filter() 두 배열에서 일치하는값 찾기

 

오늘은 Javascript에서 자주쓰이는 find()와 filter() 사용법에 대해 알아보고

 

응용해서 두 배열에서 서로 일치하는 Value 값 찾기를 할 것이다.

 

 

service 부

 

 

해당 코드를 통해서 find()를 먼저 알아보자.

 

 

변수 "findMeComment"는

 

"meCommentList"라는 배열의 객체의 uuid의 value과 controller에서

 

넘겨준 Param(uuid)와 일치하는 객체를 뽑는 역할을 한다.

 

 

meCommentList = [
{uuid:123123},
{uuid:234234},
{uuid:333333},
...
]

 

 

find()메소드는 변수에 저장된 객체 배열을 검색하는 역할을 하고있다.

 

해당코드에서 find()메소드는 콜백함수를 인수로 사용하며,

 

이 함수는 값을 반환할때까지 배열의 각 요소에 적용된다.

 

 

콜백함수가 반환하는 배열의 일치하는 첫 번째 항목을 반환하고 

 

일치하는 값이 없는경우 "undefined"를 반환한다.

 

 

find()는 일치하는 첫번째 항목, 즉 최대 한개만 반환하는데

 

만약 일치하는 값이 여러개일 경우 값을 한개가 아닌 전부 뽑고 싶을때는 어떻게 하면 좋을까?

 

 

 

이런 케이스에서 filter()를 사용해주면 된다..!

 

find()메소드를 이해했으면 filter()메소드는 간단하다.

 

 

service부

 

 

find()에서 다뤘던 코드에서 내용을 조금 수정해보았다.

 

 

변수 "findMeComment"는

 

"meCommentList"라는 배열의 각 객체의 target_type의 Value값이 "vote"인 객체를 전부 뽑는 역할을 한다.

 

 

meCommentList = [
{target_type:"vote"},
{target_type:"news"},
{target_type:"vote"},
...
]

 

 

filter()메소드는 일치하는 값 여러개를 찾을때 사용하면 된다.

 

 

 

 

이제 두 배열에서 서로 일치하는 Value 값을 찾기 위한 코드를 보자.

 

service부

 

 

"FollowPressList"는 press배열에서 FollowList배열의 keyword_uuid와 일치하는

 

press_uuid 값을 가지는 객체들만 추출하여 FollowPressList배열에 저장하는 코드이다.

 

 

여기서 some()은 FollowList배열의 요소들중 하나라도 'firstobj'와 조건에 맞는경우를 찾고 발견 즉시 순회를 멈춘다.

 

find()와 다르게 찾은후 검색을 멈추므로 처리속도가 빠르다.

 

 

아래는 해당 예시코드이다.

 

const press = [
  { press_uuid: "a", title: "Apple Daily" },
  { press_uuid: "b", title: "Banana Times" },
  { press_uuid: "c", title: "Cherry News" },
  { press_uuid: "d", title: "Durian Express" },
];

const FollowList = [
  { keyword_uuid: "a", name: "apple" },
  { keyword_uuid: "c", name: "cherry" },
];

const FollowPressList = press.filter((firstObj) =>
  FollowList.some((secondObj) => firstObj.press_uuid == secondObj.keyword_uuid)
);

console.log(FollowPressList);

// FollowPressList = [{ press_uuid: "a", title: "Apple Daily" },{ press_uuid: "c", title: "Cherry News" }]

 

 

이제 filter()를 사용하여 두 배열에서 서로 일치하는 Value 값 찾기를 할 수 있을 것이다.