[JavaScript] 배열 원소와 인덱스를 반복적으로 활용하는 함수(forEach, map 함수)

💡 목표

JavaScript에서 forEach 함수와 map 함수의 활용법에 대해 학습한다.

1.  forEach 함수

함수 원형(기본)

배열.forEach(콜백함수(값, 인덱스, 배열 자신));

 

forEach 함수는 전달인자가 배열 내 원소 값, 인덱스, 배열 자신인 콜백함수를 받는 함수입니다. 즉, forEach 함수는 for 반복문처럼 첫 번째 원소부터 마지막 원소까지 차례대로 배열에서 꺼내 콜백함수에 전달합니다. map 함수와 다르게 리턴 값이 없다는 특징이 있습니다. 예제 코드와 함께 살펴보겠습니다.

예제1

let arr1 = [100, 200, 300];
arr1.forEach( (v, idx, arr) => {
    console.log(`${idx} 인덱스의 값: ${v}`);
    console.log(`배열 자신: ${arr}`);
    console.log('------------');
});

실행 결과1

0 인덱스의 값: 100
배열 자신: 100,200,300
------------
1 인덱스의 값: 200
배열 자신: 100,200,300
------------
2 인덱스의 값: 300
배열 자신: 100,200,300
------------

0번 인덱스부터 마지막 인덱스까지 하나의 원소씩 전달받아 함수를 실행하는 로직을 알 수 있습니다.

예제2

let arr1 = [100, 200, 300];
arr1.forEach( (element) => {
    console.log(`값: ${element}`);
    console.log('------------');
});

원소만 전달인자로 받을 수도 있습니다.

실행 결과2

100
200
300

2.  map 함수

함수 원형

배열.map(콜백함수(값, 인덱스, 배열 자신));

 

map 함수는 전달인자가 배열 내 원소 값, 인덱스, 배열 자신인 콜백함수를 받는 함수입니다. 즉, map 함수는 for 반복문처럼 첫 번째 원소부터 마지막 원소까지 차례대로 배열에서 꺼내 콜백함수에 전달합니다. map 함수는 반환 값이 있다는 점이 forEach 함수와의 차이점입니다.

예제1

let arr2 = [10, 20, 30];
let arr3 = arr2.map( (value, index) => value*index;);
console.log(arr3);

 

배열의 각 원소 값과 인덱스를 곱한 결괏값을 리턴하는 구문입니다.

실행 결과1

[ 0, 20, 60 ]

예제2

let arr4 = [2, 3, 4];
let arr5 = arr4.map( number => number**2;);
console.log(arr5);

실행 결과2

[ 4, 6, 9 ]

---

 

포스팅 내용에 오류가 있다면 아래에 댓글 남겨주세요!

그럼 오늘도 즐겁고 행복한 하루 보내시길 바랍니다.

고맙습니다 :)