JavaScript parseInt() 완벽 가이드: 문자열을 정수로 변환하는 방법

JavaScript의 parseInt() 메서드는 문자열이나 부동소수점 숫자를 읽어 정수로 변환합니다. 이 메서드는 수학 연산을 수행하기 전에 문자열 형태의 데이터를 준비하는 데 널리 사용됩니다. 수식 안에서 문자열은 숫자처럼 취급될 수 없기 때문입니다.

JavaScript parseInt()란?

JavaScript로 데이터를 다루다 보면 문자열을 정수로 변환해야 하는 경우가 자주 생깁니다. 예를 들어 웹 폼에서 사용자에게 나이를 입력받는다고 가정해 보겠습니다. 입력된 나이를 숫자로 변환하면 사용자가 16세 이상인지 손쉽게 확인할 수 있습니다.

바로 이럴 때 parseInt() 함수가 유용합니다. parseInt()는 문자열을 정수로 변환할 수 있는 JavaScript의 내장 메서드입니다.

이 글에서는 parseInt() 메서드의 기본 개념과 문법을 살펴보고, 실제 예제를 통해 문자열을 숫자로 변환하는 방법까지 단계별로 알아보겠습니다.

JavaScript의 parseInt()는 문자열 또는 부동소수점 숫자를 정수로 변환합니다. 주로 문자열로 포맷된 데이터를 수학 연산에 사용할 수 있도록 준비하는 용도로 활용됩니다.

parseInt() 함수의 기본 문법은 다음과 같습니다:

parseInt(string, radix);

parseInt() 메서드는 두 개의 매개변수를 받습니다.

radix 인자는 첫 번째 매개변수만큼 자주 사용되지는 않습니다. 대부분의 경우 숫자는 10진수로 표현되며, parseInt()의 기본 진수 역시 10진수이므로 특별한 경우가 아니라면 이 인자를 신경 쓰지 않아도 됩니다.

변환하려는 값의 앞뒤에 공백이 포함되어도 괜찮습니다. 하지만 숫자 중간에 있는 공백은 허용되지 않습니다.

또한 문자가 포함된 값을 파싱하려고 하면 NaN(Not a Number) 값이 반환됩니다. 다만 radix 인자를 지정하면 16진수 표기의 "x"처럼 숫자 형식과 관련된 일부 문자는 허용될 수 있습니다.

실제 동작 방식을 예제를 통해 확인해 보겠습니다. 문자열 "20202"를 정수로 변환한다고 가정해 봅시다. 다음 코드를 사용하면 됩니다:

console.log(parseInt("20202"));

parseInt() 함수는 문자열을 파싱하여 다음과 같은 정수를 반환합니다:

콘솔에서 결과를 확인해 보면 프로그램이 문자열이 아닌 숫자를 반환한 것을 알 수 있습니다. 반환된 값에 따옴표가 없다는 점에서 이 값이 이제 숫자임을 짐작할 수 있습니다.

구체적인 흐름을 정리하면 다음과 같습니다. 먼저 변수 value에 따옴표로 감싸인 문자열을 할당합니다. 그다음 parseInt() 메서드를 사용해 해당 값을 정수로 변환하는 방식입니다.

radix 인자를 사용하면 서로 다른 진법으로 표현된 숫자도 변환할 수 있습니다.

radix 인자는 2부터 36 사이의 숫자를 받으며, parseInt() 함수가 사용해야 할 진법 체계를 지정합니다. 예를 들어 16진수(radix 값 16)로 표현된 "0xF"를 변환하고 싶다면 다음 코드를 사용할 수 있습니다:

console.log(parseInt('0xF', 16));

이 함수는 15를 반환합니다.

숫자로 변환할 수 없는 문자열을 전달하면 JavaScript는 NaN(Not a Number)을 반환합니다. 다음은 parseInt()를 사용해 "Hey"라는 문자열을 변환하려는 예제입니다:

console.log(parseInt('Hey'));

"Hey" 문자열의 문자들은 숫자로 변환될 수 없으므로 parseInt()는 NaN을 반환합니다.

JavaScript의 parseInt() 메서드는 문자열을 정수로 변환하는 데 사용됩니다. 숫자 형태로 다뤄야 하는 문자열 데이터가 있을 때 특히 유용합니다. 예를 들어 문자열에 대해 수학 연산을 수행하려면 해당 문자열을 반드시 숫자로 변환해야 합니다.

이 글에서는 parseInt() 메서드의 사용법을 살펴보고 몇 가지 실전 예제도 함께 확인했습니다. 또한 radix 매개변수를 parseInt()와 함께 활용하는 방법도 알아보았습니다.

이제 여러분도 parseInt() 메서드를 능숙하게 활용할 준비가 되었습니다. 실제 프로젝트에서 다양한 상황에 직접 적용해 보면서 감각을 익혀 보세요!