[JavaScript] forEach, map, fill

1. forEach

forEach 메서드는 주어진 함수를 배열 요소 각각에 대해 실행한다.

forEach는 중간에 멈출 수 없다.

 

for문

const array1 = [2, 4, 6, 8, 10];
const array2 = [];
for (let i = 0; i < array1.length; i++) {
  array2.push(array1[i] * 2);
}

 

 

forEach 메서드

const array1 = [2, 4, 6, 8, 10];
const array2 = [];
array1.forEach((element, index) => {
  array2.push(element * 2);
})

console.log(array2);
// [4, 8, 12, 16, 20]

 

 

2. map

map 메서드는 주어진 함수를 배열 요소 각각에 대해 실행하여 새로운 배열을 반환한다.

const array1 = [2, 4, 6, 8, 10];
const array2 = [];
array1.map((element, index) => {
  array2.push(element * 2);
})

console.log(array2);
// [4, 8, 12, 16, 20]

 

2-2 . forEach와 map 차이

forEach는 return을 반환하지 않지만 map은 return을 반환한다.

 

forEach

const array1 = [2, 4, 6, 8, 10];
const array2 = array1.forEach((element, index) => {
  return element * 2
})

console.log(array2);
// undefined

 

map

const array1 = [2, 4, 6, 8, 10];
const array2 = array1.map((element, index) => {
  return element * 2;
})

console.log(array2);
// [4, 8, 12, 16, 20]

 

 

3. fill

fill 메서드는 배열의 시작 인덱스부터 끝 인덱스까지 하나의 값으로 채운다.

const array1 = [2, 4, 6, 8, 10];
array1.fill();

console.log(array1);
// [undefined, undefined, undefined, undefined, undefined]

array1.fill(10);

console.log(array1);
// [10, 10, 10, 10, 10]

 

fill은 3개의 매개변수를 가진다. 순서대로 값, 시작 인덱스, 끝 인덱스이다.

const array1 = [2, 4, 6, 8, 10];
array1.fill(777, 2, 4);

console.log(array1);
// [2, 4, 777, 777, 10]

 

 

만약 1부터 100까지 배열을 만들고 싶다면(1, 2, 3, ... , 99, 100) map과 fill을 사용하면 된다.

const array1 = Array(100);
// 빈 배열 100개
console.log(array1.length);
// 100
const array2 = array1.fill().map((element, index) => {
  return index + 1
});
console.log(array2);
// [1, 2, 3, ... ,99, 100]

 

 

참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/fill