자바스크립트의 유용한 배열 메소드 사용하기... map(), filter(), find(), reduce()

대부분의 간단한 로직은 배열로 표현이 가능하고 반복문으로 원하는 결과를 얻을 수 있습니다.

예를들어 DB에서 읽어온 거대한 데이터 리스트를 걸러내고 걸러내어 클라이언트가 원하는 모양으로 정제하죠. 하지만 이러한 단순한 로직을 구현한 코드가 장황하고 추적하기 힘들 때가 있습니다. 반복문을 통해서 걸러내는 양이 많아지면서 코드의 가독성이 떨어지게 되면서죠.

이제 걱정마세요. 필요에 따라 Javascript가 지원하는 Array 메소드를 이용하면 더 직관적인 코드를 작성할 수 있습니다. 소개할 메소드들은 for 구문을 대체할 것입니다.

forEach는 가장 기본적인 Loop 메소드입니다.

간단한 예제(배열의 짝수만 출력하는 프로그램)를 통해서 for 구문과 비교해 봅시다.

// for 구문 버전
var arr = [3, 9, 4, 2, 7, 6];
for (var i = 0; i < arr.length; i++) {
    if (arr[i] % 2 == 0) {
        console.log(arr[i]);
    }
}

// forEach() 버전
var arr = [3, 9, 4, 2, 7, 6];
arr.forEach(function (n) {
    if (n % 2 == 0) {
        console.log(n);
    }
});

코드 라인의 수는 같습니다. 하지만 for 구문과는 다른 점을 알겠나요?

스코프를 더럽히지 않는다.
- for 구문은 배열의 인덱스를 저장하기 위한 임시 변수 i를 할당했습니다. 사실 이 프로그램은 아주 작아서 임시 변수 할당하는 것은 큰 문제가 안됩니다. 그러나 시스템이 커지고 유지보수를 해야 한다면 언제 사용한지 모르는 i 때문에 가독성이 떨어지게 됩니다.
요소 접근 방법 arr[i] vs n
- forEach의 콜백 함수의 첫 번째 인자로 각 요소의 값이 들어옵니다. 덕분에 우리는 깔끔한 방법으로 각 요소의 값을 얻을 수 있습니다.

forEach와 앞으로 소개 할 메소드는 모두 비슷한 방식으로 동작합니다.

콜백 함수를 통해 각 요소에 대한 정보를 주는 것이 전부입니다. 즉, 배열의 요소가 6개라면 콜백 함수도 6번 호출되고 인자에 각 요소의 값, 인덱스 등이 전달됩니다.

콜백 함수의 인자로부터 전달되는 정보는 다음과 같습니다: