[JavaScript] 왜 자동형변환과 명시적형변환에서 서로 다른 결과가 출력될까

이슈 발생

조건문을 공부하던 중 다음의 문제를 마주했습니다.

▷ 프롬프트로 숫자로 입력 받아 짝수인지 홀수인지 판단하여 결과를 출력하세요. 단, 빈 문자일 경우 실행하지 않고, 일반 문자일 경우 '숫자를 입력하세요' 를 출력하세요.

이 경우 공백 문자는 어떻게 처리 하는가를 고민해야 합니다. 공백 문자는 빈 문자가 아니기 때문에 일반 문자로 취급하여 '숫자를 입력하세요' 를 출력하려고 했습니다. 그런데 이 과정에서 다음과 같은 의문점이 생기게 됩니다.

let num = prompt('숫자를 입력하세요');

if (num) {
  switch (num % 2) {
    case 0:
      alert('짝수입니다');
      break;
    case 1:
      alert('홀수입니다');
      break;
    default:
      alert('숫자를 입력하세요');
      break;
	}
}

위의 코드를 실행하고 공백 문자를 입력하면 '짝수입니다' 가 실행됩니다. 이는 조건문의 표현식인 num % 2 이 프롬프트로 입력된 문자열을 정수로 자동형변환 하였기 때문입니다.

let num = prompt('숫자를 입력하세요');

if (num) {
  num = parseInt(num);
  switch (num % 2) {
    case 0:
      alert('짝수입니다');
      break;
    case 1:
      alert('홀수입니다');
      break;
    default:
      alert('숫자를 입력하세요');
      break;
	}
}

그런데 조건문 바로 위에 num = parseInt(num); 라는 문장을 추가하고, 공백 문자를 입력하면 '숫자를 입력하세요' 가 출력됩니다.

조건문의 표현식은 num % 2 이므로 문장을 만나는 순간, 프롬프트로 입력 받았던 문자열이 정수로 자동형변환 될 것입니다. 자동형변환이 발생되는 문장 바로 위에 num = parseInt(num); 으로 명시적형변환을 해주었을 뿐인데, 왜 서로 다른 결과가 출력되나요?

트러블 슈팅

그 이유는 동일한 기능을 수행하더라도, 그 방식은 다를 수 있기 때문입니다.

이를 이해하기 위해서는 parseInt() 함수를 이해할 필요가 있습니다. parseInt() 함수를 사용하는 주요 목적은 문자열에서 정수를 추출하기 위함입니다. parseInt() 함수는 문자열을 파싱하여 정수나 NaN 을 반환합니다.

위의 경우 num = parseInt(num); 은 공백 문자를 정수로 변환할 수 없으므로 NaN 을 반환합니다. 따라서 조건문의 인자값으로 NaN 이 들어가므로 '숫자를 입력하세요' 가 출력되는 것입니다.

반면, num = parseInt(num); 이라는 문장이 없으면 공백 문자는 조건문의 표현식에서 정수 0 으로 처리되어 '짝수입니다' 가 출력됩니다.

느낀 점

특정 함수를 사용할 시에는 그 함수에 대한 이해가 우선적으로 이루어져야 합니다. 가령, 자동형변환과 parseInt() 함수 그리고 Number 객체가 모두 동일한 기능을 수행하지만, 목적과 상황에 맞게 사용하는 것이 중요합니다.