map() 과 forEach()의 차이점, rendering 이란?

1. map() 과 forEach() 의 차이점

먼저 결론부터 말하자면 이렇다.

 

map은 요소를 변환하여 새로운 배열을 만들기 위한 메서드이고, forEach는 반복 작업을 위한 메서드이다.(for 반복문) 

 

코테 문제를 풀다보면 map함수를 사용했을때는 정답이지만 forEach를 사용했을때는 오답처리가 된 경우가 있었다.

그냥 둘 다 배열을 순회하는 함수구나 하며 대충 사용했을때는 똑같아 보였지만, 파고 들어보니 결이 다르다.

 

map과 forEach는 둘 다 배열의 각 요소에 대해 반복 작업을 수행하는 메서드다. 그러나 두 메서드 간에는 몇 가지 중요한 차이점이 있다.

 

   1.반환값:

• map: map 메서드는 각 요소에 대해 콜백 함수를 실행하고 그 결과를 모아서 새로운 배열을 반환하며, 원본 배열을 변경하지 않는다.
• forEach: forEach 메서드는 각 요소에 대해 콜백 함수를 실행하고 반환값이 없으므로 원본 배열을 변경하지 않는다.

   2. 사용용도

• map: map 메서드는 각 요소를 변형하여 새로운 배열을 생성할 때 주로 사용된다.
• forEach: forEach 메서드는 각 요소에 대해 일련의 작업을 수행할 때 사용된다.

   3.순회 방식:

• map: map 메서드는 각 요소에 대해 순서대로 실행하면서 새로운 배열을 생성하며,  원본 배열을 변경하지 않는다.
• forEach: forEach 메서드는 각 요소에 대해 순서대로 실행하면서 원본 배열을 변경하지 않는다.

계속해서 나오는 말,

map은 원본 배열을 변경하지 않고, 새로운 배열을 생성하고 반환하는 데 주로 사용되고,

forEach는 원본 배열을 변경하지 않고, 각 요소에 대해 일련의 작업을 수행하는 데 주로 사용된다. 

 

예제로 한번 자세하게 살펴보자.

-map 메서드 사용 예제:

 

const originalArray = [1, 2, 3, 4, 5];

const doubledArrayMap = originalArray.map((num) => {

  return num * 2;

});

console.log(doubledArrayMap); // [2, 4, 6, 8, 10]

console.log(originalArray); // [1, 2, 3, 4, 5] 원본 배열은 변경되지 않음

-forEach 메서드 사용 예제:

 

const doubledArrayForEach = [];

originalArray.forEach((num) => {

  doubledArrayForEach.push(num * 2);

});

console.log(doubledArrayForEach); // [2, 4, 6, 8, 10]

console.log(originalArray); // [1, 2, 3, 4, 5] 원본 배열은 변경되지 않음

 

=> 위의 코드에서 originalArray는 [1, 2, 3, 4, 5]로 초기화된 배열이다.

map 메서드를 사용하여 각 요소에 2를 곱한 새로운 배열을 생성하면 doubledArrayMap에 [2, 4, 6, 8, 10]가 저장된다. 이때 원본 배열인 originalArray는 변경되지 않는다.

(원본 배열을 변경하지 않고, 새로운 배열을 생성하고 반환했다.)

반면에 forEach 메서드를 사용하여 각 요소에 2를 곱한 값을 새로운 배열에 추가하면 doubledArrayForEach에도 [2, 4, 6, 8, 10]가 저장되지만, 원본 배열인 originalArray는 변경되지 않으며, 반환값이 없으므로 새로운 배열을 반환하지 않는다.

(원본 배열을 변경하지 않고, 각 요소에 대해 일련의 작업을 수행했다.)

 

예제를 보며 눈치챈 점?

map은 새로운 배열을 반환하므로 결과를 저장하기 위한 변수를 따로 선언할 필요가 없지만,

forEach는 직접 배열에 요소를 추가해야 하기 때문에 빈 배열을 미리 선언해두고 사용한다.

 

즉, 주로 사용방법은 map은 기존배열에 연산을 하여, 새로운 배열을 반환할 때 쓰고, 

forEach는 기존배열에 연산을 하여, 빈 배열에 넣을때 쓰는 것 임을 알 수있다.

 

map은 혼자 알아서 잘하는 사람, forEach는 누군가의 도움이 필요한 사람이라고 보면 될 듯하다.

 

