for vs forEach() vs map()

for

for 문의 간단한 예시

let str = '';

for (let i = 0; i < 9; i++) {
  str = str + i;
}

console.log(str);
// Expected output: "012345678"

 

Syntax

for (initialization; condition; afterthought)
  statement

initialization : var이나 let으로 초기값 선언

contition : 매 반복마다 평가할 식. 평가 결과가 참이면 statement를 실행, 거짓이라면 다음으로 건너뛴다.

afterthought : 매 반복 후 진행할 식. 다음 condition 평가 전에 발생한다.

statement : condition이 참일 때 실행하는 문. {}로 묶어야 한다.

 

---

 

Array.prototype.forEach()

Array 인스턴스의 forEach() 매서드는 각 배열 요소에 대해 제공된 함수를 한 번씩 실행한다.

const array1 = ['a', 'b', 'c'];

array1.forEach((element) => console.log(element));

// Expected output: "a"
// Expected output: "b"
// Expected output: "c"

 

Syntax

forEach(callbackFn)
forEach(callbackFn, thisArg)

 

forEach() 매서드는 순회 매서드이다. 배열의 각 element에 대해 제공된 callbackFn 을 오름차순 index 순서로 한 번씩 호출한다. map()과 달리 forEach()는 항상 undefined를 반환한다.

 

forEach()는 호출되는 배열을 변경하지 않지만, callbackFn으로 제공되는 함수는 변경할 수 있다. 하지만 배열의 length 기준은 callbackFn을 호출하기 전에 계산한다.

 

하지만 이해하기 어려운 코드를 만드는 경우가 많으므로 지양하도록 하자.

 

forEach() 는 for과 다르게 loop를 중단하는 방법이 없다. (break; 사용 불가)

 

for 문을 forEach()로 바꾸기

const items = ["item1", "item2", "item3"];
const copyItems = [];

// 전
for (let i = 0; i < items.length; i++) {
  copyItems.push(items[i]);
}

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

 

---

Array.prororype.map()

map() 매서드는 배열 내의 모든 요소에 각각에 대해 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.

const array1 = [1, 4, 9, 16];

// Pass a function to map
const map1 = array1.map((x) => x * 2);

console.log(map1);
// Expected output: Array [2, 8, 18, 32]

 

Syntax

    arr.map(callback(currentValue[, index[, array]])[, thisArg])

 

callback : 새로운 배열 요소를 생성하는 함수.

curentValue : 현재 처리할 요소

index : 처리할 현재 요소의 인덱스

array : map()을 호출한 배열

 

map은 callback함수를 각각의 요소에 대해 한번씩 순서대로 불러 그 함수의 반환값으로 새로운 배열을 만든다. callback함수는 배열 값이 들어있는 인덱스에 대해서만 호출된다.

 

callback 함수는 호출될 때 대상 요소의 값, 그 요소의 인덱스, map을 호출한 원본 배열 3개의 인수를 전달받는다.

map은 호출한 배열의 값을 변형하지 않는다. 단 callback함수에 의해서 변형될 수는 있다.

 

let numbers = [1, 4, 9];
let roots = numbers.map(Math.sqrt);
// roots는 [1, 2, 3]
// numbers는 그대로 [1, 4, 9]