[JavaScript] 자바스크립트 forEach

 

forEach() 함수는
배열을 순회해서 각 요소를 콜백 함소루 처리하기 위한 함수입니다.
배열의 각 요소에 대해 주어진 콜백 함수를 적용해서 순서대로 한 번씩 실행합니다.

 

arr.forEach(function(currentValue[, index[, array]]) {
    // 실행할 코드
}

 

arr 배열의 각 요소에 적용할 때 호출되는 콜백 함수입니다.
● currentValue (필수 값) : 처리할 현재 요소. 미 매개변수를 통해 현재 요소에 접근할 수 있습니다.
● index (선택 사항) : 처리할 현재 요소의 인덱스. 미 매개변수를 사용하여 현재 요소의 인덱스에 접근할 수 있습니다.
● array (선택 사항) : forEach() 함수를 호출한 배열. 이 매개변수를 사용하여 원본 배열에 접근할 수 있습니다.

 

 

for 문과 forEach 문 사용방법

 

● for문 사용 시

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

for (let i=0; i < array.length; i++) {
   document.write(array[i] + "<br>");
};

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

 

● forEach문 사용 시

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

array.forEach(function(e) {
   document.write(e + "<br>");
});

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

 

forEach문은 인덱스 변수를 따로 생성할 필요없이 콜백함수를 인자로 받아 배열의 각 요소에 접근합니다. 
위의 예제에서 접근된 배열의 요소는 e로 표현할 수 있습니다. 
이렇게 forEach문을 사용하면 반복문을 좀 더 간결하게 만들 수 있습니다.

 

forEach 메서드 활용

 

● 배열 요소 합계 확인

const array = [1, 2, 3, 4, 5];
let  sum = 0;

array.forEach(function(e) {
   sum += e;
});

document.write("합계 : " + sum);

// 합계 : 15

 

● 배열의 각 요소 길이 확인

const array = ['apple', 'orange', 'banana']

array.forEach(function(e) {
   document.write(`${e}의 길이 : ${e.length}` + "<br>");
});

// apple의 길이 : 5
// orange의 길이 : 6
// banana의 길이 : 6

 

 

forEach 메서드는 중간에 루프를 중단하거나 다음 반복으로 건너뛸 수 있는 break 나 continue 와 같은 기능을

지원하지 않습니다. 이러한 로직이 필요하다면, for 문을 사용해야 합니다.