Javascript Array.prototype.forEach()

forEach()메서드는 주어진 함수를 배열 요소 각각에 대해 실행한다.

arr.forEach(callback(currentvalue[, index [,array]])[,thisArg]) 이와 같은 형식으로 사용된다.

매개변수

callback : 각 요소에 대해 실행할 함수이며 다음 3가지 매개변수를 받는다.

• currentValue : 처리할 현재 요소
• index : 처리할 현재 요소의 인덱스
• array : forEach()를 호출한 배열
  

thisArg : callback을 실행할 때 this로 사용할 값

설명

forEach()는 주어진 callback을 배열에 있는 각 요소에 대해 오름차순으로 한번씩 실행한다.

삭제했거나 초기화하지 않은 인덱스 속성은 실행되지 않는다.

callback은 요소 값, 요소 인덱스, 순회 중인 배열 이 3가지 인수와 함께 호출된다.

thisArg 매개변수를 입력하면, callback을 호출할 때 전달해 this의 값으로 쓰인다.
전달하지 않으면 undefined를 사용하며, 최종 this값은 함수의 this값을 결정하는 규칙에 따른다.

forEach()로 처리할 요소의 범위는 최초 callback 호출전에 설정된다.
forEach() 호출 시작 후 배열에 추가된 요소는 callback이 방문하지 않는다.

forEach()는 map(), reduce()와 달리 undefined를 반환하므로 메서드 체인의 중간에 사용할 수 없다.

메서드 체인의 끝에서 부가적인 효과를 주기위해 자주 사용된다.

기본 사용

    const array1 = ['a', 'b', 'c'];

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

    // Expected output: "a"
    // Expected output: "b"
    // Expected output: "c"

활용 예제

• for 반복문을 forEach()로 바꾸기

        const items = ['item1', 'item2', 'item3'];
        const copy = [];
  
        // for 반복문 사용하기
        for (let i=0; i<items.length; i++) {
        copy.push(items[i]);
        }
  
        // forEach() 사용하기
        items.forEach(function(item){
        copy.push(item);
        });
  

• 배열 출력하기

        function logArrayElements(element, index, array) {
            console.log('a[' + index + '] = ' + element);
        }
  
        // 인덱스 2는 값이 없으므로 건너뛴다.
        [2, 5, , 9].forEach(logArrayElements);
              
        // a[0] = 2
        // a[1] = 5
        // a[3] = 9
  
  

참고

• MDN-Array.prototype.forEach()