array methods

array의 반복문의로 사용되는 map, forEach 메서드를 알아보자

1. Array.map()

map 메서드는 배열을 반복해준다. callback 함수에서 return한 값으로 매(each) 요소를 수정해 준다.
map 메서드의 return 값은 수정된 값으로 다시 생성된 배열이다.
예제를 만들어보자!

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

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

const squares = arr.map(function (x) { 
  return x * x;  //[1,4,9]
});

Array 타입의 데이터를 요소 갯수 만큼 반복한다. 반복할 때만다 실행할 함수를 parameter로 전달한다. 그러면 이 callback 함수에서 array의 요소를 인자(x)로 받는다. 해당 요소를 수정하고 싶은대로 로직을 구현 후 return해주면, 해당 index의 요소가 return 된 값으로 치환된다.

2. Array.forEach()

forEach는 for대신 사용하는 반복문이다.
map과의 큰 차이는forEach함수 자체가 return하는 것은 아무것도 없다는 것이다.
map은 요소가 수정된 새로운 배열이 return 되었다면, forEach는 아무것도 return하는 것이 없다. 그래서 forEach로 전달되는 callbak함수에서도 return하는 것이 없다.
forEach는 단지 for문 대신 사용하는 반복 메서드라고 보면 된다.

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

names.forEach(el => {   
  if (el.startsWith('a')) {     
    startWithNames.push(el); // ['a', 'ab', 'ada' ]
  } 
});