Quick JavaScript (8) Array - Iterators

 

정리할 내용은 배열의 원소를 순회하는 메서드들이다.

 

1.  forEach( )

간단한 사용례는 다음과 같다. 

 

 

Array 메서드 forEach 는 콜백 함수(callback function)를 인자로 받는다. 

그리고 배열의 각 원소의 값이 콜백 함수의 인자로 넘겨져 처리된다.

위 코드의 실행 결과를 콘솔에서 확인하면 다음과 같다.

 

 

마지막 행을 눈여겨 보길 바란다.

forEach 나 map 은 원래의 배열을 변화시키지 않는다.

 

궁금한 점이 생겼다.

위에서 forEach 에 넘겨지는 콜백은 원소의 값을 다룬다고 했는데...

만약 인덱스를 다루고 싶다면 어떻게 해야하나?

 

forEach 에 넘겨지는 콜백은 최대 3 개의 인자를 다룰 수 있다.

일단 원소의 값과 원소의 인덱스를 넘긴 경우를 보자.

 

 

forEach 에 넘겨진 콜백의 첫 인자는 값이고 둘째 인자는 인덱스임을 확인할 수 있다. 

세 번째 인자는 배열 자체를 전달할 수 있으나 자주 사용되지는 않는다.

 

 

위의 코드들에서는 이름이 있는 함수 test 를 콜백으로 사용했다.

하지만 간단한 함수의 경우에는 화살표 함수를 사용하는 것이 일반적일 것이다. 

 

 

화살표 함수는 차후 함수를 정리할 때 상세히 다룰 것이다.

지금은 함수를 간결히 표현하는 방법 정도로 생각하자.

 

2.  map( )

콜백을 인자로 받는 것과 그 콜백에 넘겨지는 인자의 구조 모두 forEach와 같다.

차이점은 그 결과를 다시 배열로 만든다는 점이다.

 

 

원본 arr 가 변경하는 것이 아니라 새로운 배열을 만들어 주는 것임을 명심하자.

 

3.  Reduce( )

사용례를 보자.

 

 

콘솔에 6, 106 이 출력된다.

acc 는 arr 의 각 원소를 콜백에 적용한 결과를 누적시키는 역할을 한다. 

말로 하는 것보다 또 다른 코드를 보는 것이 이해하기가 쉽다.

 

 

이 코드는 위의 res2 를 구하는 reduce를 풀어쓴 것이다.

(같은 결과를 얻지만 reduce가 저렇게 확장된다는 뜻은 아니다! 오해 없길 바란다.)

 

acc 에는 단지 Number 만 가능한 것은 아니다.

배열에서 짝수와 홀수의 개수를 구하는 것을 reduce 를 이용해보자.  

 

 

이번에는 화살표 함수지만 내부에 문장이 여러개여서 중괄호를 사용했다.

acc 에는 짝수와 홀수의 누적된 개수를 기록하는 배열이 사용되었다.

 

눈치챌 수 있는 것은 reduce 함수는 배열의 각 원소와의 협업이 끝나면 acc 를 return 하고,

다음 단계에서 다시 그 acc 를 이용함으로써 누적된 작업의 결과를 얻게 해준다.