filter사용하기

function deleteToDo(even){
    const li = event.target.parentElement//클릭한 현재 이벤트의 타겟의 부모태그속성
    toDos = toDos.filter((toDo) => toDo.id !== parseInt(li.id));
    li.remove();
    saveToDos();
}

• toDos = toDos.filter((toDo) => toDo.id !== parseInt(li.id)) filter를 사용해 목록을 지우려고 한다.

  • 어제 해당 목록에 id를 만들었기때문에 그것을 사용한다

  • 그러기위해서는 일단 filter의 사용법을 알아야 한다.

  • (변수명).filter(filter를 실행할 익명함수 혹은 함수) 이런 구조로 만들어진다.

    • 첫번째 변수명은 배열로 이루어지며 filter는 해당변수안에 들어있는 배열을 하나씩 사용하여 함수를 반복한다
    • filter를 실행할 함수는 true와 false를 판단하며 true일 경우만 값을 배열의 값을 반환한다
    • [1,2,3].filter(return true) 일때 반환값은 [1,2,3]이며 [1,2,3].filter(return flase)일때 반환값은 [] 이다 false는 반환하지 않는다.
    • 만약 반환에 조건을 단다면 [1,2,3].filter(item => return item > 1) 해당 필터는 1보다 큰 [2,3]만 반환할것이다.
    • 여기서 item은 단순한 매개변수의 이름이며 필터앞에있는 배열의 값을 임시로 지정한 이름에 불과하다.

• 어제 li에게 id를 주었고 const li는 x를 누른 요소라고 정의해주었다. const li = event.target.parentElement
• 그렇기때문에 filter에서 li.id는 x를 누른 li의 id라는 요소를 정확히 가져올수 있으며 filter는 toDos라는 로컬스토리지 안에 들어있는 목록값중 li.id와 일치하는 id를 가지고 있는 JSON 배열을 false로 처리하여 x를 누른 요소를 제외한 모든 요소를 반환하여 사실상 삭제한것이 된다.
• 이 삭제한 배열을 업데이트 하기위해 아래에 toDo목록을 저장하는 saveToDos();함수를 한번 더 실행해준다

오류

• 삭제해주려고 하니 todo.js:36 Uncaught TypeError: Assignment to constant variable. 라는 오류가 발생하였다.
• 아무래도 toDos배열의 값이 삭제함으로 계속 변하기때문에 const값으로 인식할수 없는 문제인것 같았다
• 배열의 정의를 let으로 바꿔주니 정상인식되었다.