JavaScript로 배열 끝에 각 요소의 제곱값 추가하기

다음과 같은 숫자 배열이 있다고 가정해 보겠습니다.

const arr = [12, 19, 5, 7, 9, 11, 21, 4];

이 배열을 입력받아, 원본 배열의 모든 요소 뒤에 각 요소의 제곱값을 이어 붙인 새로운 배열을 반환하는 함수를 작성해야 합니다.

즉, 결과 배열은 원본 요소들과 그 제곱값들이 순서대로 나열된 형태가 됩니다. 위 예시 배열의 경우 기대되는 출력 결과는 다음과 같습니다.

[12, 19, 5, 7, 9, 11, 21, 4, 144, 361, 25, 49, 81, 121, 441, 16]

예제 코드

이 문제는 Array.prototype.reduce() 메서드를 활용하면 간결하게 해결할 수 있습니다. 초기값으로 원본 배열 자체를 전달하고, 반복 과정에서 각 요소의 제곱값을 계속 이어 붙이는 방식입니다.

const arr = [12, 19, 5, 7, 9, 11, 21, 4];
const multiplyArray = (arr) => {
    return arr.reduce((acc, val) => {
        return acc.concat(val * val);
    }, arr);
};
console.log(multiplyArray(arr));

출력 결과

콘솔에 출력되는 결과는 다음과 같습니다.

[
    12, 19, 5, 7, 9, 11,
    21, 4, 144, 361, 25, 49,
    81, 121, 441, 16
]

동작 원리

reduce() 메서드는 두 개의 인수를 받습니다. 첫 번째는 각 요소를 순회하며 실행할 콜백 함수이고, 두 번째는 누산기(acc)의 초기값입니다. 여기서는 초기값으로 원본 배열 arr을 그대로 사용했기 때문에, 순회가 시작될 때 누산기에는 이미 원본 요소들이 들어 있습니다.

이후 콜백 함수가 각 요소(val)를 만날 때마다 val * val, 즉 제곱값을 계산하고 concat()으로 누산기 배열 뒤에 추가합니다. 모든 요소에 대한 순회가 끝나면, 원본 요소와 제곱값이 모두 포함된 새로운 배열이 최종적으로 반환됩니다.

참고로 concat() 대신 스프레드 연산자를 사용하면 성능 면에서 더 유리하게 구현할 수도 있습니다.

const multiplyArray = (arr) =>
    arr.reduce((acc, val) => [...acc, val * val], arr);