자바스크립트 반복 메소드

(2022-06-19)

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(콜백함수)
     - 배열 내 각 요소를 순서대로 걸러낸 후, 새 배열 반환
        . 배열 요소들 중 필요한 것 만 걸러내고, 남겨진 결과를, 새로운 배열로 반환
        . 조건에 맞는 (true 반환하는) 요소들 만 추려서, 새 배열로 반환 
     - 형식
        . array.filter( callback(element[, index[, array]])[, thisArg] )
     - 화살표 함수에 의한 사용 형식
        . 例) array.filter( x => x % 2 ); // 각 요소들이 모두 홀수인 새 배열을 반환
        . 例) arrzy.filter((v,i,arr) => arr.indexOf(v)===i); // 중복 요소 걸러내기
     - 반환 상의 특징
        . 새 배열을 출력하면서, 
        . 그 크기(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 객체  


Copyrightⓒ written by 차재복 (Cha Jae Bok)               기술용어해설 후원
"본 웹사이트 내 모든 저작물은 원출처를 밝히는 한 자유롭게 사용(상업화포함) 가능합니다"