본문 바로가기
개발 공부 일지/JavaScript

자바스크립트 - 배열 메소드 .filter .find

by yelimu 2024. 7. 22.

배열의 요소들을 하나씩 살펴보면서 반복적인 동작을 하는 메소드

 

filter - 배열 전체를 순회하면서 특정 조건에 맞는 요소들의 배열을 반환

find - 배열을 순회하다가 조건에 맞는 요소를 발견하면 동작을 중지하고 값을 반환


 

const 변수 = 배열.filter((element => element.프로퍼티 === '프로퍼티 값');

 

조건이 true가 되는 요소만 모아서 새로운 배열을 리턴해준다

항상 배열을 리턴한다. 요소가 1개이더라도 값이 리턴되는게 아니라 요소가 1개인 배열을 리턴

-> spread 구문 ...을 사용해서 배열 벗겨내기


또는 find 메소드 활용

 

const 변수 = 배열.find((element => element.프로퍼티 === '프로퍼티 값');

 

가장  첫번째 요소만 반환하고 반복을 종료함

 

존재하지 않는 값은 Undefined로 반환됨 


배열 메소드 강의부터 자꾸 arrow 함수를 쓰는데 난 쓰긴 쓰겠는데 이게 넘 헷갈리구 ㅠ . . 

 

 

const notKims = seoul.filter((person) => person[0] !== '김');     함수 파라미터  =>   조건

 

const notKims = seoul.filter((person) => {

person[0] !== '김' });

 


  const user = data.find((info) => 
    info.userName === nameValue && info.phoneNumber === phoneValue
    );

 

하 아니 쓰긴 쓰는데 먼가 찜찜하고 헷갈린다니까..

뭘 return 하는건데... -> 조건식이 true 가 되는 요소(info) 를 배열 !!! 

 

위 코드에서는 data 배열의 요소를 info 로 받고 그 중 조건식이 true 인 값을 반환한다