✍️ TIL 10 ㆍJavascript 배열 내장함수 3

1. concat
2. join
3. reduce

1. concat

concat은 여러 개의 배열을 하나로 합쳐주는 함수이다.

배열 arr1 과 arr2 를 하나의 배열 array 로 합치기

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

const array = arr1.concat(arr2);

console.log(array);

결과 [1, 2, 3, 2, 4, 8]

2. join

join은 배열 안의 값들을 문자열 형태로 합쳐주는 함수이다.

const array = [1, 2, 3, 2, 4, 8];

console.log(array.join()); // 1,2,3,2,4,8
console.log(array.join(' ')); // 1 2 3 2 4 8
console.log(array.join(', ')); // 1, 2, 3, 2, 4, 8

결과 1,2,3,2,4,8
1 2 3 2 4 8
1, 2, 3, 2, 4, 8

3. reduce

reduce는 주어진 배열에 대한 총합 혹은 평균 등을 구할 때 유용한 함수

배열의 총합 구하기

앞서 배운 forEach 함수를 이용해 구해보면,

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

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

결과 15

이것이 틀린 방법은 아니다. 하지만 reduce를 사용하면 코드가 훨씬 간결해진다.

const numbers = [1, 2, 3, 4, 5];
let sum = array.reduce((accumulator, current) => accumulator + current, 0);

console.log(sum);

결과는 같다.

reduce 함수는 두 개의 파라미터를 전달하는데 첫 번째는 accumulator와 current를 파라미터로 가져와서 결과를 반환하는 콜백함수를, 두 번째는 초기값을 뜻한다.
여기서 accumulator는 누적된 값이고 current는 현재값을 말한다.

과정을 살펴보면,
1. acc는 초기값 0, cur는 1이 들어온다.
2. acc는 acc+cur이므로 1, cur = 2
3. acc = 1 + 2 = 3, cur = 3
4. acc = 3 + 3 = 6, cur = 4
5. acc = 6 + 4 = 10, cur = 5
6. acc = 10 + 5 = 15
7. sum에 15를 반환.

배열의 평균 구하기

더 나아가 평균 = 총합 / 원소의 개수를 통해 평균을 구해보면,

const numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce((accumulator, current, index, array) => {
  if (index === array.length - 1) { // 배열의 마지막 원소인가?
    return (accumulator + current) / array.length;
  }
  return accumulator + current;
}, 0);

console.log(sum);

결과 3

평균을 구하기 위해 추가 파라미터인 index와 array를 받아왔다.
여기서 index는 현재 처리하고 있는 항목의 번호를,
array는 현재 처리하고 있는 배열 자신을 의미한다.