[Js] Map() 과 forEach()

Array.map()이란 ?

• map 메서드는 배열을 반복해주는데, callback함수에서 return한 값으로 매 요소를 수정해준다.
• map 메서드의 return값은 수정된 값으로 다시 생성된 배열이다.
• 여기서 callback 함수란 인자로 전달되는 함수라고 생각하면 된다.

const arr = [1, 2, 3];
const squares = arr.map(x = > x * x);

두 번째 줄에서 map함수에 인자로 넘어간 함수를 원래대로 표현하면 아래와 같다.

const squares = arr.map(function(x) {
  return x * x;
});

• Array 타입의 데이터를 요소 갯수 만큼 반복한다.
• 반복할 때마다 실행할 함수를 parameter로 전달한다.
• callback 함수에서 array의 요소를 인자(x)로 받는다.

Array.forEach()란?

• forEach는 for 대신 사용하는 반복문이다.
• map과의 차이점은 forEach 함수 자체가 return 하는 것도 아무것도 없다.
• forEach 함수를 탈출하고 싶을 때 return을 사용한다.
• 다시 말하면 map은 요소가 수정된 새로운 배열이 return되었다면, forEach는 아무것도 return하는 것이 없다.

let startWithNames = [];
let names = ['a', 'ab', 'cbb', 'ada'];


names.forEach(el => {   
  if (el.startsWith('a')) {     
    startWithNames.push(el);   
  } 
});

• forEach도 함수이므로, 중간에 반복문을 탈출하고 싶으면 return을 해주면 된다.
• 만약에 forEach에서 현재 index를 알고 싶다면 아래와 같이 하면 된다.

let idxOfC = -1;
let arr = ['a', 'b', 'c', 'd'];

arr.forEach((el, idx) => {
  if(el === 'c') {
       idxOfC = idx;
       return;
       }
     });