JavaScript 개발자로서, 여러 개의 아이템을 저장하는 데 사용되는 배열과 이를 루프 처리하는 forEach()와 map()이라는 두 가지 인기있는 배열 메소드에 대해 들어보았을 것입니다. 이들 메소드는 모두 배열을 루프 처리할 수 있게 해주지만, 중요한 차이점이 있습니다. 이번 글에서는 JavaScript 배열 forEach()와 array map()의 차이를 설명하고, 예제를 통해 더 잘 이해할 수 있도록 도와드리겠습니다.
목차
- 배열이란 무엇인가?
- JavaScript 배열 forEach()란?
- JavaScript 배열 map()이란?
- forEach()와 map()의 차이점은 무엇인가?
- forEach()와 map()의 예제 비교
- 비교를 위한 더 많은 예제
1. 배열이란 무엇인가?
배열은 여러 개의 아이템을 순서대로 저장할 수 있는 자료구조입니다. 배열은 인덱스를 사용하여 각각의 아이템에 접근할 수 있습니다.
2. JavaScript 배열 forEach()란?
forEach() 메소드는 배열의 각 아이템에 대해 콜백 함수를 호출합니다. 콜백 함수는 배열의 각 요소와 함께 호출됩니다. 이 메소드는 일반적으로 배열을 루프 처리하고 각 요소에 대해 작업을 수행하는 데 사용됩니다.
forEach() 메소드는 인덱스, 배열 전체 및 선택적으로 this 값을 취할 수 있는 세 가지 매개 변수를 가집니다. 그러나, 이 메소드는 새로운 배열을 반환하지 않습니다.
3. JavaScript 배열 map()이란?
map() 메소드는 배열의 각 아이템에 대해 콜백 함수를 호출하고, 새로운 값을 반환합니다. 이 새로운 값은 map() 메소드에 의해 생성된 새로운 배열에 저장됩니다. 따라서, map() 메소드는 기존 배열을 변경하지 않습니다.
map() 메소드는 forEach() 메소드와 비슷한 매개 변수를 가지고 있지만, this 값은 선택적이며 map() 메소드가 반환하는 새로운 배열을 가리키지 않습니다.
4. forEach()와 map()의 차이점은 무엇인가?
forEach()와 map()의 가장 큰 차이점은 반환 값입니다. forEach() 메소드는 반환 값을 가지지 않으며, 기존 배열을 수정합니다. 반면, map() 메소드는 새로운 배열을 반환하며, 기존 배열을 수정하지 않습니다.
5. forEach()와 map()의 예제 비교
다음은 forEach()와 map() 메소드를 사용하여 동일한 배열을 처리하는 예제입니다.
// 배열 선언
const numbers = [1, 2, 3, 4, 5];
// forEach() 메소드 사용 예제
numbers.forEach((num) => {
console.log(num * 2);
});
// map() 메소드 사용 예제
const doubledNumbers = numbers.map((num) => {
return num * 2;
});
console.log(doubledNumbers);
위의 예제에서, forEach() 메소드를 사용하여 배열의 각 아이템을 2배로 만들고 콘솔에 출력합니다. 반면, map() 메소드는 배열의 각 아이템을 2배로 만들어 새로운 배열에 저장하고 반환합니다.
따라서, forEach() 메소드는 단순히 배열을 루프 처리하고 각 아이템에 대해 작업을 수행하는 데 사용됩니다. 반면, map() 메소드는 각 아이템을 처리하고 새로운 배열을 만드는 데 사용됩니다.
6. 비교를 위한 더 많은 예제
여기에 더 많은 forEach()와 map() 메소드의 예제가 있습니다.
forEach() 메소드 예제
- 배열에서 모든 요소의 값을 더하기
const numbers = [1, 2, 3, 4, 5];
let sum = 0;
numbers.forEach((num) => {
sum += num;
});
console.log(sum); // 15
- 배열의 요소를 HTML 목록으로 변환하기
const fruits = ['apple', 'banana', 'orange'];
const ul = document.createElement('ul');
fruits.forEach((fruit) => {
const li = document.createElement('li');
li.innerText = fruit;
ul.appendChild(li);
});
document.body.appendChild(ul);
map() 메소드 예제
- 배열의 모든 요소를 제곱하기
const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map((num) => {
return num * num;
});
console.log(squaredNumbers); // [1, 4, 9, 16, 25]
- 배열에서 이름 목록 만들기
const users = [
{ name: 'John', age: 25 },
{ name: 'Jane', age: 30 },
{ name: 'Bob', age: 20 },
];
const names = users.map((user) => {
return user.name;
});
console.log(names); // ['John', 'Jane', 'Bob']
요약
JavaScript 배열 forEach()와 array map()은 각각 배열을 루프 처리하고 각 요소에 작업을 수행하는 데 사용됩니다. forEach()는 새로운 배열을 반환하지 않으며, 원래 배열을 수정할 수 있습니다. map()은 각 요소에 작업을 수행하고 새로운 배열을 반환합니다. 어떤 것을 사용할지는 작업의 목적에 따라 다릅니다.