[JS] ES6문법 / forEach vs map 차이

for문 대신에 forEach, map을 사용하여 간결하게 사용할 수 있다.

forEach 함수

Arr.forEach(callback(currentvalue[, index[, array]])[, thisArg])
배열.forEach( function(){ 함수내용 } );

배열의 요소를 이용하여 순차적으로 함수를 실행하는 메서드(method)

//for문
let arr = ['a','b','c','d','e','f'];
for (let i = 0; i < arr.length; i++) {
  console.log(a[i]);
}

//forEach문
let arr = ['a','b','c','d','e','f'];
// arr.forEach( **function(){ 함수내용 }**  );

arr.forEach( function(val,index){ 
  console.log(val,index)
  });

//arrow함수 변환 
arr.forEach((val,index) => console.log(val,index) );

arrow 함수 변환

1) function을 없앤다

2) 매개변수가 하나라면 ( ) 괄호도 생략 가능함 / 현재 예시는 매개변수 2개

2) (val,index) 뒤 / 매개변수 괄호 끝나는 곳 뒤에 ⇒를 붙인다.

3) 한줄로 표현이 가능하다면 { } 괄호를 지우고, 표현이 불가하다면 냅둔다

map

map<U>(callbackfn: (value: T, index: number, array: T[ ]) => U, thisArg?: any): U[ ];

배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아
새로운 배열을 반환 한다.

콜백함수에서 반드시 return을 해줘야한다.

<예시1>

let num = [0, 1, 2, 3, 4, 5];
let newArr = [];
for(let i=0; i<num.length; i++){
    newArr.push(num[i]*2);
}
console.log(newArr);

//map함수
let num = [0, 1, 2, 3, 4, 5];
const newArr = num.map(item => item * 2);
console.log(newArr);

<예시2>
배열 안에있는 요소들을 원하는 함수에 적용하여 다른 데이터를 만들고 싶을때 유용하다.

const Student = {
    constructor(name, age, enrolled, score){
        this.name = name;
        this.age = age;
        this.enrolled = enrolled;
        this.score = score;
    }
}

const students = [
    new Student('A', 29, true, 45),
    new Student('B', 28, false, 80),
    new Student('C', 30, true, 90),
    new Student('D', 40, true, 66),
    new Student('E', 18, true, 88),
];

// 학생 점수만 배열로 받기
// result should be: [45, 80, 90, 66, 88]

  const result = students.map(student => student.score);
  console.log(result)

map은 callbackFunction, thisArg 두개의 매개변수

callbackFunction은 value, number, array 3개의 매개변수

• value : 배열 내 현재 값
• number : 배열 내 현재 값의 인덱스
• array : 현재 배열
• thisArg : callbackFunction 내에서 this로 사용될 값

let arr = [1,2,3,4,5,6];
const a = arr.map(val => val*2 );
console.log(a) // [2, 4, 6, 8, 10, 12]

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.map(num => num * 2).filter(num => num > 5);

• map()은 데이터를 변경할 때 선호될 수 있다. 더 빠를 뿐 아니라 새로운 배열을 반환하며, 이는 다른 메소들과 함께 사용하는 것 같이 멋진 일을 할 수 있다는 것을 의미한다.(map(), filter(), reduce() 등)

forEach / map 함수 차이 ?

let num = [1, 2, 3, 4, 5];
let a = [];
let b = [];
  
a = num.forEach((item) => item * 2);
b = num.map((item) => item * 2);

console.log(a); //undefined
console.log(b); //[ 2, 4, 6, 8, 10 ]

num.forEach((val, index) => b.push(val * 2));
console.log(b); //[ 2, 4, 6, 8, 10 ] 

배열의 각 요소를 순회하는것은 동일하지만,

forEach는 return 값을 반환받지 못하기 때문에 항상 undefined 리턴함으로 함수내에서 return을 할 필요가 없다.
배열을 변환시키고 싶다면, 콜백함수에서 현재 Array를 변환할 수 있음

map은 return 값으로 얻은것으로 새로운 배열을 리턴한다.