JavaScript 배열의 모든 값 사이에 값 삽입하기

JavaScript 배열 요소 사이에 연산자 삽입하기

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

const numbers = [1, 6, 7, 8, 3, 98];

이 숫자 배열을 객체 배열로 변환해야 합니다. 각 객체는 "value"라는 키를 가지며, 그 값은 배열 요소의 실제 값입니다. 여기에 더해, 기존 두 요소 사이마다 "operation"이라는 키를 가진 객체를 삽입하고, 그 값으로 +, -, *, / 연산자를 번갈아 가며 사용해야 합니다.

따라서 numbers 배열의 경우 최종 출력 결과는 다음과 같은 형태가 됩니다.

[
    { "value": 1 }, { "operation": "+" }, { "value": 6 }, { "operation": "-" },
    { "value": 7 }, { "operation": "*" }, { "value": 8 }, { "operation": "/" },
    { "value": 3 }, { "operation": "+" }, { "value": 98 }
]

문제 해결 접근 방식

이 문제는 배열의 reduce() 메서드를 활용하면 깔끔하게 해결할 수 있습니다. reduce를 사용하면 각 요소를 순회하면서 누적 배열(acc)에 value 객체와 operation 객체를 번갈아 추가하는 로직을 자연스럽게 구현할 수 있습니다.

연산자는 문자열 '+-*/'에서 인덱스를 4로 나눈 나머지(모듈로 연산)를 이용해 순환적으로 선택합니다. 또한 마지막 요소 뒤에는 연산자를 삽입하지 않도록 조건 처리가 필요합니다.

예제 코드

const numbers = [1, 6, 7, 8, 3, 98, 3, 54, 32];
const insertOperation = (arr) => {
    const legend = '+-*/';
    return arr.reduce((acc, val, ind, array) => {
        acc.push({
            "value": val
        });
        if(ind < array.length - 1){
            acc.push({
                "operation": legend[ind % 4]
            });
        };
        return acc;
    }, []);
};
console.log(insertOperation(numbers));

코드 설명

legend 변수에는 네 가지 연산자 '+', '-', '*', '/'가 순서대로 담겨 있습니다. reduce 콜백 함수 내부에서 현재 값을 value 키와 함께 누적 배열에 push한 후, 현재 인덱스(ind)가 마지막 인덱스보다 작은 경우에만 operation 객체를 추가합니다. ind % 4 계산을 통해 연산자가 +, -, *, / 순서로 무한히 반복됩니다.

출력 결과

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

[
    { value: 1 }, { operation: '+' },
    { value: 6 }, { operation: '-' },
    { value: 7 }, { operation: '*' },
    { value: 8 }, { operation: '/' },
    { value: 3 }, { operation: '+' },
    { value: 98 }, { operation: '-' },
    { value: 3 }, { operation: '*' },
    { value: 54 }, { operation: '/' },
    { value: 32 }
]

마무리

이처럼 reduce 메서드와 모듈로 연산을 조합하면, 배열의 모든 요소 사이에 특정 규칙에 따른 값을 손쉽게 삽입할 수 있습니다. 이 패턴은 수식 문자열 생성, 데이터 시각화용 구조 변환 등 다양한 상황에서 유용하게 활용될 수 있습니다.