자바스크립트 반복 메소드

(2021-06-15)

forEach(), map(), filter(), reduce()

1. [자바스크립트]  반복 메소드 

  ㅇ 기본 동작
     - 배열 내 모든 요소들을 순회하며,
     - 특정 작업을 수행하거나 또는 특정 조건을 만족하는 요소를 가져오는 등
     - 반복적인 작업에 사용

  ㅇ 전형적인 함수형 프로그래밍 기법을 구사함 (인수로써, 고차 함수를 씀)
     - 통상, 첫번째 인수로써, 고차 함수를 사용
        . 배열 내 각 요소 마다 지정된 콜백함수를 실행
        . 매개변수로 전달 받은 콜백함수를, 배열 내 각 요소 마다 각각 적용
        . 즉, 배열의 각 요소 값을 차례로 꺼내어, 콜백함수인수로 넘기기를 반복함
     - 이때, 고차 함수에는, 일반적으로 다음 3개 인수를 사용 함
        . 첫째, 현재 처리되는 배열 요소의 값
        . 둘째, 현재 처리되는 배열 요소의 인덱스
        . 섯째, 처리되는 배열에 대한 참조  
     - 단, reduce 메소드고차 함수의 경우에는, 좀 더 복잡함    


2. [자바스크립트]  반복 메소드 종류

  ㅇ forEach(콜백함수) 
     - 배열 내 각 요소를 순서대로 처리
     - 형식
        . array.forEach( callback( element[, index[, array]] ) [, thisArg] )
        . 콜백함수로의 전달 인수 셋 : (현재 요소값 [, 현재 인덱스 번호 [, 배열명]])
           .. 例) (eachValue, index, arrayName)
     - 반환 상의 특징
        . 반환 값 없음
        . 콜백함수에서, 원본 배열 자체를 변경시킬 수 있음

  ㅇ map(콜백함수)
     - 배열 내 각 요소를 순서대로 변환 처리후, 처리 결과를 새 배열로 반환
        . 위 forEach와 매우 유사
     - 형식
        . array.map( callback( element[, index[, array]] ) [, thisArg] )
     - 화살표 함수에 의한 사용 형식
        . array.map( (element [, index [, array]]) => { return element_processed; } );
       . 例) array.map( x => 2 * x ); // 각 요소에 2의 배수를 한 배열을 반환
     - 반환 상의 특징
        . 배열 array 내 각 요소별로 처리하되, 새로운 결과 배열을 반환
           .. 새 배열을 출력하면서, 
           .. 같은 크기(size,length)를 유지하지만,
           .. 개별 요소의 내용은 변경 가능

  ㅇ filter(콜백함수)
     - 배열 내 각 요소를 순서대로 걸러낸 후, 새 배열 반환
        . 배열 요소들 중 필요한 것 만 걸러내고, 남겨진 결과를, 새로운 배열로 반환
     - 형식
        . array.filter( callback(element[, index[, array]])[, thisArg] )
     - 화살표 함수에 의한 사용 형식
        . 例) array.filter( x => x % 2 ); // 각 요소들이 모두 홀수인 새 배열을 반환
     - 반환 상의 특징
        . 새 배열을 출력하면서, 
        . 그 크기(size,length)가 변동될 수 있지만, 
        . 필터링된 개별 요소의 내용 및 형태는 그대로 임

  ㅇ reduce(콜백함수)
     - 배열 내 각 요소를 순서대로 처리 누적하며, 하나의 값으로 줄임
        . 배열 내 각 요소를 순회하면서, 하나씩 꺼내 사용자 함수(콜백함수)를 적용함
        . 현 콜백함수의 반환값을, 매번 다음 콜백함수의 첫 인수에 전달함
        . 이때, 콜백함수를 그 결과 값을 계속 누적하는 함수로 하면,
        . 결국, 배열을 하나의 값으로 줄여줌
     - 형식 
        . array.reduce( callback[, initialValue] )
           .. initalValue 생략시, 배열 내 첫 요소를 시작 값으로 하여 둘째 요소로 진행함
           .. initalValue 사용시, 시작 값으로 쓰이며, 콜백함수의 반환값을 담는 빈그릇 역할을 함
     - 화살표 함수에 의한 사용 형식
        . array.reduce( (accumulator, currentValue [, currentIndex, thisArray]) => 
                            { return 결과; }, initalValue );
        . 例) [1,2,3,4].reduce((accumulator,currentValue)
                 => accumulator + currentValue, 0); // 10
     - 반환 상의 특징
        . 새 배열을 출력하면서,
        . 윈래 배열과는 길이 및 형태가 바뀜
        . 객체, 배열, 정수형, 논리형 등 어떤 자료형도 반환 가능


[JS 배열/Map/Set] 1. JS 배열 2. JS 배열 메소드 3. 반복 메서드 4. 유사 배열 객체 5. Map 객체 6. Set 객체 7. ArrayBuffer 객체

 
        최근수정     요약목록     참고문헌