초보자를 위한 배열 반복: forEach() 및 map()이란 무엇입니까?

"반복"이란 무엇입니까?

반복은 배열의 각 요소를 통과하고 무언가를 수행하는 프로세스입니다. 배열의 각 요소에 대해 무언가를 수행하려는 많은 이유가 있습니다. 운 좋게도 JavaScript에는 많은 방법이 있습니다! 두 가지 JavaScript 반복 방법forEach() 및 map()을 살펴보고 이들이 무엇이며 언제 사용해야 하는지 알아낼 것입니다.

시작하기 전에 알아야 할 사항

배열을 반복하기 전에 고려해야 할 몇 가지 사항이 있습니다. 스스로에게 가장 먼저 묻고 싶은 것은 내가 반복을 통해 무엇을 성취하려고 하는가? 각 요소가 작업을 수행한 후 정확히 무엇을 반환하고 싶습니까? forEach()와 map()가 유사하게 작동하지만 반환 값이 다른 방법을 살펴보겠습니다.

forEach() 사용

forEach()는 배열을 사용하고 배열의 각 값에 대해 일부 기능을 수행하기 때문에 이름이 매우 적절합니다. forEach()가 어떤 종류의 기능을 수행하도록 하려면 매개변수로 기능을 취해야 합니다. 이것을 콜백 함수라고 하며 forEach() 및 map() 모두에서 사용됩니다. 콜백 함수는 배열의 각 요소에 대해 발생하는 것입니다! 아래 예를 살펴보십시오.

const people = ["Mac", "Dennis", "Charlie", "Dee", "Frank"];
people.forEach(person => console.log(`${person} is a my favorite!`);

// CONSOLE:
// Mac is my favorite!
// Dennis is my favorite!
// Charlie is my favorite!
// Dee is my favorite!
// Frank is my favorite!

이것forEach()의 반환에 대해 주목해야 할 중요한 점은 무엇입니까? 무슨 일이 일어나고 있는지 조사해 봅시다. people 배열의 각 사람에 대해 콜백 함수는 사람의 로그를 콘솔에 반환합니다. 따라서 콜백 함수는 값을 반환하는 것입니다. 그렇다면 forEach() 반복 메서드는 무엇을 반환합니까? 음...아무것도! 배열의 각 요소에 대한 값을 반환하는 함수를 호출하는 값을 반환하지 않습니다. forEach() 어레이를 콘솔에 기록하여 이를 확인할 수 있습니다.

const numbers = [1, 2, 3, 4, 5];
const doubleNumbers = numbers.forEach(number => number*2);
console.log(doubleNumbers);

// CONSOLE:
// undefined

forEach()를 사용하면 doubleNumbers 값이 콘솔에 반환되지 않습니다. 값을 더 조작할 수 있도록 반환된 값을 원하면 어떻게 해야 합니까? 아마도 우리는 map()를 활용할 수 있을 것입니다.

지도() 사용

무언가의 지도를 만들면 다른 축척으로 무언가를 다시 만드는 것입니다. 이론적으로 미국 지도는 더 작은 미국이어야 합니다. 이것이 본질적으로 map() 함수로 수행하는 작업입니다! 우리는 배열에 대해 무언가를 변경하고 있지만 forEach() 와 달리 map() 는 동일한 크기의 새 배열을 반환합니다. 아래 코드를 살펴보십시오.

const numbers = [1, 2, 3, 4, 5];
const doubleNumbers = numbers.map(number => number*2);
console.log(doubleNumbers);

// CONSOLE:
// [2, 4, 6, 8, 10]

map() 가 forEach() 와 같은 콜백 함수를 취하는 것을 볼 수 있습니다. 그러나 forEach()와 달리 배열doubleNumbers이 기록되는 것을 볼 수 있습니다. 이 배열은 콜백 함수가 해당 요소에서 수행된 후 각 요소의 반환 값입니다.

좋아, 그래서 뭐?

배열이 반환되기를 원하는지 또는 각 요소에 수행되는 작업을 원하는지 아는 것이 중요합니다. 배열은 해당 요소에 대해 수행할 일부 작업에 대해서만 존재하기 때문에 새 배열이 불필요한 경우가 있습니다. 또는 코드에서 추가로 사용할 업데이트된 새 배열을 반환하는 것이 매우 유용할 수 있습니다. 그것은 모두 당신의 용도에 달려 있습니다. forEach() 및 map()의 용도를 탐색하고 이들이 뛰어난 부분과 한계가 있는 부분을 확인하십시오. 즐거운 코딩하세요!