JavaScript 입문 : reduce( ) 메소드

 

자바스크립트에서 많이 사용하는 Method 중 알면 좋은 reduce(  ) 메소드가 있습니다. 보통 일반적으로 평군값을 구한다던지 할 때 주로 이 메소드를 활용하는데 어떤 기능이 있는지 정리해 보도록 하겠습니다.

 

1. 정의 

 

reduce라고 해서 '무엇을 줄이지?'하는 생각이 먼저 드는 것은 사실인데 줄여서 평균값을 구하는 느낌이 들지 않더군요. 자바스크립트상 정의를 찾아봐도 배열의 각 주어진 reduce 함수를 실행하여 하나의 결과값을 반환한다고 되어 있는데 이런 정의는 머리속에 들어오지 않습니다. 

 

예제 등을 보고나서 이해를 해야 좀 더 기억에 남을 듯 합니다. 

 

제가 생각하는 정의는 reduce라는 단어를 쓴 이유로 부터 출발해야 할 듯 합니다. format이야 머리속에 기억할 수 밖에 없구요. 두개의 인자를 사용하면서 프로그램상 계산식을 줄여 최종 하나의 반환값을 나타내는 메소드라고 일단 정의해 놓고 공부를 해 보도혹 하겠습니다.

 

2. 기본 포맷

 

reduce 메소드의 기본형태는 다음과 같이 사용합니다. 

 

 

여기서 acc는 accumulate (누적)을 나타내고 cur 은 current value (현재값)을 나타냅니다. 다음과 같이 줄일 수 있습니다. 

 

 

함수에서 중괄호와 return은 생략할 수 있습니다. 

 

 

여기서 initValue는 초기값이라는 개념으로 일부러 영어로 써 놓았는데 직접 입력해 놓던지 아니면 입력을 해놓지 않으면 배열의 첫번째 인자를 받습니다. 

 

따라서 다음과 같이 기본형을 나타낼 수 있습니다. 

 

 

따라서 상기 내용은 배열의 처음부터 끝까지 누적해서 더하라는 reduce함수인 겁니다. 초기값은 배열의 첫번째 수이고요. 이러한 형식으로 내용을 줄여서 만들었다고 해서 reduce라고 쓰나봅니다.

 

a, c대신 d, f등 어떤 것을 써도 무방합니다만, 기왕이면 a, c를 쓰는게 이해가 쉬울 듯 합니다. 

 

3. reduce(  ) 메소드 예

 

① 덧셈

 

실제 배열 [0, 1, 2, 3, 4]를 가지고 다양한 예제를 보도록 하겠습니다. 

 

 

상기 예제를 보면 베열을 전부 더하는 메소드로 reduce( )를 사용하였는데 c값은 현재값으로 a에 최종 누적시키면서 덧셈을 한 예제입니다. 초기값을 쓰지 않았기 때문에 누적 a값으로 시작됩니다.  (맨 밑에 조기값이 없을 경우 외워야 되는 포인트를 정리하겠습니다. ) 

 

다음처럼 0을 초기값으로 하면 결과가 같지만 인위적으로 하면 달라집니다.  

 

그렇다면 인위적으로 초기값을 반영한다면 내용은 달라지겠죠. 

 

 

② 곱셈

 

배열을 전부 곱하는 식은 어떻게 사용할까요? 배열에서 0을 뺀 예제로 다시하면 다음과 같이 나오겠죠.

 

 

 

③ 평균

 

배렬 [1, 2, 3, 4]의 평균을 구해보도록 하겠습니다. 평균은 각각 더한 값에 총 길이로 나누어주면 됩니다. 

 

 

여기서 4는 배열의 총길이(length)를 의미하겠죠.

 

 

※ 초기값을 정해주지 않을때

 

다시한번 외워야 하는 포인트는 초기값을 정해주지 않을 경우는  배열의 첫번째 인자가 a, 두번째 인자가 c입니다. 이건 외워야겠어요.

 

덧셈을 예로 들면 다음과 같이 사용하면 됩니다. 

 

 

이외에 배열을 객체로 바꿀수 있는데 이 부분은 reduce( )메소드의 기본을 이해한 후 별도 공부하는게 낫다고 판단되네요. 

 

강좌에 따르면 reduce( )메소드는 많은 함수를 구현할 때 사용가능한 강력한 툴이라고 하네요. 고급 정도가 되면 많이 사용한다고 하니 단어라도 일단 기억해 두는 센스가 필요하네요.