Array 메소드

1. forEach
2. filter
3. map

세가지 모두 배열 내의 요소를 하나씩 꺼내서 순차적으로 어떤 행위를 한다는 공통점이 있다.

forEach

이전에는 배열에서 요소를 하나씩 꺼내서 콘솔에 찍고 싶을 때 밑의 코드와 같이 해야 했다.

// PAST
var a = [0,1,2,3,4,5];
for (var i = 0; i < a.length; i++) {
  var item = a[i];
  console.log(item);
}

하지만 이제 forEach를 이용해 더 편하게 코드를 만들 수 있다.

// Now
const nums = [0,1,2,3,4,5];
b.forEach(function(item) {
  console.log(item);
});

Array.forEach에 실행할 '콜백함수'는 현재 값, 인덱스, forEach를 호출한 배열을 매개변수로 받는다.
그리고 함수 내에서 따로 return을 할 필요가 없다.

map

forEach와 다른점은 콜백함수 내에서 리턴을 해준다! ?
map은 리턴된 값들을 모아서 새로운 배열을 만들어 준다.

• 배열 안의 값들을 하나씩 꺼내서 그 값의 두배에 해당하는 새로운 배열을 만들어 주기

map을 사용 안하면

var nums = [0,1,2,3,4,5]
var newNums = [];
for ( var i = 0; i < nums.length; i++) {
  var item = nums[i];
  newNums.push(item * 2);
}

map사용 시

const nums = [0,1,2,3,4,5];
const newNums = nums.map(function(item) {
  return item*2;
});

filter

• 배열의 요소를 하나식 꺼내고, 함수를 실행하여 특정 조건을 통과하는 요소를 모아 새로운 배열로 반환한다.

• filter에 실행할 콜백함수는 현재 값, 인덱스, map을 호출한 배열을 매개변수로 받는다.

배열 안 요소 중 3보다 큰 요소만 가져와 배열로 만들기

기존 for문을 이용하면

var nums = [0,1,2,3,4,5]
var newNums = [];
for ( var i = 0; i < nums.length; i++) {
  var item = nums[i];
  if (item > 3) {
  	nuwNums.push(item);
  }
}

map이용

const nums = [0,1,2,3,4,5];
conse newNums = nums.filter(function(item) {
  return item>3;
});

이렇게 짧아진다.

'콜백함수'란?

자바스크립트에서는 함수도 하나의 자료형!
그래서 함수도 다른 함수의 매개변수로 전달할 수 있다.
매개변수로 전달하는 함수 = 콜백함수