[JS] filter 메소드

유난·2024년 10월 1일

TIL

목록 보기
3/15
post-thumbnail

filter 메소드는 배열을 반복하며 특정 조건을 만족하는 아이템을 제외한 새로운 배열을 리턴해주는 메소드이다.

  • 즉, filter() 내부 조건에서 참(true)에 해당하는 아이템만 return되는 구조이며, 거짓(false)에 해당하는 아이템은 날라간다.
  • 리턴 값이 존재하는 메소드이다.

기본형

datas.filter(data => { 
	return 조건
});

인덱스와 함께 사용

datas.filter((data, index) => { 
	return 조건
});
  • dataindex는 임의의 이름, index는 0부터 시작.
  • index를 통해 현재 순회중인 아이템의 번호를 알 수 있다.

예시

  • 객체로 구성된 배열 data가 있다.
  • 여기서 id가 c인 배열을 만들고 싶다면,
const datas = [
  { id: 'a', name: 'A' },
  { id: 'b', name: 'B' },
  { id: 'c', name: 'C' },
  { id: 'd', name: 'D' },
];

const filteredData = datas.filter(data => {
	if(data.id === 'c'){
    	return false;
    }
  	return true;
});
console.log(filteredData); 
// data = [{ id: 'a', name: 'A' },{ id: 'b', name: 'B' },{ id: 'd', name: 'D' }]

좀 더 간단하게 표현하면, 이렇게 표현할 수도 있다.

// case 1
const filterdData = datas.filter(data => data.id !== 'c');
// case 2
const filterdData = datas.filter(data => !(data.id === 'c'));
// 직관적으로 "c가 아닌 것"을 표현할 수 있다.

// a -> true -> filteredData
// b -> true -> filteredData
// c -> false -> filteredData
// d -> true -> filteredData
profile
프론트엔드 꿈나무🌱

0개의 댓글