[Javascript] forEach()

관련사이트: MDN

Array.prototype.forEach() - JavaScript | MDN

 

for문을 사용하면서 forEach의 사용법을 조금 알고 싶어서 관련 사이트를 찾아보았다.

forEach 메서드는 배열에 사용하는 메서드로 for문과 같이 반복적인 기능을 수행하지만 index, 조건식과 increase 를 정의하지 않아도 된다.

forEach()는 각 배열 요소에 대해 한 번씩 callback 함수를 실행한다.

 

문법

const arr = ['가', '나', '다', '라', '마'];

arr.forEach(function(element, index, array){
    console.log(`[${array}]의 ${index}번째 요소 ${element}`);
})

 

forEach 메서드는 파라미터를 콜백함수로 받는다.

콜백함수의 첫 번째 파라미터는 배열에서 처리중인 현재 요소,

두 번째 파라미터는 index,

세 번째 파라미터로 forEach를 호출한 배열이다.

 

 

예제

forEach 메서드의 콜백함수 내에서 메서드를 호출한 배열 변경

const arr = ['가', '나', '다', '라', '마'];

arr.forEach(function(element){
    console.log(element);
    if(element === '다'){
        arr.shift();
    }
})

 

가     나     다     마

 

MDN 사이트에서 'forEach()는 배열을 변형하지 않지만, callback이 변형할 수는 있다'고 나온다.

forEach()는 반복 전에 배열의 복사본을 만들지 않는다.

 

각 배열 요소에 대해 한 번씩 callback 함수를 실행하다가 요소의 값이 '다'일 경우 전체 배열의 첫 번째 항목을 제거하여, 나머지 모든 항목이 한 위치 앞으로 이동한다.

따라서 '가', '나', '다'를 출력 후 배열의 첫 번째 '가'를 제거하여 '라'가 '다'의 자리로 이동하게 된다. 그러므로 다음 index의 값으로 '마'가 출력된다.

 

 

for를 forEach()로 바꾸기

const arr = ['가', '나', '다', '라', '마'];
const copy = [];

//  for문 사용
for(let i=0; i<arr.length; i++){
    copy.push(arr[i]);
}

//  forEach() 사용
arr.forEach(function(element){
    copy.push(element);
})

 

console.log(copy);

 

[ '가', '나', '다', '라', '마' ]