빈칸이 0이 되는 순간: JavaScript Number 변환 전 구분할 것

Number("")와 Number(" ")는 둘 다 0이 됩니다. 입력하지 않은 문자열과 정상 값 "0"을 구분해야 한다면, 숫자로 바꾸기 전에 공백을 걷어낸 문자열이 비어 있는지 먼저 확인하세요.

AI가 만든 JavaScript 코드에서 ‘수량을 입력하지 않았는데 0으로 처리된다’면, 기본값을 고르기 전의 변환 과정을 보세요. Number가 반환한 0만으로는 원래 입력이 빈 문자열이었는지 "0"이었는지 알 수 없습니다.

빈 문자열도 숫자 0으로 바뀌는 변환을 표현한 생성 일러스트입니다. 실제 측정 장면은 아닙니다.

서로 다른 세 문자열이 모두 0이 됩니다

다음은 실제 폼이 아니라 짧은 합성 문자열 세 개입니다.

console.log(Number(""));    // 0
console.log(Number("   ")); // 0
console.log(Number("0"));   // 0

첫 줄은 길이가 0인 빈 문자열, 두 번째는 공백만 있는 문자열, 세 번째는 숫자 글자 0이 들어 있는 문자열입니다. 변환 전에는 다르지만 Number의 반환값은 모두 0입니다.

MDN의 Number 형 변환 설명은 빈 문자열이나 공백만 있는 문자열을 0으로 바꾼다고 명시합니다. 변환이 잘못 작동한 것이 아니라, Number가 정한 변환 규칙입니다.

다른 문자열이 같은 숫자 0으로 변환되는 개념을 표현한 생성 그림입니다. 실제 실행 화면은 아닙니다.

비어 있는지 먼저 보고, 그다음 숫자의 조건을 검사합니다

예를 들어 문자열을 Number로 바꾼 값이 ‘0 이상인 안전한 정수’인지 확인한다고 정해 보겠습니다. 여기서는 0도 정상 수량이며, 빈 문자열은 미입력으로 구분합니다. 상품이나 서비스 전체의 입력 검증을 대신하는 코드는 아닙니다.

function parseCount(raw) {
  if (typeof raw !== "string") {
    return { ok: false, reason: "type" };
  }
  const text = raw.trim();
  if (text === "") {
    return { ok: false, reason: "empty" };
  }
  const value = Number(text);
  if (!Number.isSafeInteger(value) || value < 0) {
    return { ok: false, reason: "range-or-format" };
  }
  return { ok: true, value };
}

for (const raw of ["", "   ", "0", " 2 ", "12px", "-1", "1.5"]) {
  console.log(JSON.stringify({ raw, result: parseCount(raw) }));
}

이 예제의 결과를 나누면 다음과 같습니다.

• 빈 문자열과 공백만 있는 문자열: reason이 "empty"인 실패 결과입니다.
• "0"과 " 2 ": 각각 value가 0과 2인 성공 결과입니다.
• "12px", "-1", "1.5": 이 예제에서 정한 ‘0 이상 안전한 정수’ 조건을 통과하지 못합니다.

빈 문자열을 검사하는 줄이 Number 호출보다 앞에 있습니다. 정상 값 "0"은 비어 있지 않으므로 그대로 숫자 0이 됩니다. 숫자로 바꾼 뒤 value가 falsy인지만 검사하면, 정상 0까지 거부할 수 있으므로 이 예제는 그렇게 판단하지 않습니다.

Number.isSafeInteger는 주어진 값이 안전한 정수인지 검사합니다. 이 검사만으로 ‘사용자가 입력했다’는 사실이나 업무상 허용되는 수량까지 정해지지는 않습니다. 위 코드에서는 빈값 여부와 음수 금지를 별도로 확인합니다. 검사 대상은 Number로 바꾼 뒤의 값이며, 원래 문자열의 표기나 정밀도 손실까지 검사하는 완성형 검증기는 아닙니다.

빈 문자열과 정상 0을 구분하는 흐름을 표현한 생성 일러스트입니다. 완성된 폼 검증 UI가 아닙니다.

parseInt로 바꾸면 빈값 문제가 모두 해결될까요?

parseInt는 문자열 앞부분을 정수로 읽을 수 있습니다. 빈 문자열을 NaN으로 만든다는 차이만 보고 Number 대신 무조건 바꾸면 다른 입력이 통과할 수 있습니다.

console.log(parseInt("12px", 10)); // 12
console.log(Number("12px"));      // NaN
console.log(Number("0x10"));      // 16
console.log(Number("1e2"));       // 100

MDN의 parseInt 설명은 지정한 진법에서 숫자로 읽을 수 없는 문자를 만나면 그 앞까지 해석하는 동작을 설명합니다. 12px를 잘못된 수량으로 거부해야 한다면, parseInt의 12라는 결과만으로는 원하는 검사가 되지 않습니다.

반대로 위의 parseCount도 ‘0부터 9까지의 글자만 허용하는 검사’는 아닙니다. Number가 해석하는 16진수 문자열 "0x10"과 지수 표기 "1e2"는 각각 16과 100이 되고, 이 함수의 수치 조건을 통과합니다. 숫자 글자만 허용할지, 부호나 지수 표기도 받을지는 별도의 입력 규칙으로 정해야 합니다. 이 글은 그 규칙까지 만든 완성형 검증기를 제시하지 않습니다.

AI에게는 ‘숫자로 바꿔줘’보다 허용할 입력을 알려주세요

이 예제의 요구라면 ‘문자열만 받아서 빈 문자열과 공백은 미입력으로 처리하고, 0은 유지해 줘. 결과는 0 이상 안전한 정수여야 해. 16진수와 지수 표기를 허용할지도 따로 설명해 줘’처럼 조건을 나눌 수 있습니다. 설명용 요청문이므로 생성된 코드는 같은 입력과 기대 결과로 다시 확인해야 합니다.

이미 숫자 0이 만들어진 뒤 기본값 때문에 바뀐다면 변환과는 다른 문제입니다. 0을 ||와 ??로 처리했을 때의 차이에서 이어서 구분할 수 있습니다. 먼저 원래 입력이 문자열이었는지, 어느 줄에서 숫자로 바뀌었는지부터 나눠 보세요.

출처 및 확인일

• MDN Web Docs, Number. 게시·수정일 미표기.
• MDN Web Docs, Number.isSafeInteger(). 게시·수정일 미표기.
• MDN Web Docs, parseInt(). 게시·수정일 미표기.

문서·실행 확인: 2026년 11월 1일 KST. Windows x64의 Node.js 26.5.0(V8 14.6.202.34-node.24)에서 본문 코드 3블록을 그대로 실행했습니다. 본문의 parseCount로 16진수·지수 표기와 안전 정수 경계도 별도 확인했습니다. 문자열 처리 함수의 합성 시험이며 실제 HTML 폼·서버·사용자 자료를 시험한 결과가 아닙니다. 이미지는 설명용 생성 일러스트입니다.