forEach() / 주어진 함수를 배열 요소 각각에 실행하기

주어진 함수를 배열 요소 각 각에 대해 실행한다.

Array.prototype.forEach() - JavaScript | MDN

구문

arr.forEach(callback(currentvalue[, index[, array]])[, thisArg])

callback  - 각 요소에 대해 실행할 함수. 다음 세 가지 매개변수를 받는다.

currentValue - 처리할 현재 요소.

index (Optional) - 처리할 현재 요소의 인덱스.

array (Optional) - foreach()를 호출한 배열.

thisArg (Optional) - callback을 실행할 때 this로 사용할 값.

 

반환 값 : undefined.

 

forEach()는 주어진 callback을 배열에 있는 각 요소에 대해 오름차순으로 한 번씩 실행한다.

각 배열 요소에 대해 한 번씩 callback 함수를 실행. 

map()과 reduce()와는 달리 undefined를 반환하기 때문에 메서드 체인의 중간에 사용할 수 없다.

대표적인 사용처는 메서드 체인 끝에서 부작용(side effect)을 실행하는 것.

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

array1.forEach(element => console.log(element));
// expected output: "a"
// expected output: "b"
// expected output: "c"

예시) 초기화하지 않은 값의 반복 생략

const arraySparse = [1,3,,7]
let numCallbackRuns = 0

arraySparse.forEach(function(element){
  console.log(element)
  numCallbackRuns++
})

console.log("numCallbackRuns: ", numCallbackRuns, "개")

// 1
// 3
// 7
// numCallbackRuns: 3개
// comment: 보시다시피 3과 7 사이의 누락된 값은 콜백 함수를 호출하지 않았습니다.

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

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

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

// 이후
items.forEach(function(item){
  copy.push(item);
});

예시) 배열 콘텐츠 출력

function logArrayElements(element, index, array) {
  console.log('a[' + index + '] = ' + element);
}

// 인덱스 2는 배열의 그 위치에 항목이 없기에
// 건너뜀을 주의하세요.
[2, 5, , 9].forEach(logArrayElements);
// 기록:
// a[0] = 2
// a[1] = 5
// a[3] = 9

예시) thisArg 사용

function Counter() {
  this.sum = 0
  this.count = 0
}
Counter.prototype.add = function(array) {
  array.forEach(function(entry) {
    this.sum += entry
    ++this.count
  }, this)
  // ^---- 주의
}

const obj = new Counter()
obj.add([2, 5, 9])
obj.count
// 3
obj.sum
// 16

thisArg 매개변수(this)를 forEach()에 제공했기에, 

callback은 전달받은 this의 값을 자신의 this 값으로 사용할 수 있다.

실전예시) argument 사용

function sayHello() {
	console.log("Hello");
}

const savedToDos = localStorage.getItem("todos");
console.log(savedToDos);
if (savedToDos !== null) {
 const parsedToDos = JSON.parse(savedToDos);
 parsedToDos.forEach(sayHello);
}

parsedTodos가 가지고 있는 각 각의 아이템에 대해 sayHello function을 실행한다.

array에 3개의 아이템이 있으면 3번의 "Hello"를 한다.

 

하지만 이건 이 array의 아이템들에 대해 한개의 function만 실행할 수 있게 해준다.

내가 어떤 아이템을 사용하고 있는지 모르기에 처리되고 있는 아이템이 무엇인지 아는것이 좋다.

 

submit eventListener가 event(argument)를 그냥 제공해주는 것처럼

자바스크립은 지금 처리되고 있는 아이템 또한 그냥 처리해준다.

function sayHello(item) {
	console.log("this is the turn of", item);
}

array에 있는 item을 하나씩 function해서 사용하는거와 같다.

sayHello("a") 를 실행하고 그 다음 "b"를 실행하고 하나씩 실행한다.

item에 array가 들어간다.

const savedToDos = localStorage.getItem("todos");
console.log(savedToDos);
if (savedToDos !== null) {
 const parsedToDos = JSON.parse(savedToDos);
 parsedToDos.forEach((item) => console.log("this is the turn of", item));
}

arrow function을 써서 더 줄일 수 있다. 결괏값은 같다.

const savedToDos = localStorage.getItem("todos");
console.log(savedToDos);
if (savedToDos !== null) {
	const parsedToDos = JSON.parse(savedToDos);
    parsedToDos.forEach((item) => console.log("this is the turn of", item));
}