[자바스크립트] 배열(array)을 처리하는 인기있는 메소드 map(), forEach() 개념과 차이점

 

🤷‍♂️ 본론에 앞서

---

자바스크립트는 현재 웹/앱 개발 트렌드에서 필수적으로 사용되는 프로그래밍 언어입니다.

여러 아이템을 저장하는데 사용되는 배열과 이를 파싱하며 새로운 데이터를 생성하고 조작하는데 필요한 자바스크립트 내장함수인 map(), forEach()라는 두 가지 인기 있는 배열 메소드에 대해 알고 계실 겁니다.

이 두 배열 메소드는 배열에 루프를 처리하는 기능이 비슷하지만 중요한 차이점이 있습니다.

이 차이점을 공부하여 배열 메소드를 더 효율적으로 활용할 수 있도록 알아보겠습니다.

 

 

 

🤷‍♂️ 배열(array)이란?

---

배열은 여러 개의 아이템을 순서대로 저장, 추가, 삭제할 수 있는 자료구조입니다.

배열은 각 요소에 인덱스를 사용하여 아이템에 접근할 수 있습니다.

 

배열에 대해 자세히 이해하면

💡 자바스크립트에서 배열(array)은 이름과 인덱스로 참조되는 정렬된 값의 집합으로 정의됩니다.
배열을 구성하는 각 값을 배열 요소(element)라고 하며, 배열에서의 위치를 나타내는 숫자를 인덱스(index)라고 합니다.

 

 

 

 

1. Javascript 배열의 map()이란 무엇인가?

map() 메소드는 배열의 각 항목에 대해 콜백 함수를 호출하고 그 결과로 새로운 값을 반환합니다.

이 새로운 값들은 map() 메소드에 의해 새 배열로 저장됩니다.

중요한 것은 map() 메소드는 새 배열을 반환하며, 기존 배열을 변경하지 않는다는 점입니다.

 

javascript map() 함수 알아보자!

https://cometruedream.tistory.com/7

javascript map() 함수 알아보자

 

2. Javascript 배열의 forEach()이란 무엇인가?

forEach() 메소드는 배열의 각 항목에 대해 콜백 함수를 호출합니다.

이 콜백 함수는 배열의 각 요소와 함께 호출되어 배열을 순회하고 각 요소에 대한 작업을 수행합니다.

중요한 것은 forEach() 메소드는 새 배열을 반환하지 않고 기존 배열의 요소를 반환한다는 점입니다.

 

javascript forEach() 함수 알아보자!

https://cometruedream.tistory.com/3

JavaScript Foreach 알아보자!

 

map()과 forEach()의 차이점은 무엇인가?

forEach()와 map()의 가장 큰 차이점은 반환 값을 다룹니다.

이미 언급했듯이 map()은 기존 배열을 반환하지 않고 새 배열을 반환합니다.

반면에 forEach()는 새 배열을 반환하지 않고 기존 배열을 반환합니다.

 

🤷‍♂️ map()과 forEach() 비교 예제

---

이것은 map()과 forEach() 메소드를 비교하는 예제입니다.

// 배열 선언
const numbers = [1, 2, 3, 4, 5];

// map() 메소드 사용 예제
const doubledNumbers = numbers.map((num) => {
  return num * 2;
});

// forEach() 메소드 사용 예제
numbers.forEach((num) => {
  console.log(num * 2);
});

console.log(doubledNumbers);

 

위 예제에서 map() 메소드는 배열의 각 요소에 2를 곱하여 새 배열을 반환합니다.

반면에, forEach() 메소드는 배열의 각 요소에 2를 곱하고 console.log()로 출력합니다.

즉, map() 메소드는 새로운 배열을 생성하는 데 사용되므로, doubledNumbers 상수에 새로운 배열의 반환값을 저장할 수 있습니다.

반면에, forEach() 메소드는 배열의 각 요소에 대해 작업을 수행하면서 원래 배열을 수정하며, 새로운 배열을 반환하지 않습니다.

따라서 doubledNumbers 상수에 반환값을 저장할 수 없습니다.

 

🤷‍♂️ map()과 forEach()의 활용법

---

map() 메소드 활용법

const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map((num) => {
  return num * num;
});

console.log(squaredNumbers); // [1, 4, 9, 16, 25]

 

forEach() 메소드 활용법

const numbers = [1, 2, 3, 4, 5];
let sum = 0;

numbers.forEach((num) => {
  sum += num;
});

console.log(sum); // 15

 

위 두 예제를 통해 map()과 forEach() 메소드의 차이와 사용법을 더 잘 이해할 수 있습니다.

 

---

 

재밌는 오늘의 띠별 운세 보고 가세요! 

 

 

https://cometruedream.tistory.com/247

[React] Tailwind 한줄, 두줄, 세줄 효과 className 커스텀

 

 

https://cometruedream.tistory.com/243

NestJS Lifecycle (생명주기) 개념

 

 

https://cometruedream.tistory.com/242

리액트 Vite Proxy 활용한 CORS 오류 해결

 

 

https://cometruedream.tistory.com/241

React 폴더구조 FSD 기능 분활 설계 아키텍처

 

 

https://cometruedream.tistory.com/244

쉽게 이해하고 사용할수 있는 Prisma 명령어 정리