[JS] Filter함수를 이용하여 TO DO 삭제하기

[ 노마드코더 학습 기록 ]

바닐라 JS로 크롬 앱 만들기

(7.7 Deleting To Dos part Two ~ 7.8 Deleting To Dos part Three)

---

이제 본격적으로 ToDo를 삭제하는 작업을 진행해보도록 하자.

 

 

Filter 함수를 이용하여 삭제 기능을 만들어볼텐데

만약 array에서 무언가를 삭제하려고 한다면 item이 실제로 삭제되는 것이 아니라

지우고 싶은 item을 뺀 새로운 array를 만들어내는 것이 실제로 일어나는 일이다.

= item을 삭제하는 것이 아니라 해당 item을 제외한 새로운 array를 만드는것.

 

먼저 Filter 함수에 대해 알아보겠다.

filter는 testFilter에 1, 2, 3, 4, 5를 넣어서 호출한다.

 

만약 새 array에서 이 object(1, 2, 3, 4, 5)를 유지하고 싶다면

testFilter 함수는 반드시 true를 리턴해야 한다.

 

만약 false를 리턴한다면 그 item은 새 array에 포함되지 않는다.

예를들어 1, 2, 3, 4, 5 중 3에서 false를 리턴하면 js는 3을 제외하고 1, 2, 4, 5만 유지한다.

 

false를 리턴하면 당연히 비어있는 array가 만들어진다.

 

3을 지운(반환하지 않는) 예제를 만들어 살펴보자

testFilter에 저장할 수 있는 item(paramiter)을 주고 item !==3으로 

3이 아니라면 true를 반환하게 만들어준다.

 

이렇게 string도 가능하고

 

1000보다 작은 숫자만 반환하는 더 디테일한 조건을 만들수도 있다.

 

현재 코드에 적용한다면 이런식의 활용을 해야할 것이다.

 

 

이제 진짜 삭제 기능을 만들기위해서

삭제버튼을 누른 item의 id를 제외하고 array를 만들어서 업데이트하는 작업을 해보자

function deletToDO(event) {
    const li = event.target.parentElement;
    li.remove();
    toDos = toDos.filter((toDo) => toDo.id !== parseInt(li.id));
    saveToDos();
}

클릭했던 li의 id를 갖고 있는 toDo를 지우고 싶기 때문에

((toDo) => toDo.id !== li.id)이렇게 작성한다.

 

그리고 중요한게 변수의 타입을 맞춰줘야 한다.

toDO.id는 number이고 li.id는 string이기 때문에

parsetInt로 li.id를 감싸주어 문자열을 숫자로 바꿔준다. 

 

그리고 saveToDos();를 한번 더 호출해야한다.

 

todos 입력 ok

 

a만 삭제한것도 localStorage에 반영이 잘되는걸 확인할 수 있다.

새로고침을 눌러도 잘돌아간다.

 

삭제 기능도 잘 만들었다 희희😆😆