[JavaScript-13]js에서 배열 메소드들(map, forEach, filter, reduce, some, every)이용해서 함수형 프로그래밍하기

본 강의는 자바스크립트의 기초를 대충 안다고 가정하고 시작하는 조금 심도 깊은 포스팅이다.

완전 처음부터 배우고 싶다면 다른 블로그나 책의 글을 참조하기를 바란다.

특별한 추가 설명이 없다면 nodejs가 아닌 브라우저에서 사용하는 js를 의미한다.

참고:

javascript docs

ecmascript specification

프로그래밍은 요즘 가면 갈수록 함수형이 중요해지고 있다.

함수형에 대해서 언급하기에는 시간과 여백이 부족한데 간단히 의미하면 콜백함수를 적극적으로 활용한다고 생각하면된다.

(콜백함수가 함수형이라곤 안했습니다. 태클 노노. 그냥 그렇게 생각하는게 편하다는 겁니다.)

그래서 함수형 코드들을 보면 for문 자체를 크게 사용하지 않는다.

for문을 안쓴다는 이야기는 아닌데 for문 자체가 함수형 같은 코딩을 하는데는 적합한 느낌을 주진 않는다.

그래서 함수형 코드를 짤 때는 배열을 사용할 때 단순 for문을 돌리기 보단 배열내의 반복 메소드들에 함수를 인자로 넘겨서 사용하는 경향이 있다.

아... 이런거 좀 조심히 말해야되는데... 필자는 그런스타일 아니라서 그냥 할말하겠다. 나중에 틀리면 돌댕이 맞지 뭐.

반복메소드는 총 6가지가 있다. forEach, map, reduce, filter, some ,every가 있다.

간단히 의미를 알아보도록 하면 아래와 같다.

forEach - 배열 원소들을 반복하면서 액션(함수)을 취한다. 가장 단순하다.

의미 : 단순 반복 값을 리턴하지 않기 때문에 그냥 정말 단순 반복에 쓰는데 내부에서 배열을 만드는 것도 가능은하다.

단 배열 만들 때는 보통은 map을 사용한다.

 

map - 배열 원소들을 반복하면서 값을 변경(함수로)해서 리턴한다. 즉 새로운 배열이 탄생한다.

의미 : 반복하면서 결과를 배열로 반환한다. 보통 배열 전체의 값을 변경할 때 사용한다.

filter - 배열 원소들을 반복하면서 조건(함수)에 true면 원소를 남기고 false면 없애버린다. 이것도 새로운 배열이 탄생한다.

의미 : 배열 값들 중에 의미 없는 값들을 버릴 때 사용한다. 그냥 필터 건다고 생각면 편하다.

reduce - 배열 원소들을 반복하면서 값들을 조합(함수로)해서 특정 값을 만든다. 배열이 아니라 특정 값으로 반환된다.(물론 배열로 만들수도 있다.)

의미 : 보통 배열값들을 이용해서 하나의 결과를 낼 때 사용한다. 모두 더한다던지 아니면 평균을 낸다던지.

some - 배열 원소들을 반복하면서 특정 원소가 조건(함수)에서 true가 나온다면 즉시 반복을 종료하고 true를 반환한다. 아니면 false를 반환한다.

의미 : 보통 배열에서 특정 값이 있는지 확인하려고 사용한다. 아니면 반복을 특정 상황에서 멈추는 for문을 만드려고 할 때 사용한다.

굉장히 유용한데 그 이유는 다른 반복들과는 다르게 break가 가능하기 때문이다.

every - 배열 원소들을 반복하면서 모든 원소가 조건(함수)에서 true가 나온다면 true를 반환하고 하나라도 false가 나오면 반복을 멈추고 false를 반환한다.

의미 : 배열이 모든 조건을 만족하는지 확인하려고 사용한다. every역시 some처럼 break가 가능은 한데 보통 그런 목적이면 some으로도 가능하다.

실제로 코드에서 for문을 사용하는건 미관상 좋지는 않다.(사실 이게 좀 중요하긴 하다. 감성이 중요하니까.)

그리고 당연하지만 콜백함수를 사용하니까 재사용성과 사이드이펙트를 피할수 있는 함수형 특유의 장점 역시 가지고 있다.

이제 하나씩 예제로 보고 잘 사용해보도록 하자.

forEach

forEach는 단순 반복을 나타낸다. 그래서 거의 단순 for문을 대체하는 용도로 사용되는 경향이 있다.

const arr = [2, 4, 6, 8, 10, 12, 14, 22, 99, 100];

arr.forEach((value, key) => {
    console.log(`${value} : ${key}`)
});

이 코드는 배열 원소를 돌면서 인덱스 번호와 값을 출력하는 예제이다.

2 : 0
4 : 1
6 : 2
8 : 3
10 : 4
12 : 5
14 : 6
22 : 7
99 : 8
100 : 9

결과는 여러분이 예상한것 처럼 위처럼된다.

