forEach와 map 함수

forEach와 map 함수는 기본적으로 형태와 동작원리가 같습니다. 그렇다면 무슨 차이가 있는 걸까요? forEach와 map함수에 대해서 알아봅시다.

---

forEach와 map의 형태

const arr = [1,2,3,4]

//arr.forEach(콜백함수(매개변수 value, index, array))
arr.forEach((value, index, array)=>{})

//arr.map(콜백함수)
arr.map((value, index, array)=>{})

 

forEach와 map의 동작원리

foreach는 for문처럼 반복을 하는데 배열에서 요소 하나를 꺼낸 다음에 콜백함수 안의 코드들을 동작을 하게 됩니다.

즉 배열 각각의 인덱스에서 콜백함수 안의 코드를 반복을 한다는 뜻입니다. 그리고 콜백함수는 매개변수를 받아올 수 있는데 이때 사용되는 매개변수는 배열의 값, 배열의 순번, 배열을 받아올 수 있습니다.

 

Map 객체에서의 forEach

Map 객체에서도 foreach를 사용하는데요. 똑같이 매개변수를 value, index, map을 받지만 이때 index에 대해서 조금 알아볼 필요가 있습니다. 배열에서 인덱스라 하면 0,1,2,3,4같이 순번을 얘기하는데요 Map 객체에서는 key값이 index가 됩니다. 

const db = new Map();
db.set(1,{'title' : '십오야', 'sub': '593만명'})
.set(2,{'title' : '침착맨', 'sub': '227만명'})
.set(3,{'title' : '테오', 'sub': '54.8만명'})

var jsonObject = {};
db.forEach((v, i) => {
  jsonObject[i] = v;
});

이 코드는 즉, jsonObject라는 새로운 객체 안에 변수명이 db인 Map 객체에서 foreach를 통해 jsonObject의 key값에 db의 key값을, jsonObject의 value 값에 db의 value값을 각각 반복해서 넣어둔다는 의미입니다.

 

jsonObject[1] = {'title' : '십오야', 'sub': '593만명'}
jsonObject[2] = {'title' : '침착맨', 'sub': '227만명'}
jsonObject[3] = {'title' : '테오', 'sub': '54.8만명

// 최종 jsonObject 값
jsonObject = {
    1 : {
    'title' : '십오야',
    'sub': '593만명'
    },
    2 : {
    'title' : '침착맨',
    'sub': '227만명'
    },
    3 : {
    'title' : '테오',
    'sub': '54.83만명'
    }
}

 

 

forEach와 map 함수의 차이

forEach 와 map함수의 차이는 무엇을 return 하는지에 있습니다. 새로운 변수에 함수를 사용하여 반환을 하면 forEach는 반환을 하지 않지만 map 함수는 새로운 배열을 반환을 합니다.

const arr = [1,2,3,4]

// forEach
const forEachArry = arr.forEach((v,i,a)=>{
  return v * 2
})
// map
const mapArr = arr.map((v,i,a)=>{
  return v * 2
})
console.log(forEachArry) // undefined
console.log(mapArry) // 2,4,6,8