반응형
개념
filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열을 반환한다. 즉 filter()메서드는 내가 원하는 값들을 말 그대로 필터링하여 사용할 수 있다.
사용법
사용법에는 여러가지가 존재하는데 두가지로 나누어 설명하겠다.
1) filter()을 활용한 검색
let users = [
{ id: 11, name: 'Adam', age: 23, group: 'editor' },
{ id: 47, name: 'John', age: 28, group: 'admin' },
{ id: 85, name: 'William', age: 34, group: 'editor' },
{ id: 97, name: 'Oliver', age: 28, group: 'admin' }
];
let res = users.filter(it => it.name.includes('oli'));
→ users에 아이디, 이름, 연령, 그룹등을 담아 데이터를 저장한다. 그리고 이 users에 filter를 적용하여 users의 name에 oli이 포함된 것을 변수 res에 저장한다.
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result);
// ["exuberant", "destruction", "present"]
→ 변수 result에 words에 저장된 데이터 중에 길이 6이상인 것을 저장해둔다. 그리고 콘솔에 찍어 보면 데이터 길이가 6이상인 것은 세 개가 된다는 것을 알 수 있다.
위와 같이 많이 사용한다. 조건을 걸어서 그에 맞는 조건을 출력하도록 할 수 있다.
🌝 2) filter()을 활용한 삭제
솔직히 이거때문에 글을 썼다고 해도 무방하다. 너무 많이 나오는 코드라 이게 뭘까하면서 검색해보니 정리해서 계속적으로 보면 잘 적용해서 쓸 것 같아서 글을 쓰게 되었다.
const deleteNote = (id) => {
const newNotes = notes.filter((note) => note.id !== id);
setNotes(newNotes);
}
→ id를 prop으로 받아온다. notes배열에서 note.id가 파라미터로 일치하지 않는 원소만 추출하여 새로운 배열을 만든다. 이 말은 note.id가 id인 것을 삭제해준다. 처음에 이걸 이해를 못해서 많이 헤맸다.
반응형
