#24. 자바스크립트(javascript) - 내장함수(concat, join, reduce)

1. concat

concat은 두 배열을 합치고, 기존의 배열은 건드리지 않습니다.

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

const concated = arr1.concat(arr2);
console.log('concated: ', concated);
console.log('arr1: ', arr1);
console.log('arr2: ', arr2);

2. join

join은 배열 안에 있는 원소를 문자열로 합쳐주는 기능을 합니다.
join 함수의 파라미터는 문자열 사이에 배치됩니다.

const array = [1, 2, 3, 4, 5]
console.log('join: ', array.join());
console.log('join parameter: ', array.join(', '));

3. reduce

reduce 함수는 배열이 주어졌을 때, 배열 안의 원소를 모두 이용해 계산할 때 유용합니다.

먼저 forEach 함수를 이용해 배열 내 숫자들의 총 합을 계산해보도록 하겠습니다.

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

let sum = 0;
number.forEach(n => {
    sum += n;
});
console.log(sum);

이번에는 reduce 함수를 이용해서 계산하는 방법을 보겠습니다.

const sum = number.reduce((accumulator, current) => accumulator + current, 0);
console.log(sum);

reduce 함수 내부에 있는 함수 중 마지막에 있는 "0" 값은 초기값을 나타냅니다. "accumulator"는 처음 초기값인 "0"을 받고, 이후 누적된 값을 받습니다. "current"값은 number에서 불러온 첫번째 원소, 즉 "1"을 받습니다. 따라서 첫 회차 계산은 0 + 1, 두번째 회차는 1 + 2, 세번째 회차는 3 + 3이 됩니다.

다음으로는 reduce 함수를 이용해 배열 내부의 평균값을 구해보도록 하겠습니다.

const avg = number.reduce((accumulator, current, index, array) => {
    if (index === array.length - 1) {
        // index가 마지막 값이라면
        return (accumulator + current) / array.length; 
    }
    return accumulator + current;
}, 0);
console.log(avg);

위의 코드에서 "index"값은 배열 number에서 차례로 들어오는 "current"값의 "index"값이고, "array"는 배열 number 자기 자신을 의미합니다. 따라서 "current" 값의 index값이 배열 number의 길이에서 1을 뺀 값과 같으면 마지막으로 간주하고 값을 반환합니다. 여기서 배열 길이에서 1을 빼는 이유는 index가 0부터 시작하기 때문입니다.

이번에는 reduce 함수를 이용해 배열 내부의 값들이 각각 몇 번씩 중복되어 있는지 확인해보도록 하겠습니다.

const alphabets = ['a', 'a', 'a', 'a', 'b', 'b', 'c', 'c', 'c', 'c', 'c', 'c', 'd'];
const counts = alphabets.reduce((acc, current) => {
    if (acc[current]) {
        acc[current] += 1;
    } else {
        acc[current] = 1;
    }
    return acc;
}, {})

console.log(counts);

const x = {'a': 100}
console.log(x['a']); // 100

x['b'] = 5000;
console.log(x); // {a: 100, b: 5000}