허나, 빈 배열이 없어도 forEach를 사용할 수는 있다. 예를 들어, 주어진 배열의 요소를 콘솔에 출력하거나 특정 작업을 수행하는 등의 역할을 forEach를 사용하여 처리할 수 있다.

 

예제를 통해 자세하게 살펴보자.

배열 요소를 더해서 콘솔에 출력하는 예제:

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

numbers.forEach((number) => {

  console.log(number + 1);

});

배열 요소를 곱해서 콘솔에 출력하는 예제:

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

numbers.forEach((number) => {

  console.log(number * 2);

});

배열 요소의 제곱을 콘솔에 출력하는 예제:

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

numbers.forEach((number) => {

  console.log(number ** 2);

});

객체의 속성을 순회하며 값을 출력하는 예제:

const person = {

  name: '철수',

  age: 25,

  city: '서울'

};

Object.keys(person).forEach((key) => {

  alert(`${key}: ${person[key]}`);

});

문자열의 각 문자를 처리하는 예제:

const str = '안녕하세요';

Array.from(str).forEach((char) => {

  document.write(char);

});

 

빈 배열에 추가하는 것이 아니면, 대체로 출력하는 용도로 쓰이는 것을 알 수 있다.

 

 

2. rendering

프로그래밍에서 rendering이란 데이터나 정보를 시각적인 형태로 변환하여 보여주는 과정을 말한다. 웹 개발에서는 HTML, CSS 및 JavaScript를 사용하여 웹 페이지를 생성하고 표시하는 과정을 rendering이라고 한다.

사용자 인터페이스(UI)를 구성하거나 데이터를 시각적으로 표현하는 작업도 rendering에 포함된다. 데이터를 가공하고 화면에 표시하는 과정을 일반적으로 rendering이라고 부른다.

 

rendering을 하라고 하면 보통 forEach() 함수를 쓰는 경우가 많다.

 

그렇다면 똑같이 배열을 순회하는 map()은 왜 쓰지 않는 것일까? 

 

map 함수는 배열의 각 요소에 대해 주어진 함수를 호출한 결과를 모아서 새로운 배열을 반환하는 함수이다.

따라서 map 함수를 사용하여 배열의 각 요소를 가공하고 새로운 배열을 생성할 수 있다.

이것은 rendering과 비슷한 개념이지만, 엄밀히 말하면 map 함수는 데이터를 가공하고 새로운 배열을 생성하는 것이지, 화면에 표시하는 과정을 직접적으로 다루지는 않는다. 화면에 직접적으로 표시하기 위해서는 DOM 조작이나 다른 방법들이 필요할 것이다. 

 

map() => 기존배열 가공 => 새 배열 생성

forEach() => 기존배열 가공 => 출력

 

때문에 단순히 배열을 가공하고 출력하는 것은 forEach()를 사용하는것이 더 적합하다.

 

예제를 통해 자세하게 살펴보자.

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

const renderedNumbers = [];

numbers.forEach(number => {

  renderedNumbers.push(number * 2);

});

console.log(renderedNumbers);

 

=> 위의 코드는 numbers 배열에 있는 각 숫자를 2배로 만들어 renderedNumbers 배열에 넣는 간단한 rendering 예제다.

이러한 방식으로 rendering은 데이터를 가공하여 원하는 형태로 출력하는 작업을 말한다.

 

결론적으로, rendering은 기존 배열의 데이터를 가공하고 그 결과를 새로운 배열에 추가하는 작업을 말한다.

 

번외로, forEach()의 예제를 살펴보면 변수를 복수형인 numbers로 선언하고, forEach() 함수 인자를 단수형인 number라고 써 놓은것을 볼 수 있다.  그래도 글자가 다른데 에러가 발생하지 않을까? 

=> numbers는 배열이므로 여러 개의 요소를 가지고 있다. 따라서 forEach 메소드를 사용할 때 콜백 함수의 매개변수로는 각 요소를 나타내는 변수명을 단수형인 number와 같이 사용하는 것이 일반적이다. 이렇게 함으로써 코드를 읽는 사람에게 각 요소를 가리키는 변수명이 단수형이라는 것을 명확히 전달할 수 있다. 이는 코드의 가독성을 높이고 이해를 돕는 역할을 한다.

 

forEach() 함수 말고도 복수 단수형으로 연결시켜 사용하는 경우는 많다.