Java script [Map&forEach]

페이지를 구현할 때 가장 유용하게 쓸 수 있는 Map & forEach 의 용례를 알아보고 차이점을 구분해보자.

MAP & forEach의 비교

let data= [1, 2, 3, 4, 5]
// forEach 를 사용해서 원소의 값들을 각각 3씩 증가시키기
let result = [];
data.forEach(x => { result.push(x + 3) });
console.log(result);
// map 을 사용해서 원소의 값들을 각각 3씩 증가시키기
let result2 = data.map(x => { return x + 3});
console.log(result2);

• forEach 와 map 둘 다 배열을 순회하며 인자로 전달한 원소의 값을 가지고 함수 로직을 구현한다는 것에서 공통점이 있다. 하지만, 근본적으로 return 이 있는지/없는지에서 차이가 있다.

• 어떤 배열이 있을 때 배열을 순회하며 원소의 값들을 각각 가공해서 수정된/새로운 배열(원래 배열과 길이가 똑같은)을 return 받고자 한다면 map 메서드를, 그렇지 않고 원소의 값들을 활용해서 원소들의 합이나, 평균을 구하고자 한다면, 그리고 원래 배열과는 길이가 다른 배열 결과를 받고 싶다면, forEach 를 쓰면 될 것 같다

간략한 예시

// for 문 
var arr = [7, 15, 8, 34, 17, 4]
var new_arr = []

for (var i = 0; i < arr.length; i++) {
    if (arr[i] % 2 === 0) {     // 2의 배수
        new_arr.push(arr[i])
    }
}
console.log(new_arr)    // 8, 34, 4

// forEach()
var arr = [7, 15, 8, 34, 17, 4]
var new_arr = []
arr.forEach(function (n) {
    if (n % 2 ===0) {
        new_arr.push(n)
    }
})
console.log(new_arr)    // 8, 34, 4

// forEach with arrow fuction
var arr = [3, 9, 4, 2, 7, 6]
var new_arr = []
arr.forEach( (n) => { if (n % 2 === 0) new_arr.push(n) })
console.log(new_arr)    // 8, 34, 4

[ 8, 34, 4]가 반환된다.

[ 1, 2, 3, 4, 5].map(
  function(x) {
      return x * 2;
  }
)

[ 2,4,6,8,10] 배열이 반환된다

filter & map & forEach

[ 1, 2, 3, 4, 5].filter(
    function(x) {
        return x % 2 == 0;  // [2,4]
    }
).map(
    function(x) {
        return x * 2; // [4,8]
    }
).forEach ( 
    function(x) {
        console.log(x); // [4,8]
    }
)