JS배열메서드 『filter() & find()』

filter(), find()의 차이점은 반환값의 '개수'이다.

filter()메서드는 조건값에 해당하는 데이터를 그대로 반환한다.

반면, find()메서드는 검색된 첫번째 데이터만 반환한다.

 

 

가령, 아래의 데이터 파일에서 'name'속성이 있는 값을 filter(), find()로 찾아보자.

const Data = [
	         {
                    name:'사과',
                    state:'상급',
                    price:'2,000원'
                 }, 
                 {
                    name:'사과폰pro10',
                    state:'중급',
                    price:'1100000원'
                 }, 
                 {
                    name:'바나나',
                    state:'상급',
                    price:'800원'
                 }, 
                 {
                    name:'바나나폰',
                    state:'하급',
                    price:'50000원'
                 }
           ];
        

 

 

│filter( ) & find( )

 

메서드만 바꿨을 뿐, 다른 조건이 같다면,

const fruits1 = Data.filter((fruit)=>{

                	return fruit.name;            
        	});


const fruits2 = Data.find((fruit)=>{

            		return fruit.name
        	})

        console.log(fruits1);
        console.log(fruits2); 

 

 

filter()메서드는 조건값에 해당하는 데이터를 배열에 담아 그대로 반환해준다.

find()의 경우, 조건값에 맞는 첫번째 데이터만 반환한다.

그래서 find()는 객체가 반환됐고, filter()는 배열이 결과값이다. 

 

 

결론적으로,

find()의 경우, 시의성이 중요한 검색(ex.경매)에 편리하고,

filter()의 경우, 조건에 해당하는 데이터를 모두 검색창에 띄우는 상황에 적합하다.