[JavaScript] forEach - 자바스크립트 배열 메소드

목차

• forEach 메서드란?
• forEach 알아보기

 

forEach 메서드란?

배열에서, 주어진 함수를 배열 요소 각각에 대해 실행하는 메서드입니다.

 

아래와 같은 배열이 있을 때, 기존의 for문을 사용하여 각 요소들을 로그하려면

const numbers = [1, 2, 3, 4, 5];

for (let i = 0; i < numbers.length; i++) {
	console.log(numbers[i]);
}

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

위와 같은 코드를 짜야 했었습니다.

 

forEach 메서드를 사용하면 더 간편하고 짧게 코드를 짤 수 있습니다.

const numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(value) {
	console.log(value);
});

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


// ---------- 화살표 함수 활용 ---------
numbers.forEach(value => console.log(value));

그럼 이제 forEach 메서드에 대해 좀 더 자세하게 알아봅시다.

---

forEach 알아보기

forEach 메서드를 사용하기 위해 forEach() 괄호 안에 콜백함수를 사용해야 합니다.

그 콜백함수에는 3개의 매개변수를 받습니다.

• 처리할 현재 요소
• 처리할 현재 요소의 인덱스
• forEach 메서드를 호출한 배열

 

하나씩 살펴봅시다,

const numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(value) {
	console.log(value);
});

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


// ---------- 화살표 함수 활용 ---------
numbers.forEach(value => console.log(value));

위에서 봤던 코드와 같습니다.

함수의 매개변수인 value는 배열을 순회하면서 각각의 값을 나타내고 있습니다.

 

const numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(value, index) {
	console.log(value, index);
});

// 1 0
// 2 1
// 3 2
// 4 3
// 5 4


// ---------- 화살표 함수 활용 ---------
numbers.forEach((value, index) => console.log(value, index));

위 코드에서 콜백함수에 인덱스를 추가하여 로그했습니다.

함수의 매개변수인 index는 배열을 순회하면서 각각의 인덱스 값을 나타내고 있습니다.

 

const numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(value, index, array) {
	console.log(value, index);
});

// 1 0 [1, 2, 3, 4, 5]
// 2 1 [1, 2, 3, 4, 5]
// 3 2 [1, 2, 3, 4, 5]
// 4 3 [1, 2, 3, 4, 5]
// 5 4 [1, 2, 3, 4, 5]


// ---------- 화살표 함수 활용 ---------
numbers.forEach((value, index, array) => console.log(value, index, array));

위 코드에서 콜백함수에 배열을 추가하여 로그했습니다.

함수의 매개변수인 array는 원본 배열 그 자체를 나타내고 있습니다.

 

오탈자, 오류 지적, 보완할 점 등 언제나 환영합니다.

메일이나 댓글로 남겨주시면 확인 후 수정하겠습니다.