개요

자바스크립트에서 + 단항 연산자는 Number 호출의 축약형으로 동작함 문자열이나 다양한 타입을 숫자로 바꾸려는 순간에 +value와 Number(value)는 같은 의미이고, parseInt는 문자열에서 정수 접두부만 뽑아내는 파서에 가까움 같아 보이지만 목적과 실패 조건이 다르므로 상황에 맞게 선택 필요

핵심 개념

  • unary plus +x
    • ECMAScript의 ToNumber 규칙 적용
    • Number(x)와 동일한 변환 결과 반환
  • Number(value)
    • 숫자 전체 표현식이어야 함
    • 공백 트림은 허용하지만 유효하지 않은 문자가 섞이면 NaN 반환
  • parseInt(string, radix)
    • 문자열의 왼쪽부터 주어진 기수(radix, 2~36)로 해석 가능한 정수 접두부만 파싱
    • 유효하지 않은 문자를 만나면 거기서 파싱 중단
    • 접두부 숫자가 하나도 없으면 NaN 반환
    • ES5+에서 기본 기수는 10이지만, 0x/0X 접두사는 16진수로 처리됨

동작 차이와 사례

  • 전체 일치 vs 접두 파싱
    • Number('12px') → NaN
    • parseInt('12px', 10) → 12
  • 소수와 지수 표기
    • Number('10.5') → 10.5, Number('1e3') → 1000
    • parseInt('10.5', 10) → 10 (소수부 절삭)
  • 빈 문자열과 공백
    • Number('') → 0, Number(' ') → 0
    • parseInt('') → NaN
  • 비문자열 입력
    • +true → 1, +false → 0, +null → 0, +undefined → NaN
    • parseInt(true, 10) → NaN (문자열로 변환 시 ’true’라서 숫자 접두부 없음)
  • 진법 접두사 처리 차이
    • Number('0x10') → 16, parseInt('0x10') → 16
    • Number('0b101') → 5 (ES2015+), parseInt('0b101') → 0
      참고로 parseInt('101', 2) → 5 처럼 radix를 명시해야 기대대로 동작함
  • BigInt 관련
    • +10n은 TypeError 발생
    • Number(10n)은 10으로 변환되나 정밀도 손실 가능성 존재

선택 기준

  • 전체 문자열이 유효한 숫자여야 하고 실수, 지수 표기도 허용해야 함
    • +value 또는 Number(value) 선택
    • 가독성 우선이면 Number(value) 추천, 축약을 선호하면 +value 선택
  • 문자열 앞부분에서 정수만 뽑고 싶거나 비 10진수 파싱 필요
    • parseInt(str, radix) 선택
    • 항상 radix 명시 권장
  • 소수부를 보존하면서 부분 파싱이 필요
    • parseFloat 고려
    • 다만 parseFloat도 접두 파싱이므로 전체 일치 검증이 필요하면 Number 사용 권장

베스트 프랙티스

  • 숫자 변환 의도 전달이 중요할 때 Number(value) 사용
  • 정수 파싱 시 parseInt(str, 10)처럼 radix를 항상 명시
  • 사용자 입력 검증이 필요하면 정규식 또는 스키마 검증으로 전체 형식 검증 후 Number 변환
  • 성능 미세 최적화보다 가독성과 실패 조건의 명확성을 우선

간단 예시

Number('12')      // 12
+'12'             // 12
parseInt('12',10) // 12

Number('12px')    // NaN
parseInt('12px',10) // 12

Number('0b101')   // 5
parseInt('0b101') // 0, radix 명시 필요
parseInt('101', 2) // 5

결론

+는 Number의 축약형이 맞음 전체 숫자 표현식으로서의 유효성을 요구할 때 + 또는 Number 사용, 접두부 정수 추출이나 진법 파싱에는 parseInt 사용 의도를 코드에 드러내고, 실패 조건을 일관되게 가져가는 쪽으로 선택하는 것이 유지보수에 유리함

참고자료