arr.forEach(callback(currentvalue[, index[, array]])[, thisArg])
배열의 forEach 함수를 이해하는 과정을 순차적으로 살펴보겠습니다.
이 글에서는 callback함수의 currentvalue와 index 매개변수에 대해서만 알아보겠습니다.
먼저 다음의 코드를 보겠습니다.
function print(fruit) {
const result = `제가 좋아하는 과일은 ${fruit}입니다.`;
console.log(result);
}
const fruits = ['사과', '바나나', '파인애플', '오렌지', '딸기'];
print(fruits[0]);
print(fruits[1]);
print(fruits[2]);
print(fruits[3]);
print(fruits[4]);
상단에 print() 함수가 있습니다.
그 아래에 fruits라는 배열이 있습니다.
이 배열의 요소를 각각 print() 함수에 집어넣어 호출하고 있습니다.
그 결과는 아래와 같습니다.
//결과
제가 좋아하는 과일은 사과입니다.
제가 좋아하는 과일은 바나나입니다.
제가 좋아하는 과일은 파인애플입니다.
제가 좋아하는 과일은 오렌지입니다.
제가 좋아하는 과일은 딸기입니다.
이제 다음의 코드를 보겠습니다.
function print(fruit) {
const result = `제가 좋아하는 과일은 ${fruit}입니다.`;
console.log(result);
}
const fruits = ['사과', '바나나', '파인애플', '오렌지', '딸기'];
for (let i = 0; i < fruits.length; i++) {
print(fruits[i]);
}
print함수와 fruits 배열은 상단의 코드와 같습니다.
5번의 print() 함수만 for문으로 바꿔주었습니다.
그랬더니 코드가 조금 더 간결해졌습니다.
물론 코드의 결과는 똑같습니다.
//결과
제가 좋아하는 과일은 사과입니다.
제가 좋아하는 과일은 바나나입니다.
제가 좋아하는 과일은 파인애플입니다.
제가 좋아하는 과일은 오렌지입니다.
제가 좋아하는 과일은 딸기입니다.
이와 같이 배열의 요소를 각각 인수로 전달하여 함수를 호출하고 싶을 때
forEach를 사용하여 코드를 더 간결하게 해줄 수 있습니다.
아래의 코드를 보겠습니다.
function print(fruit) {
const result = `제가 좋아하는 과일은 ${fruit}입니다.`;
console.log(result);
}
const fruits = ['사과', '바나나', '파인애플', '오렌지', '딸기'];
fruits.forEach(print);
for문을 forEach문으로 바꾸었는데 코드가 매우 많이 줄었습니다.
이 코드 또한 상단의 코드와 결과가 완전히 같습니다.
배열에해당하는것.forEach(함수); 형식으로 쓰면 됩니다.
그러면 함수의 매개변수인 fruit에 fruits의 요소들을 집어넣어 print()함수를 실행해줍니다.
함수의 인수로 사용되는 함수를 callback함수라 부릅니다.
forEach()도 함수이므로 forEach(callback함수)가 됩니다.
fruits.forEach(print); //<----- (1)
print(fruits[0]); // <--|
print(fruits[1]); // <--|
print(fruits[2]); // <--|-- (2)
print(fruits[3]); // <--|
print(fruits[4]); // <--|
이 코드에서 (1)과 (2)는 서로 같습니다.
아래와 같이 함수를 익명 함수(이름이 없는 함수)로 바꾸고,
익명 함수를 print 변수에 할당해도 같은 결과를 보여줍니다.
const print = function (fruit) {
const result = `제가 좋아하는 과일은 ${fruit}입니다.`;
console.log(result);
}
const fruits = ['사과', '바나나', '파인애플', '오렌지', '딸기'];
fruits.forEach(print);
아래와 같이 forEach의 callback함수 자리에 익명 함수 자체를 넣어도 됩니다.
const fruits = ['사과', '바나나', '파인애플', '오렌지', '딸기'];
fruits.forEach(function (fruit) {
const result = `제가 좋아하는 과일은 ${fruit}입니다.`;
console.log(result);
});
이 코드 또한 결과는 같습니다.
익명함수는 화살표 함수로 변환이 가능합니다.
따라서 화살표 함수를 넣은 아래의 코드도 결과는 같습니다.
const fruits = ['사과', '바나나', '파인애플', '오렌지', '딸기'];
fruits.forEach((fruit) => {
const result = `제가 좋아하는 과일은 ${fruit}입니다.`;
console.log(result);
});
fruit 매개변수에 추가로 index 매개변수를 사용할 수도 있습니다.
const fruits = ['사과', '바나나', '파인애플', '오렌지', '딸기'];
fruits.forEach((fruit, index) => {
const result = `제가 좋아하는 ${index + 1}번째 과일은 ${fruit}입니다.`;
console.log(result);
});
index 매개변수는 배열의 순서가 0부터 대입되는데
이 코드에서는 0, 1, 2, 3, 4 가 차례대로 대입됩니다.
이 코드의 결과는 아래와 같습니다.
//결과
제가 좋아하는 1번째 과일은 사과입니다.
제가 좋아하는 2번째 과일은 바나나입니다.
제가 좋아하는 3번째 과일은 파인애플입니다.
제가 좋아하는 4번째 과일은 오렌지입니다.
제가 좋아하는 5번째 과일은 딸기입니다.
화살표 함수와 익명 함수는 서로 변환이 되므로
아래와 같이 익명 함수를 써도 결과는 같습니다.
const fruits = ['사과', '바나나', '파인애플', '오렌지', '딸기'];
fruits.forEach(function (fruit, index) {
const result = `제가 좋아하는 ${index + 1}번째 과일은 ${fruit}입니다.`;
console.log(result);
});
forEach 앞에는 배열에 해당하는 것을 모두 쓸 수 있습니다.
위의 코드와 같이 배열이 담겨져 있는 변수(fruits)를 써도 되고,
아래와 같이 배열 자체를 써도 됩니다.
이 코드 또한 결과는 같습니다.
['사과', '바나나', '파인애플', '오렌지', '딸기'].forEach(function (fruit, index) {
const result = `제가 좋아하는 ${index + 1}번째 과일은 ${fruit}입니다.`;
console.log(result);
});
아래와 같이 배열을 반환하는 함수를 써도 됩니다.
slice() 함수는 배열의 일부분을 배열로 반환해주는 함수입니다.
const fruits = ['사과', '바나나', '파인애플', '오렌지', '딸기'];
fruits.slice(1, 4).forEach(function (fruit, index) {
const result = `제가 좋아하는 ${index + 1}번째 과일은 ${fruit}입니다.`;
console.log(result);
});
fruits.slice(1, 4) 는 ['바나나', '파인애플', '오렌지'] 와 같습니다.
이 코드의 결과는 아래와 같습니다.
제가 좋아하는 1번째 과일은 바나나입니다.
제가 좋아하는 2번째 과일은 파인애플입니다.
제가 좋아하는 3번째 과일은 오렌지입니다.