[JavaScript] Object, Arrary 원하는 조건의 값 삭제하기 filter()

텍스트만 push 해주었던 것에서

이제는 Object를 생성해 주어 Object를 push 해 주도록 하자

그리고 그 Object에는 id 값과 text 라는 프로퍼티를 주도록 하자.

 

그리고 배열에서 특정 요소를 삭제할 때는 filter 라는 기능을 사용해 줄 수 있다.

 

.filter는 foreach() 함수와 비슷한 역할을 하는데

기본적으로 array 안에 있는 모든 원소들을 인자로 넣어가면서 원하는 함수 하나를 반복적으로 실행시키는 것이다.

 

기본적으로 함수를 통해 array에서 특정 요소를 삭제한다는 것은 array 에서 그 특정 요소를 제외한 새로운 array를 생성해 줌을 의미한다.

 

그러면서 모든 배열의 요소들에 대해 filter(여기에 넣어준 함수) true를 반환하면 그 배열은 원형을 유지한다.

 

하지만 예를 들어 5개의 원소가 있는데 그중 3번째의 요소가 false를 반환하면

3번째 요소를 제외한 나머지 4개의 원소만 반환하게 된다.

 

여기서 중요한 것은 filter는 원함수를 건드리지 않는다는 것이다.

 

filter 함수를 적용한 원래 arr는 수정되지 않는다.

function deleteToDo(event) {
  const li = event.target.parentNode;
  toDos = toDos.filter((toDo) => {
    return toDo.id !== parseInt(li.id);
  });
  saveToDos();
  console.log(toDos);
  li.remove();

}

그래서 toDos 안에서 순회하며 filter안의 함수가 적용된 결과를 다시 toDos 변수에 재할당을 받아 업데이트를 해주도록 한다. 또한 .filter((toDo) => {return toDo.id !== li.id}); 잘 안되는 문제가 있었는데 알고보니 toDo.id 는 문자열(string) 였고 li.id 는 숫자(number) 였다. 이를 콘솔창에서 확인하고 수정을 하니 잘작동하였다.

 

 

 

 

1.변수의 타입에 유의하자.

2.함수로 인자를 넘겨주는 게 힘들다면 arrow function 을 활용해보자

3. 콘솔창으로 원인을 분석해 나아가자.

 

parseInt : 문자열을 숫자로 변환해주는 함수