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
- 반환 상의 특징
. 새 배열을 출력하면서,
. 윈래 배열과는 길이 및 형태가 바뀜
. 객체, 배열, 정수형, 논리형 등 어떤 자료형도 반환 가능