JavaScript의 forEach()와 filter()

function loadToDos()
{
    const loadedToDos = localStorage.getItem(TODOS_LS);
    //console.log(loadedToDos);     이건 String
    if(loadedToDos !== null)    // 기존에 등록된 todo가 있으면
    {
        const parsedToDos = JSON.parse(loadedToDos);    // JSON 형태로 만들어서
        parsedToDos.forEach(function(toDo){             // 각 항목들마다
            paintToDo(toDo.text);                       // text값을 뿌려주기
        });
    }
}
 
function deleteToDo(event)
{
    const btn = event.target;
    const li = btn.parentNode;
    toDoList.removeChild(li);       // 기존에 있던 리스트에서 선택된 li 삭제
    const cleanToDos = toDos.filter(function(toDo){
        return toDo.id !== parseInt(li.id); // 모든 toDos가 'li'의 id와 같지 않을 때
    });
    // filter는 array의 모든 아이템을 통해 함수를 실행하고,
    // 그 중 true인 아이템들만 가지고 새로운 array를 만든다.
 
    // 이제 필터링된 todo들만 담긴 array를 기존 array에 교체해야 함
    toDos = cleanToDos;
    saveToDos();    // localStorage에 toDos배열을 저장하기
}

 

1) forEach()

문법 : Array.forEach(callback, thisArg)

 

loadToDos()함수에 있는 forEach()를 살펴보자.

forEach()는 주어진 배열 안에 있는 모든 요소들을 하나씩 꺼낼 수 있다. 

단, forEach()는 반환값이 존재하지 않는다.

 

따라서 parsedToDos안에 들어있는 모든 요소들을 체크해서 paintToDo()함수로 인자값 text를 넣어서 호출하는 역할을 하고 있다. 

// paintToDo()함수는 받은 값을 담아서 뿌려주는 역할을 하는 함수이다. 받은 text값으로 데이터를 뿌려준다.

 

2) filter()

문법 : Array.filter(callback, thisArg)

 

deleteToDo()함수 안에 있는 filter()를 살펴보자.

filter()는 배열 내 모든 요소들을 체크해서 callback함수의 조건에 true인 아이템들만 가지고 새로운 array를 만든다.

말그대로 필터에 잘 걸러진 아이템들로만 새로운 배열을 만들어주는 함수이다. 따라서 이때 만들어진 새로운 array가 반환값이 된다.

 

위 코드는 삭제된 항목을 제외한 나머지 항목들로만 다시 배열을 만들어서 새로 교체하는 코드이다.

이때 20번줄에 return toDo.id !== parseInt(li.id); 이 코드의 의미가 뭔지 잘 이해가 안갔다.

왜 같지 않은걸 true로 둘까.. 그러면 삭제하려는 항목 하나만 반환되는거 아닌가? 생각했는데 반대로 생각한거였다.

 

기존 toDos배열이 가지고 있던 1~6번 아이템이 있다고 가정해보자.

이때 내가 3번 항목을 삭제하겠다고 클릭하였을 때, 16~17번 줄에서 3번 항목에 대한 li값을 정의한다.

그리고 filter()함수를 사용하여, toDos배열안에 모든 아이템을 하나하나 체크하면서 이때 이 아이템이 내가 선택한 아이템과 같지 않으면 true로 설정한다. 즉, 같으면 false다. toDos배열의 3번과 내가 방금 선택한 3번이 같으면 false를 반환해서 이건 필터된 배열에 포함되지 않는다. -> 삭제된다.

 

이렇게 true로만 이루어진 아이템들로 배열 cleantoDos를 반환하며, 이를 다시 현재 리스트인 toDos에 대입한다.