JavaScript에서 문자열을 합치지 않고 숫자 계산을 수행하도록 만드는 방법

문자열 배열의 요소를 실제 숫자처럼 합산하기

다음과 같이 숫자들이 문자열 형태로 담겨 있는 배열이 있다고 가정해 보겠습니다.

const arr = ['3', '3', '55', '23', '67', '43', '12', '67', '87', '12'];

JavaScript에서 이런 배열의 요소들을 + 연산자로 단순히 더하면, 각 값이 문자열이기 때문에 덧셈이 아니라 문자열 연결(concatenation)이 일어나게 됩니다. 따라서 우리는 이 배열을 받아 모든 요소를 하나씩 이어 붙이지 않고, 실제 숫자의 합계를 반환하는 함수를 작성해야 합니다.

해결 코드 예시

배열 메서드인 reduce()를 활용하면 깔끔하게 해결할 수 있습니다.

const arr = ['3', '3', '55', '23', '67', '43', '12', '67', '87', '12'];
const sumString = arr => {
    const num = arr.reduce((acc, val) => {
        const sum = acc + (+val || 0);
        return sum;
    }, 0);
    return num;
};
console.log(sumString(arr));

핵심: 단항 더하기(+) 연산자의 역할

위 코드에서 중요한 부분은 문자열 앞에 붙은 단항 더하기(+) 연산자입니다. 이 연산자는 해당 값을 명시적으로 String 타입에서 Number 타입으로 강제 변환(type coercion)합니다.

변환 대상 문자열이 유효한 숫자 형태라면 → 정상적인 숫자가 반환됩니다.
첫 번째 문자부터 유효한 숫자가 아니라면 → NaN(Not a Number)이 반환되며, || 0 처리를 통해 0으로 대체되어 오류 없이 합산이 계속됩니다.

이렇게 하면 문자열이 서로 붙는 현상 없이, 각 요소가 숫자로 변환된 뒤 정확한 산술 연산이 수행됩니다.

실행 결과

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