JavaScript Array.map(Number)가 공백을 0으로 변환하는 이유와 해결 방법

자바스크립트에서 문자열의 각 문자를 숫자 배열로 바꿀 때 [...str].map(Number) 패턴을 자주 사용합니다. 그런데 다음 코드를 실행해 보면 공백 문자(" ")까지 0으로 변환되어 의도하지 않은 결과가 나오게 됩니다.

const digify = (str) => {
    const parsedStr = [...str].map(Number);
    return parsedStr;
};
console.log(digify("778 858 7577"));

출력 결과

[
  7, 7, 8, 0, 8,
  5, 8, 0, 7, 5,
  7, 7
]

문자열 안에 실제 숫자 0도 함께 포함되어 있다면, 공백에서 생긴 0과 진짜 0을 구별할 수 없어 문제가 더욱 혼란스러워집니다.

왜 공백이 0으로 변환될까?

원인은 map() 함수 내부에서 각 문자를 Number로 변환하는 과정에 있습니다. Number는 엄격한 동등 비교(===)가 아닌 추상적 동등 비교(==)의 규칙에 따라 값을 처리하기 때문에 ' ' == 0이 true로 평가되고, 그 결과 모든 공백이 0으로 변환됩니다. 실제로 ECMAScript 사양의 ToNumber 변환 규칙 역시 공백(whitespace)만 포함된 문자열을 0으로 정의하고 있습니다.

해결 방법: parseInt 사용하기

이런 예상 밖의 동작을 방지하려면 map() 콜백 안에서 parseInt를 사용하면 됩니다.

예제

const sin = (str) => {
    const parsedStr = [...str].map(i => parseInt(i, 10));
    return parsedStr;
};
console.log(sin("778 858 7577"));

parseInt는 공백 문자를 숫자로 해석하지 못하고 NaN(Not a Number)을 반환합니다. 잘못된 입력이 NaN으로 명확히 드러나기 때문에 훨씬 직관적이고 논리적인 동작이라 할 수 있습니다.

출력 결과

[
  7, 7, 8, NaN, 8,
  5, 8, NaN, 7, 5,
  7, 7
]

정리

Array.map(Number)는 공백 문자열을 조용히 0으로 바꿔 버립니다. 문자열에 공백이 섞여 있을 가능성이 있다면 parseInt(i, 10)를 사용해 NaN 여부를 확인하는 것이 훨씬 안전한 선택입니다.