배열의 (forEach, map, fill) 알아보기

forEach

const answer = [3, 1, 4, 6];
const value = '3214';
let strike = 0;
let ball = 0;
answer.forEach((element, i) => {
  const index = value.indexOf(element);
  if (index > -1) {
    if (index === 1) {
      strike += 1;
    } else {
      ball += 1;
    }
  }
})

배열의 method중 하나인 forEach
forEach는 addEventListener처럼 forEach안에 함수가 들어가는데, 역할은 배열의 요소를 하나씩 반복하여 매개변수로 하여금 함수를 실행한다.
예를 들어 element 3, index 0 다음 element, index를 차례로 넣어가며 함수를 실행한다.
배열에 대한 반복문이 될 수 있다.

map

예를 들어 [1, 2, 3, 4]라는 배열에 각각 2씩 곱하고 싶다면 map을 모르는 상태였을 때 어떻게 했을까를 생각해보자.

const array = [1, 2, 3, 4];

result = [];
for (i = 0; i < 4; i++) {
  result.push(a[i] * 2)
}

아마 이런식으로 했을 가능성이 높다.

하지만 map을 이용하면 더 간단한 방법으로 할 수 있다.

array.map((element, i) => {
  return element * 2;
})

단, 하나 알아야할 점이라면 기존 배열인 array는 바뀌지 않는다. 저렇게 만든 것은 새로 만든 배열이다.
즉, 사용하려면 result처럼 변수에 할당해야한다.

fill

fill = 채우다.라는 동사다. 즉, 배열의 element를 원하는 값으로 채울 수 있다는 뜻이다. 한번 살펴보자

Array(9); # length가 9인 빈 배열 생성
Array(9).fill(0) # [0, 0, 0, 0, 0, 0, 0, 0, 0]
Array(9).fill(0).map((el, idx)) => {
  return idx +1;
}
# [1, 2, 3, 4, 5, 6, 7, 8, 9]

마지막에서 map, forEach의 장점이 나온다. 조금 번거롭긴 하나 for문을 사용해도 되는데 굳이 map, forEach를 사용하는 이유는 이렇게 연달아 사용할 수 있다는 점이다.