💻 FullStack/Javascript

배열에서 원하는 값만 찾고싶을때 - filter(), find()

_minwoo_ 2023. 9. 7. 23:11

 

 

소개

 

배열에서 특정 값을 찾아야할 때 유용한 함수중 filter와 find에 대해 간략히 정리해보았다.

 

filter 와 find 모두 데이터 목록(배열)에서 검색한다는 공통점이 있으나, 다음과 같은 차이점이 존재한다.

일치하는 모든 결과를  새로운 배열로 리턴하거나(filter) 혹은 일치한 결과중 첫번째것만 리턴하는지(find)로 나뉘게된다.

 

 

See the Pen [JS] find(), filter() by minwoo (@ko0or) on CodePen.

 

 

 

 

 


 

 

 

 

 

filter()

 

<script>
// 배열변수명의 0번째 인덱스부터,  마지막 인덱스까지 "비교할 내용"과 값을 비교해서 true 인것만 새로운 배열로 저장한다.
결과를저장할변수명 = 배열변수명.filter( n번째 => n번째 === 비교할 내용)
</script>

 

 

 

 

 

 

 


 

 

 

 

 

 

find()

 

 

<script>
/*
	
    
    // 검색된 조건중  [0]번째 인덱스 (즉, 첫번째것)만 변수에 저장하는 내용
	결과를저장할변수명 = 배열변수명.filter( n번째 => n번째 === 비교할 내용)[0]
    
    ✅ 만약 위와같이 필터를 사용하고있다면, 대신 find를 사용하는 방법이 있다.
    
*/

결과를저장할변수명 = 배열변수명.find( n번째 => n번째 === 비교할 내용)
</script>

 

 

 

 

 

 

 

 

 

 

 

 

find 잘 몰라서 filter()[0] 썻던건 비밀 ..ㅎㅎ;