자료형과 숫자 변환

값의 종류 살펴보기

JavaScript의 값에는 여러 자료형이 있습니다. 이 편에서는 숫자, 문자열, 불리언을 살펴봅니다. 12는 숫자이고 "12"는 숫자 모양의 글자가 들어 있는 문자열입니다. 화면에 출력하면 둘 다 12처럼 보일 수 있지만, 프로그램에서 다루는 방식은 다릅니다. true와 false는 참과 거짓을 나타내는 불리언 값입니다.

값 앞에 typeof를 쓰면 자료형을 나타내는 문자열을 얻습니다. 숫자는 "number", 문자열은 "string", 불리언은 "boolean"입니다. typeof가 반환한 결과도 글자이므로 다른 문자열처럼 출력할 수 있습니다.

실행 예제와 결과

const age = 12;
const text = "12";
const ready = true;
const finished = false;

console.log("숫자", age);
console.log("문자열", text);
console.log("준비", ready);
console.log("완료", finished);

console.log("age의 타입", typeof age);
console.log("text의 타입", typeof text);
console.log("ready의 타입", typeof ready);

const converted = Number(text);
console.log("변환한 값", converted);
console.log("변환한 타입", typeof converted);
console.log("변환 후 더하기", converted + 3);

const invalid = Number("사과");
console.log("변환할 수 없는 값", invalid);
console.log("그 값의 타입", typeof invalid);

age와 text는 비슷하게 출력되지만 typeof 결과는 각각 number와 string입니다. Number(text)는 문자열 "12"를 숫자 12로 명시적으로 변환합니다. 따라서 변환 결과에 3을 더하면 숫자 15가 나옵니다. Number("사과")는 숫자로 해석할 수 없어 NaN을 만듭니다. 흥미롭게도 typeof NaN의 결과는 number입니다.

변환할 때 살펴볼 경계

숫자처럼 보이는 문자열과 숫자를 혼동하지 마세요. 예를 들어 "12" + 3은 문자열을 이어 붙여 "123"이 됩니다. 숫자 덧셈을 원한다면 Number("12") + 3처럼 변환 의도를 분명히 표현할 수 있습니다. Number를 쓴다고 모든 입력이 유효한 숫자가 되는 것은 아닙니다. 변환 결과가 NaN일 수 있으므로 실제 프로그램에서는 입력의 유효성을 별도로 확인해야 합니다.

빈 문자열이나 공백만 있는 문자열은 Number로 변환하면 0이 됩니다. 따라서 값이 비어 있는지 확인해야 하는 상황에서 변환 결과만 보고 사용자가 0을 입력했다고 판단하면 안 됩니다. 이 강의의 예제는 내용이 정해진 문자열로 변환의 기본 동작을 살펴봅니다.

출력이 같아 보여도 자료형을 확인하기

터미널은 글자로 결과를 보여주므로 숫자 12와 문자열 “12”를 눈으로만 구분하기 어렵습니다. 값과 typeof 결과를 같은 줄에 출력하면 변환 전후를 비교하기가 쉽습니다. console.log(text, typeof text)와 console.log(converted, typeof converted)를 차례로 실행해보세요. 둘 다 첫 항목은 12처럼 보이지만 두 번째 항목은 다릅니다.

식	결과	해석
"12" + 3	문자열 "123"	문자열 이어 붙이기
Number("12") + 3	숫자 15	변환 후 덧셈
Number("")	숫자 0	빈 입력이 자동으로 거부되는 것은 아님
Number("사과")	NaN	숫자로 해석할 수 없는 입력

명시적 변환은 의도를 드러내지만 입력 검증을 대신하지 않습니다. 나이를 입력받는 프로그램이라면 문자열이 비어 있는지, 숫자인지, 허용 범위에 있는지 서로 다른 질문으로 판단해야 합니다. 빈 문자열이 0으로 바뀌었다는 사실만으로 나이가 0이라고 결정하면 원래 입력의 의미를 잃습니다.

또한 변환은 원본 문자열을 직접 수정하지 않습니다. const converted = Number(text);가 실행된 후에도 text는 문자열이고 converted는 별도의 숫자 값입니다. 두 이름을 함께 출력하며 역할을 비교하세요. 화면 표시에는 원문을 쓰고 계산에는 변환한 값을 쓰는 상황에서도 이 구분이 도움이 됩니다.

연습문제와 해설

const textCount = "8";을 선언하고 이 값을 Number로 변환한 다음 2를 더해 출력해 보세요. 또 변환 전과 후에 각각 typeof를 적용해 보세요. 변환 전 자료형은 string, 변환 후 자료형은 number, 계산 결과는 10입니다. 변환 결과를 새 변수에 저장하면 원래 textCount는 문자열로 그대로 남습니다.

추가로 Number("나무")의 결과를 예상해 보세요. 숫자로 해석할 수 없는 글자이므로 NaN입니다. NaN이라는 출력은 0과 다르며, 변환에 실패한 값을 나타낸다는 점을 기억하세요.