자바스크립트 배열 내장함수 forEach, map, reduce

for

배열 내장함수는 아니지만 반복문을 이용하여 배열에 접근하는 가장 쉬운 방법입니다.

제곱근을 구하는 함수를 for, forEach, map 배열 함수를 이용하여 작성하여 각자 코드를 비교해 보겠습니다.

const arr = [1, 2, 3, 4, 5, 6, 7, 8];
const squared = [];

for (let i = 0; i < arr.length; i++) {
	squared.push(arr[i] * arr[i]);
}

 

forEach

for와 코드 라인 수는 같지만 for는 반복문을 돌리기 위해 임시 변수 i를 할당했습니다. 지금처럼 테스트하는 경우엔 문제가 되지 않지만, 코드의 양이 많아지는 큰 프로젝트에는 가독성을 떨어 뜨립니다. 또한 forEach는 콜백 함수의 첫번째 인자로 각 값(n)이 들어 옵니다. 이 덕분에 더 깔끔하고 가독성있게 각 요소의 값을 얻을 수 있습니다.

const arr = [1, 2, 3, 4, 5, 6, 7, 8];
const squared = [];

arr.forEach(n => {
  squared.push(n * n);
})

 

map

forEach와 같이 배열을 순회하며 인자를 전달 받습니다. 그러나 forEach와 다른 점은 map은 전달받은 배열을 수정되었거나 새로운 배열로 리턴합니다. 리턴된 배열은 원래 배열의 길이가 같습니다. 

즉, forEach는 원래의 배열에 영향을 주고, map은 새로운 배열을 반환하므로 원래 배열은 건드리지 않습니다.

원래 배열의 값을 활용해서 값을 구하거나, 배열의 길이가 같지 않아도 된다면 forEach, 원래 배열과 길이도 같고 새로운 배열을 받고자 한다면 map을 목적에 맞게 사용하면 됩니다.

1. map을 이용한 코드

const arr = [1, 2, 3, 4, 5, 6, 7, 8];
const square = n => n * n;
const squared = arr.map(square);

2. 1번 코드 단축

const arr = [1, 2, 3, 4, 5, 6, 7, 8];
const squared = arr.map(n => n * n);

 

filter

특정 조건을 만족하는 원소들을 찾아서 그 원소들을 가지고 새로운 배열을 만듭니다. 아래는 done의 상태 값이 false인 경우를 찾는 조건을 작성했습니다.

const todos = [
  { id: 1, text: '자바스크립트 입문', done: true, },
  { id: 2, text: '함수 배우기', done: true, },
  { id: 3, text: '객체와 배열 배우기', done: true, },
  { id: 4, text: '배열 내장함수 배우기', done: false, },
]

const tasksNotDone = todos.filter(todo => !todo.done);
console.log(tasksNotDone);  // [ { id: 4, text: '배열 내장함수 배우기', done: false } ]

 

splice

배열을 자르는 것을 의미합니다. 

const numbers = [10, 20, 30, 40];
const index = numbers.indexOf(30); // index = 2
const spliced = numbers.splice(index, 2); // index부터 시작해서 2개를 지운다.

console.log(spliced); // [30, 40]
console.log(numbers); // [10, 20]

 

slice

Splice와 Slice는 index를 이용해 배열을 자르는 공통점이 있지만, 기존의 배열을 수정하느냐 아니냐의 차이점이 있습니다.

Slice는 자른 후에도 기존 배열이 변하지 않습니다.

const numbers = [10, 20, 30, 40];
const sliced = numbers.slice(0, 2); // index 0번째부터 부터 시작해서 2번째 전까지 자르기

console.log(sliced); // [10, 20]
console.log(numbers); // [10, 20, 30, 40]

 

shift / unshift

제 생일을 이용해서 배열을 작성했습니다. shift를 하면 왼쪽에서 부터 값이 삭제됩니다.

계속 shift를 반복하면 birth의 배열엔 아무런 원소도 남지 않습니다.

unshift는 반대로 배열을 왼쪽에서부터 추가합니다. 

const birth = [0, 4, 1, 7];
const value = birth.shift();

console.log(value); // 0
console.log(birth); // [4, 1, 7]

 

pop / push

pop은 오른쪽에서부터 값을 삭제합니다. push는 오른쪽에서부터 값을 추가합니다.

const birth = [0, 4, 1, 7];
const value = birth.pop();

console.log(value); // 7
console.log(birth); // [0, 4, 1]

 

concat

배열과 배열을 합쳐줍니다. 기존의 배열은 건드리지 않으므로 arr1, arr2 배열은 수정되지 않습니다.

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const concated = arr1.concat(arr2);

console.log(concated); // [1, 2, 3, 4, 5, 6]

arr1.concat(arr2)를 하지 않고도 배열을 합칠 수 있는 방법도 있습니다. 이를 스프레드 연산자라고 합니다.

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const concated = [...arr1, ...arr2];

 

join

배열 안의 모든 요소를 문자로 만듭니다.

join(''); 인 경우에는 구분하는 쉼표, 공백없이 123으로 반환되고 join(', '); 일 경우에는 1, 2, 3 으로 공백과 쉼표가 들어갑니다.

const array = [1, 2, 3];
const joined = array.join(''); 

console.log(joined); // 123

 

reduce

무궁무진한 배열 함수의 끝에는 reduce가 있습니다. reduce는 forEach같은 배열 함수와는 사용법이 약간 다릅니다.

accumulator (이하 acc), current같은 인자를 주입하여 함수를 작성합니다. 

배열의 총합을 구하는 예제로 확인해 보겠습니다.

const numbers = [1, 2, 3, 4, 5];

numbers.forEach(n => {
	sum += n;
});

console.log(sum) // 15

forEach는 3줄의 코드 라인이지만 reduce를 사용한다면 한 줄로 작성할 수 있습니다.

const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce((accumulator, current) => accumulator + current, 0);

console.log(sum) // 15

acc 인자는 return값이 누적되고, 뒤에 0은 초기값을 의미합니다. current는 반복되며 순차적으로 numbers 배열의 원소들이 들어갑니다.

 

또한 reduce를 이용해 평균값도 구할 수 있습니다.

const numbers = [1, 2, 3, 4, 5];

const avg = numbers.reduce((acc, current, index, array) => {
  if (index === array.length - 1) {
    return (acc + current) / array.length;
  } 
  return acc + current;
}, 0);

console.log(avg);

acc, current말고도 index, array 인자도 더 받아올 수 있습니다. 

index는 각 원소가 몇 번째인 지를 알려주고 array는 배열 자기 자신을 의미합니다. 

index === array.length -1 조건은 index값이 배열의 마지막일 때 총 합계의 평균을 반환하게끔 하는 의미입니다.

reduce 함수는 숫자들을 계산하는 것외에도 활용할 수 있습니다. 다음에 reduce에 관한 예제를 더 공부해서 올려 보겠습니다.

 

---

참고

Array - JavaScript | MDN

패스트 캠퍼스 - JavaScript 입문 배열 내장함수