자바스크립트 - 배열 요소 값 차례대로 출력하기 (forEach() 함수)

forEach() 함수를 사용하면 for loop문보다 짧은 코드로 배열 요소를 접근할 수 있다.

 

 

const array = [1, 2, 3, 4];

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

// 1
// 2
// 3
// 4

element 변수는 배열 순환 중, 현재 요소를 의미한다.

element 변수의 이름은 아무나 지어도 되지만 요소를 뜻하는 변수 이름을 추천, 예: ele 혹은 element

 

 

예제: 배열의 각 요소와 요소의 인덱스 출력하기.

const array = [1, 2, 3, 4];

array.forEach((element, index) => {
	console.log("현재 값: " + element + " | 인덱스 값: " + index);
});

// 현재 값: 1 | 인덱스 값: 0
// 현재 값: 2 | 인덱스 값: 1
// 현재 값: 3 | 인덱스 값: 2
// 현재 값: 4 | 인덱스 값: 3

element는 현재 요소를 의미하고 index라는 변수는 현재 요소의 인덱스 값을 의미한다.

 

 

주의점: forEach() 함수는 반환 값이 없다.

const array = [1, 2, 3, 4];

const newArray = array.forEach((element, index) => {
    if (element > 2)
        return element;
});

console.log(newArray); // undefined

위에 코드는 array라는 배열의 요소 중에서 요소의 값이 2보다 많은 요소 값들을 newArray라는 배열에 할당하려고 한다.

하지만 forEach() 함수는 반환 값이 없어서 언제나 undefined를 반환한다.

 

만약 A라는 배열에서 특정 요소 골라서 B라는 배열에 할당하고 싶으면, find() 함수를 사용하는 것을 추천.