const arr = [2, 4, 6, 8, 10, 12, 14, 22, 99, 100];

const printArr = (value, key) => {
    console.log(`${value} : ${key}`)
};

arr.forEach(printArr);

콜백함수기 때문에 위처럼 사용할 수 있게 된다.

map

map은 여러분이 배열을 돌면서 그로 인하여 새로운 배열을 만들고자 할 때 사용한다.

단 배열 자체를 바꾸지는 않고 바뀐 배열을 새로 리턴하게된다.

foreach랑 매우 비슷하게 사용할 수 있지만 보통 역활이 구분되는편이다.

배열을 새로만든다면 map, 그냥 반복만 한다면 foreach로.

let arr = [2, 4, 6, 8, 10, 12, 14, 22, 99, 100];
let newArr = arr.map((value,key)=> value+key);

console.log(arr);
console.log(newArr);

사용하는 방식은 위처럼 사용한다.

arr자체가 바뀌지는 않고 새로운 배열이 생성되므로 사용하려면 값을 붙혀줘야한다.

[ 2, 4, 6, 8, 10, 12, 14, 22, 99, 100 ]
[ 2, 5, 8, 11, 14, 17, 20, 29, 107, 109 ]

배열을 가공해서 새 배열을 만드는 경우가 많기 때문에 이 메소드도 아주 자주 사용된다.

filter

특정 배열에서 어느 값만 남기고 싶을 때 사용하는 메소드이다.

숫자만 들어있는 배열에서 홀수만 남긴다던지, 문자열만 있는 배열에서 길이가 n이하만 남긴다든지.

여튼 익숙해지면 굉장히 유용하게 사용할 수 있는 메소드이다.

let arr = [2, 4, 6, 8, 10, 12, 14, 22, 99, 100];
let newArr = arr.filter((value) => value % 3 === 0);

console.log(arr);
console.log(newArr);

위의 코드는 필터를 사용하는 전형적인 예시 중 하나인데

이 메소드도 map처럼 새로운 결과를 반환한다.

[ 2, 4, 6, 8, 10, 12, 14, 22, 99, 100 ]
[ 6, 12, 99 ]

위의 함수의 결과로 3의 약수만 남게 되었다.

reduce

사실 이 메소드도 엄청 유용하게 사용할 수 있다. 보통 인터넷 예제에서는 더하는 예제로만 많이 쓰던데

당연히 평균, 최빈값, 최대값 등을 구할 때도 아주 유용하다.

let arr = [2, 4, 6, 8, 10, 12, 14, 22, 99, 100];
let result = arr.reduce((acc, value, key) => {
    let val = acc + value;
    if (key === arr.length - 1) {
        val = val / arr.length;
    }
    return val; //다음 반복의 acc의 값으로 들어간다.
}, 0);

console.log(result);

위는 평균을 구하는 예제이다.

여기서 주의해야할 점은 콜백함수의 return은 다음번 acc의 값으로 들어간다는 것이다. 주의해야한다.

some

특정 배열을 순회하면서 값이 있는지를 찾고 싶을 때 사용한다. 이녀석도 엄청 유용하게 사용할 수 있다.

보통 2가지의 의미로 사용되는 경향이 있다.

1.정말 특정 원소가 존재하는지 찾고 싶을 때 사용.

2.for문을 쓰는데 특정 상황에서 break를 하고 싶을 때.

둘 다 한번 보도록 하자.

let arr = [2, 4, 6, 8, 10, 12, 14, 22, 99, 100];
let choose12 = arr.some((value) => {
    if (value === 12) {
        return true;
    }
});

console.log(choose12);

1번의 예제인데. 

12를 찾으면 return 하게 되있다.

결과는 당연히 true가 나오게된다.

let arr = [2, 4, 6, 8, 10, 12, 14, 22, 99, 100];
let choose12 = arr.some((value) => {
    console.log(value);
    if (value === 12) {
        return true;
    }
});

console.log(choose12);

some을 시행하는 과정을 보면 2번이 왜 가능한지 알 수 있다.

2
4
6
8
10
12
true

모든 반복을 다 도는게 아니라 필요한 순간 반복을 정지한다.

그래서 여러분이 for문에 break를 주고싶다면 이 방법을 사용하면 된다.

every

마지막 녀석인 every이다. 이 녀석은 some의 반대개념인데 every는 모두 다 통과해야한다.

즉 모든 원소가 해당조건을 만족하느냐를 알 수 있다.

let arr = [2, 4, 6, 8, 10, 12, 14, 22, 99, 100];
let isEven = arr.every((value) => {
    console.log(value);
    if (value % 2 === 0) {
        return true;
    }
});

console.log(isEven);

이 코드의 사용법도 some과 유사하다.

2
4
6
8
10
12
14
22
99
false

some처럼 조건에 안맞는 녀석을 찾았을시 반복을 멈추는 break효과가 있다.