배열의 함수형 메소드

학습 목표

1. 배열의 메서드들을 활용해서 데이터 처리를 할 수 있습니다.

핵심 개념

• forEach
• map
• filter
• immutable

자바스크립트는 배열을 쉽게 다루기 위해 여러가지 관련 메소드를 제공해준다. 익숙해 지게 여러번 사용해보는것이 중요하다.

for문과 forEach

위와 같은 데이터가 있을때 for문과 forEach를 각각 사용하여 접근하는 코드는 다음과 같다.

두 코드는 같은 일을 수행하는 코드지만 forEach문은 i++나 length를 판단하는 코드가 따로 없다. 그만큼 실수를 줄일 수 있고, 코드는 더 보기 좋아진다. ES6의 arrow함수를 사용한다면 더 간단해질 수 있다.

map, filter

map메서드는 함수에서 정의한 방법대로 모든 원소를 가공해서 새로운 배열을 반환한다.

filter메서드는 함수에서 정의한 조건에 맞는 원소만 추려서, 새로운 배열을 반환한다.

map과 filter를 같이 사용하면 매우 효과적이다. "숫자가 3개 이상인 데이터만, '원' 이라는 단위를 붙여서 배열 데이터로 모은다"라는 과제가 있을 경우 map과 filter의 사용으로 문제를 해결할 수 있다.

immutable

원본데이터가 변경되면, 추적하기 어렵고 왜 변경되었는지 알아내기 힘들며, 원본데이터가 필요한 경우 문제가 발생할 수 있다. 따라서 원본데이터를 유지하도록 만드는 코드는 중요하다.

위와 같은 코드는 원본데이터를 그대로 유지하면서 새로운 배열을 확인할 수 있다.

이러한 것을 immutable하다고 표현한다.

reduce

reduce는 배열의 모든 요소에 대해 지정된 콜백 함수를 호출하며, 콜백 함수의 반환 값을 누적하여 반환하는 함수이다. reduce함수의 매개변수는 콜백 함수와 누적을 시작하기 위한 초기값이며 초기값은 선택사항이다.