1. forEach()

forEach() 메서드는 주어진 함수를 배열 요소 각각에 대해 실행한다.
인수로 함수를 받고 배열의 요소들 하나하나씩 순서대로 함수를 적용
(반복문 역할)

반환 값 -> undefined

const answer = [3, 1, 4, 6];  //(3,0), (1,1), (4,2), (6,3) (요소,인덱스)

answer.forEach((element, index ) => {
  // 인수로 함수가 들어감
})

ex) for 반복문을 forEach()로 바꾸기

const items = ['item1', 'item2', 'item3'];
const copy = [];

// for 반복문
for (let i=0; i<items.length; i++) {
  copy.push(items[i]);
}

// forEach()
items.forEach((item) => {
    copy.push(item);
})

2. map

map()은 요소들을 일대일로 짝지어서 다른 값으로 변환하는 메서드

.map과 .slice => 기존 배열은 수정하지 않고, 새로운 배열을 만듦)

반환 값 -> 배열의 각 요소에 대해 실행한 callback의 결과를 모은 새로운 배열

ex) for 반복문을 map()로 바꾸기

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

// for 반복문 으로 작성
const result = [];
for (let i = 0; i < 4; i++) {
  result.push(array[i] * 2);
}
//array = [2, 4, 6, 8]

//map 메서드 사용
array.map((element, i)=>{
  return element * 2
})
//array = [1,2,3,4] 기존 배열은 그대로 두고 [2, 4, 6, 8] 새로운 배열이 생성

3. fill()

fill()은 배열의 지정된 요소를 값으로 채운다.
원래 배열을 덮어쓰며 시작과 종료 위치를 지정할 수 있다. 지정하지 않을 시 같은 값으로 모든 요소가 채워진다.

반환 값 -> 변형한 배열

ex) 동일한 값으로 채우기

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.fill("Kiwi");
// ["Kiwi", "Kiwi", "Kiwi", "Kiwi"]

ex) 지정한 위치의 값 채우기

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.fill("Kiwi", 2, 4);
// ["Banana", "Orange", "Kiwi", "Kiwi"]

출처 - 이 포스트는 제로초님의 youtube - ES2021 자바스크립트 강좌를 참고하여 작성하였습니다.