ES6에서 배열을 활용하는 다양한 방법

기존의 forEach()

배열 전체를 돌며 해당 배열의 요소에 어떠한 작업을 수행할 수 있는 메소드이다.

사용법

arr.forEach((element, index, arr) => { 작업 });
(return은 undefined)

예시

let arr = [1, 2, 3];
let arr2 = [];
arr.forEach((element, index, arr) => {
  console.log('현재 값은 ' + element + '이며, 인덱스는 ' + index + '입니다.'); // A
  arr2.push(element * index); // B
  element *= 2;
  /*
  현재 값은 1이며, 인덱스는 0입니다.
  현재 값은 2이며, 인덱스는 1입니다.
  현재 값은 3이며, 인덱스는 2입니다.
  */
}, []);
console.log(arr); // [ 1, 2, 3 ]
console.log(arr2); // [ 0, 4, 12 ]

A와 B와 같이 배열의 원소들을 이용해 다양한 작업을 할 수 있다.

눈여겨볼 점은 콜백 내부에서 element *= 2를 해줬음에도 불구하고, 기존 배열의 값은 변하지 않았음을 알 수 있다. 즉, 기존의 값은 변경시키지 않는 메소드이다. (immutable)

콜백 내부에서 element, index, arr를 이용하여 아래에서 소개할 filter(), map(), find(), reduce()와 같은 기능들을 구현할 수 있다. 그러나 매번 이를 구현하기는 매우 귀찮으므로, ES6에서는 아래와 같은 훌륭한 메소드들을 제공한다.

filter()

기존의 배열에서 조건에 맞는 원소만 뽑아 새로운 배열을 만들어 리턴한다.

사용법

arr.filter((element, index, arr) => { return (condition) });

예시

let arr = [1, 2, 3, 4, 5, 6];
let arr2 = arr.filter((i) => i % 2 === 0);
console.log(arr[1] === arr2[0]); // true

첫 번째 출력 : arr에 있는 원소와 같은 원소임을 알 수 있음.

find()

찾으려는 값을 리턴한다. 여러 개가 있을 경우 처음 값만 리턴한다.

사용법

arr.find((element, index, arr) => { return (condition) });

예시

let arr = [1, 2, 3, 4, 5, 6];
let value = arr.find((i) => i % 2 === 0;
console.log(value); // 2
console.log(arr[1] === value); // true

첫 번째 출력 : arr의 여러 2의 배수인 원소들 중 첫 번째 원소만 리턴됨.
두 번째 출력 : arr[1](2)와 value(2)는 같은 원소임을 알 수 있음.

map()

반복문을 돌면서 배열의 요소 각각에 대해 인자로 넘겨준 콜백 함수를 적용시킨다(매핑한다).

사용법

arr.map((element, index, arr) => { return (new element) });

예시

let arr = [1, 2, 3, 4, 5, 6];
let arr2 = arr.map((i) => i * 2);
console.log(arr); // [1, 2, 3, 4, 5, 6]
console.log(arr2); // [2, 4, 6, 8, 10, 12]

첫 번째 출력 : arr의 원소들의 값은 변하지 않았다. 즉, map은 immutable한 메소드이다.
두 번째 출력 : arr2의 원소들은 arr의 각각의 원소 i에 대해 i * 2한 것이다.

reduce()

뭔가 말로 설명하기가 굉장히 애매한 메소드.. 이지만, 굉장히 많은 곳에서 사용된다. 예시를 통해 체득하자.

사용법

arr.reduce(
    (accumulator(누적값), currentValue(현재값), index, arr) => {
        return (new element)
    }, 초기값);

초기값 1을 부여했을 때

let arr = [1, 2, 3, 4, 5, 6];
let arr2 = arr.reduce((acc, cur, i) => {
  console.log(acc, cur, i);
  return acc + cur;
  /*
  1 1 0
  2 2 1
  4 3 2
  */
}, 1);
console.log(arr2); // 7

초기값으로 1을 주고, reducing을 진행한 결과이다. 콜백 내부의 출력을 통해 알 수 있듯이, 1을 초기값으로 Accumulating이 진행되는 모습을 볼 수 있다.

초기값이 없을 때

let arr = [1, 2, 3, 4, 5, 6];
let arr2 = arr.reduce((acc, cur, i) => {
  console.log(acc, cur, i);
  return acc + cur;
  /*
  1 2 1
  3 3 2
  */
});
console.log(arr2); // 6

초기값을 주지 않으면 기본적으로 0이 초기값이다. 이 경우, 콜백 내부의 출력에서는 초기값의 Accumulating 과정은 없으므로 출력되지 않는다.

reduce() 콜백 내부에서의 출력을 보면 다음 acc의 값이 현재 acc의 값과 cur이 더해져 갱신되는 것을 볼 수 있다.

활용 예시

let arr = [1, 2, 3];
let arr2 = arr.reduce((acc, cur, i) => {
  console.log(acc, cur);
  acc.push(cur % 2 ? 'Odd Number' : 'Even Number');
  return acc;
  /*
  [] 1
  [ 'Odd Number' ] 2
  [ 'Odd Number', 'Even Number' ] 3
  */
}, []);
console.log(arr2); // [ 'Odd Number', 'Even Number', 'Odd Number' ]

초기값을 빈 배열로 할당해준 후, 배열의 원소가 짝수인지, 홀수인지 판단하여 acc의 배열에 push() 해주는 콜백을 받는 reduce()이다. 이 로직은 똑같이 map()으로도 구현할 수 있다.

콜백 내부의 출력의 양상을 보자.
첫 번째 출력에서 acc는 빈 배열, cur는 1이다. cur이 1이고, 1은 홀수이므로, 다음 acc는 Odd Number라는 문자 1개가 들어 있는 배열이다.

이렇게 reducer()는 acc를 계속 cur의 값에 대해 갱신(누적)시켜 리턴해주는 메소드이다.