filter() 함수 알아보고 활용 및 삭제하기

개념

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인 것을 삭제해준다. 처음에 이걸 이해를 못해서 많이 헤맸다.