Array map과 filter 함수

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.

 

const array1 = [1, 4, 9, 16];

// Pass a function to map
const map1 = array1.map((x) => x * 2);

console.log(map1);
// Expected output: Array [2, 8, 18, 32]

 

JSX에서의 사용 예

<ul>
    {toDos.map((toDo, index) => (
      <li key={index} id={index}>
        {toDo}
        <button onClick={deleteBtn}>✕</button>
      </li>
    ))}
</ul>

↑ array 요소들을 li element로 바꾸어 반환한다. (React는 li element 배열을 인식해 브라우저에 li들의 나열로 표시한다.)

map 함수의 두 번째 인자는 index를 나타낸다. 배열의 각 li 원소에 대해 id를 index로 주어 이후에 활용할 수 있다. 

---

filter() 메서드는 주어진 배열을 내용 안의 조건에 따라 걸러낸다.

const words = ['spray', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter((word) => word.length > 6);

console.log(result);
// Expected output: Array ["exuberant", "destruction", "present"]

 

↑ 함수 내용이 true가 되면 남는다.(false는 버린다.)

 

JSX에서의 사용 예

const deleteBtn = (event) => {
    const target = event.target.parentElement;
    setToDos(
      toDos.filter((item, index) => {
        return index !== parseInt(target.id);
      })
    );
    console.log(toDos);
  };

↑ toDos 배열에서 index !== target.id가 true면 남긴다. (같으면 제거한다.)

 map과 마찬가지로 두 번째 인자는 index를 나타낸다.

 

filter의 callback함수 인자 사용 방법

 

첫 번째 filter는 arr 배열의 값을 나타내는 a 인자를 사용한다. (callback의 첫 인자)

따라서 arr 중 짝수 2, 4만 남는다.

 

두 번째 filter는 arr의 index를 나타내는 a 인자를 사용한다. (첫 인자는 _로 건너 뜀)

따라서 0,2,4 index의 1,3,5만 남는다.