#12 - forEach()와 map()의 차이점

forEach() / map()

ES6 기준으로 출범한 메소드이며, for문을 이용하여 반복문을 순회하는 것 보다 더 나은 방법을 제시한다.

1. forEach()란?

배열의 각 요소마다 한번씩 콜백함수를 실행한다.

const arr = [1, 2, 3, 4, 5];
const mulArr = [];

arr.forEach(num => {
  mulArr.push(num * 3);
});
console.log(mulArr); // [3, 6, 9, 12, 15]

let arr = [1,2,3,4,5];
let a = arr.forEach(function(value){
	return value;
});
console.log(a);   //undefined

• forEach()는 리턴값을 반환할 수 없다.

2. map()이란?

배열을 받아 오름차순으로 접근해 Callback함수를 적용하여 새로운 배열을 반환한다.

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);
console.log(doubled);
//[2, 4, 6, 8, 10]

• 특정 값 꺼내기

const users = [ { name: 'YD', age: 22 }, { name: 'Bill', age: 32 }, { name: 'Andy', age: 21 }, { name: 'Roky', age: 35 }, ]; 
const ages = users.map(user => user.age); console.log(ages); // [22, 32, 21, 35]

결론적으로 users의 age만 꺼내게 된다.

• 특정요소 재정의 하기

const users = [
    { name: 'YD', age: 22 },
    { name: 'Bill', age: 32 },
    { name: 'Andy', age: 21 },
    { name: 'Roky', age: 35 },
];

const newUsers = users.map(user => {
    if (user.name === 'YD') {
        return { ...user, age: 18 };
    }
    return { ...user };
});

console.log(newUsers);
// [{name: "YD", age: 18}, {name: "Bill", age: 32}, {name: "Andy", age: 21}, {name: "Roky", age: 35}]

결론
forEach와 map의 차이점은 쉽게 말하자면, Return 값이 있냐 없냐의 차이인거 같다. forEach는 기존 배열을 변경하고자 할때, map은 새로운 배열을 반환하고자 할때...

출처 - Map, ForEach에 대하여