Number와 parseInt는 모두 문자열을 숫자로 변환해 주는 함수입니다. 프로젝트를 하면서 Number를 사용한 적이 있었는데, 어떤 상황에서 Number를 써야 하고 parseInt를 써야 할지 애매할 때가 있었습니다. 그래서 Number와 parseInt의 차이점은 어떤 것이 있는지 궁금해서 자료를 정리해 봤습니다.
1. 문자열에 숫자만 있을 경우 1 - 정수
const a = "10";
console.log(Number(a)); // 10
console.log(parseInt(a)); // 10
const b = "12.00";
console.log(Number(b)); // 12
console.log(parseInt(b)); // 12
문자열이 정수로만 되어있는 경우 Number와 parseInt의 결과는 동일합니다. 문자열 그대로 10을 반환합니다.
2. 문자열에 숫자만 있을 경우 2 - 실수
const a = "3.14";
console.log(Number(a)); // 3.14
console.log(parseInt(a)); // 3
console.log(parseFloat(a)); // 3.14
하지만 문자열이 위와 같이 소수점으로 되어있을 경우에는 Number는 소수점까지 같이 반환하는 반면, parseInt는 소수점을 버린 정수 부분만을 반환합니다. Number와 동일한 값을 얻으려면 parseInt가 아닌 parseFloat를 사용해야 합니다.
3. 문자열에 숫자가 없을 경우
const a = "Elice";
console.log(Number(a)); // NaN
console.log(parseInt(a)); // NaN
문자열에 숫자가 존재하지 않는 경우에는, Number와 parseInt 모두 NaN(Not-A-Number)을 반환합니다.
4. 문자열에 숫자가 섞여 있을 경우
const a = "22 Hello World";
console.log(Number(a)); // NaN
console.log(parseInt(a)); // 22
const b = "Hello 22 World";
console.log(Number(b)); // NaN
console.log(parseInt(b)); // NaN
const c = "Hello World 22";
console.log(Number(c)); // NaN
console.log(parseInt(c)); // NaN
const d = "123_456"
console.log(Number(d)); // NaN
console.log(parseInt(d)); // 123
문자열 맨 앞에 숫자가 있을 경우에 Number는 NaN을 반환하지만, parseInt는 맨 앞에 있는 숫자를 반환합니다. 다만, 숫자가 문자열의 중간이나 맨 끝에 있을 경우 parseInt 역시 NaN을 반환합니다.
const a = ["123", "Elice", "텐동"];
console.log(Number(a)); // NaN
console.log(parseInt(a)); // 123
const b = ["Elice", "123", "텐동"];
console.log(Number(b)); // NaN
console.log(parseInt(b)); // NaN
배열의 경우에도 마찬가지입니다. 배열의 맨 앞에 숫자로 된 문자열이 있다면 parseInt는 숫자로 변환을 합니다. 하지만 맨 앞이 아니라면 숫자를 인식하지 못하고 NaN을 반환합니다.
const a = ["123", "456", "Elice", "탕후루"];
console.log(Number(a)); // NaN
console.log(parseInt(a)); // 123
만약 0번, 1번 index에 숫자로 된 문자열이 있으면 어떻게 될까요? parseInt는 0번 index에 있는 문자열만 숫자로 반환해 줍니다.
5. null, undefined, true, false
const a = null; // const a = " " 결과는 같음
console.log(Number(a)); // 0
console.log(parseInt(a)); // NaN
const b = undefined;
console.log(Number(a)); // NaN
console.log(parseInt(a)); // NaN
const c = true;
console.log(Number(c)); // 1
console.log(parseInt(c)); // NaN
const d = false;
console.log(Number(d)); // 0
console.log(parseInt(d)); // NaN
이 경우에 parseInt는 모두 NaN을 반환합니다. 하지만 Number는 null과 false일 때 0을, true일 때 1을 반환합니다. 문자열이 ""뿐만 아니라 " "처럼 공백만 있어도 Number는 0을 반환합니다.
6. Infinity, -Infinity
const a = Infinity;
console.log(Number(a)); // Infinity
console.log(parseInt(a)); // NaN
const b = -Infinity;
console.log(Number(b)); // -Infinity
console.log(parseInt(b)); // NaN
이 경우에도 parseInt는 NaN을 반환하지만, Number는 무한대일 때 무한대 값을 그대로 반환합니다.
7. 문자열이 특정 진수일 때
const a = "0x11"; // 17의 16진수 값
console.log(Number(a)); // 17
console.log(parseInt(a)); // 17, parseInt는 radix를 지정해주지 않으면 16진수와 10진수만 구별함
const b = "0o11"; // 9의 8진수 값
console.log(Number(b)); // 9
console.log(parseInt(b)); // 0
const c = "0b11"; // 3의 2진수 값
console.log(Number(c)); // 3
console.log(parseInt(c)); // 0
parseInt는 parseInt(string, radix)처럼 두 번째 매개변수로 진수 값을 지정해 줄 수 있습니다. 만약 radix를 생략하고 string만 매개변수로 지정해 준다면 "0x"로 시작할 때는 자동으로 16진수로 변환해 주지만, "0o"나 "0b"와 같은 8진수와 2진수 값은 인식하지 못하고 앞에서 본 것처럼 문자의 맨 앞 숫자인 0을 반환해 줍니다. 하지만 Number의 경우에는 "0x", "0o", "0b"가 앞에 있으면 자동으로 16진수, 8진수, 2진수의 숫자로 변환해 줍니다. (ECMAScript 5 이후부터 parseInt를 이용해서 0으로 시작하는 문자열을 8진수로 해석하는 것을 금지함)
// parseInt(string, radix)
parseInt(11, 16) // 17
parseInt(11, 8) // 9
parseInt(11, 2) // 3
parseInt(11, 10) // 11
parseInt("0xF") // 15, radix가 없어도 "0x"로 시작하면 16진수로 변환
parseInt("0xF", 16) // 15
parseInt("F", 16) // 15
parseInt("Elice", 8) // NaN
parseInt("546", 2) // NaN, 546은 2진수가 아님
parseInt는 매개변수로 파싱 할 값인 string과, string의 진수를 나타내는 radix를 매개변수로 받을 수 있습니다. 위에서 언급한 것처럼 radix값을 생략하면 문자열에 "0x"가 존재할 경우에는 16진수로, 없을 경우에는 10진수로 자동으로 변환해 줍니다. radix는 2부터 36까지의 정수입니다. 만약 radix를 설정했는데 string에 유효하지 않은 문자열이 들어갔다면 NaN을 반환합니다.
8. 지수(e)가 포함된 문자열
const a = "1e+20";
console.log(Number(a)); // 100000000000000000000
console.log(parseInt(a)); // 1
const b = "1e+21";
console.log(Number(b)); // 1e+21, 이상이면 지수로 표현
console.log(parseInt(b)); // 1
const c = "1e-6";
console.log(Number(c)); // 0.000001
console.log(parseInt(c)); // 1
const d = "1e-7";
console.log(Number(d)); // 1e-7, 이하면 지수로 표현
console.log(parseInt(d)); // 1
Number는 지수(e)를 인식해서 숫자로 잘 변환해 주는 반면, parseInt는 e를 문자열로 인식하기 때문에 문자열 앞에 있는 숫자만 변환해 줍니다. 만약 "123e+2"의 값이 주어진다면 Number는 12300을, parseInt는 e 앞의 숫자인 123을 반환합니다. 참고로 위의 예제처럼 숫자가 1e+21을 초과하거나, 1e-7 미만인 경우에는 지수가 붙은 값을 그대로 반환하고, 그 사이의 숫자는 지수만큼 0을 붙여서 반환합니다.
const a = "1000000000000000000000";
console.log(Number(a)); // 1e+21
console.log(parseInt(a)); // 1e+21
const b = "0.0000001";
console.log(Number(b)); // 1e-7
console.log(parseInt(b)); // 0
console.log(parseFloat(b)); // 1e-7
반대로 1e+21이 아닌 1e+1의 값을 풀어서 입력했다면 결과값은 Number와 parseInt 모두 동일하게 1e+21로 나옵니다. 1e-7의 값을 풀어서 입력했다면 Number는 그대로 1e-7을 반환하지만, parseInt는 실수는 값을 버리고 반환하기 때문에 0을 반환합니다. Number와 같은 결과값을 얻으려면 parseFloat를 이용해야 합니다.
9. Date 객체를 숫자로 변환
const a = new Date("May 17, 2024 12:13:00");
console.log(Number(a)); // 1715915580000
console.log(parseInt(a)); // NaN
Date 객체를 숫자로 변환할 때는 Number를 사용합니다. parseInt는 문자열의 처음이 숫자가 아니므로 NaN을 반환합니다.
10. Map 함수를 이용해서 배열의 문자열을 숫자로 변환
const a = ["1", "2", "3", "4", "5"];
const b = a.map(Number);
const c = a.map(parseInt);
console.log(b); // [ 1, 2, 3, 4, 5 ]
console.log(c); // [ 1, NaN, NaN, NaN, NaN ]
map함수를 이용해서 객체의 문자열을 하나씩 숫자로 변환하려고 할 때, Number를 이용하면 객체 안의 모든 원소를 숫자로 변환해 주지만, parseInt를 사용하면 첫 번째 원소만 숫자로 변환하고 나머지는 NaN을 반환해 줍니다.
const a = ["1", "2", "3", "4", "5"];
for (i = 0; i < a.length; i++) {
a[i] = Number(a[i]);
}
console.log(a); // [ 1, 2, 3, 4, 5 ]
const b = ["1", "2", "3", "4", "5"];
for (i = 0; i < b.length; i++) {
b[i] = parseInt(b[i]);
}
console.log(b); // [ 1, 2, 3, 4, 5 ]
for문을 이용했을 때는 Number와 parseInt 모두 문자열을 숫자로 잘 변환해 줍니다. 따라서 map함수를 이용할 때는 Number를 사용하고, for문을 이용할 때는 Number와 parseInt 모두 사용해도 같은 결과를 얻을 수 있습니다.
11. 성능
function benchmark(name, cb) {
const t0 = performance.now();
for (let i = 0; i < 123e+6; i++) {
cb();
}
const t1 = performance.now();
console.log(`${name} took ${t1 - t0} ms`);
}
// 첫 번째 테스트
const process1 = () => Number("10");
const process2 = () => parseInt("10");
const process3 = () => Number("12.00");
const process4 = () => parseInt("12.00");
const process5 = () => parseFloat("12.00");
benchmark("process4", process4); // 49.046119000000004 ms (제외)
benchmark("process1", process1); // 504.40277 ms
benchmark("process2", process2); // 497.77029400000004 ms
benchmark("process3", process3); // 492.64266900000007 ms
benchmark("process4", process4); // 493.3410110000002 ms
benchmark("process5", process5); // 4398.32734 ms (parseFloat)
// 두 번째 테스트
const process1 = () => Number("22 Hello World");
const process2 = () => parseInt("22 Hello World");
const process3 = () => Number("Hello 22 World");
const process4 = () => parseInt("Hello 22 World");
benchmark("process4", process4); // 57.123753 ms (제외)
benchmark("process1", process1); // 516.625815 ms
benchmark("process2", process2); // 493.05675900000006 ms
benchmark("process3", process3); // 492.7396140000001 ms
benchmark("process4", process4); // 489.58944299999985 ms
// 세 번째 테스트
const process1 = () => Number(null);
const process2 = () => parseInt(null);
const process3 = () => Number(undefined);
const process4 = () => parseInt(undefined);
const process5 = () => Number(true);
const process6 = () => parseInt(true);
const process7 = () => Number(false);
const process8 = () => parseInt(false);
benchmark("process4", process4); // 5698.4390539999995 ms (제외)
benchmark("process1", process1); // 500.9703870000003 ms
benchmark("process2", process2); // 6288.984187 ms (parseInt)
benchmark("process3", process3); // 490.3260759999994 ms
benchmark("process4", process4); // 6290.612854000001 ms (parseInt)
benchmark("process5", process5); // 501.7009740000003 ms
benchmark("process6", process6); // 6348.691674000001 ms (parseInt)
benchmark("process7", process7); // 492.38502999999946 ms
benchmark("process8", process8); // 6385.050194999998 ms (parseInt)
// 네 번째 테스트
const process1 = () => Number("1000000000000000000000");
const process2 = () => parseInt("1000000000000000000000");
const process3 = () => Number("0.0000001");
const process4 = () => parseInt("0.0000001");
benchmark("process4", process4); // 49.753349 ms (제외)
benchmark("process1", process1); // 517.162016 ms
benchmark("process2", process2); // 9484.792979 ms (parseInt)
benchmark("process3", process3); // 497.1809140000005 ms
benchmark("process4", process4); // 498.4548539999996 ms
벤치마크 함수를 이용해서 두 함수의 성능을 비교해 봤습니다. 실행 전 시간과 123e+6번 함수를 실행한 후의 시간을 비교해서 실행 시간을 반환해 줍니다. 첫 번째 벤치마크를 실행하면 시간이 다른 벤치마크 시간과 차이가 많이 나기 때문에, 첫 번째 결과는 제외하고 나머지 시간들을 비교해 봤습니다. 일반적인 상황에서 두 함수의 실행 시간은 거의 비슷했습니다. 하지만 null, undefined, true, false와 같은 값들을 변환할 때, Number는 다른 값들을 변환할 때와 시간 차이가 없었던 반면 parseInt는 느린 성능을 보여줬습니다. 또한 1e+20까지는 Number와 parseInt가 비슷한 성능을 보여줬지만, 1e+21이 넘어가는 순간 parseInt의 성능이 현저히 느려졌습니다. 물론 일반적인 상황에서는 이렇게까지 큰 숫자를 변환할 일이 없을 것입니다. 결과적으로 성능만 봤을 때는 parseInt보다는 Number가 좋았습니다.
12. 정리
두 함수의 차이를 다시 정리해 보겠습니다.
| |
Number |
parseInt |
| 정수 ( a = "10" ) |
10 |
10 |
| 실수 ( a = "3.14" ) |
3.14 |
3 |
문자열 ( a = "Elice" )
숫자가 있는 문자열 ( a = "22 Elice") |
NaN
NaN |
NaN
22 (맨 앞의 숫자만) |
null (+공백), undefined, true, false
Infinity, -Infinity |
0, NaN, 1, 0
Infinity, -Infinity |
NaN
NaN |
| 진수 표현 |
16진수(0x11), 8진수(0o11), 2진수(0b11) |
"0x"일 때 16진수, 없으면 10진수
( 매개변수 radix로 진수 지정 가능 ) |
| 지수(e) ( a = 1e+21 ) |
1e+21 |
1 (e 앞의 숫자만) |
| Date ( "May 17, 2024 12:13:00" ) |
1715915580000 |
NaN |
| Map 함수 ( a = [ "1" , "2" , "3" , "4" , "5" ] ) |
[ 1, 2, 3, 4, 5 ] |
[ 1, NaN, NaN, NaN, NaN ] |
| 성능 |
빠름 |
비슷하지만 일부 항목에서 느림
( null, undefined, true, false, 1e+21 ) |
정리해 보면 대부분 일반적인 상황에서는 Number를 사용하는 것이 좋아 보입니다.
* parseInt를 사용하는 경우
1. 실수를 정수로 변환하고 싶을 때 ("3.14" => 3)
2. 변환해야 할 문자열 앞에 숫자가 있을 때 ("22 Hello World" => 22)
3. Number에서 지원하지 않는 진수를 써야할 때 (radix 값은 2에서 36까지 가능)
4. 0이나 1이 의미를 갖는 경우 (null, "", true, false)
다만 위와 같은 경우처럼 parseInt를 사용하는 경우도 있으므로, 상황에 맞게 Number와 parseInt를 선택하면 될 것 같습니다.
const boardIdList = [];
for (const item of searchedComments) {
boardIdList.push(Number(item.boardId));
}
const boardIdSet = [...new Set(boardIdList)].sort((a, b) => b - a);
위 코드는 프로젝트를 하면서 작성한 게시판 댓글 검색 코드입니다. DB의 Comment 자료에는 댓글이 달린 글의 boardId를 담고 있습니다. 예를 들면 2번 글의 첫 번째 댓글이라면 DB에는 { boardId: 2, commentId: 1 } 이런 식으로 저장이 됩니다. 댓글 내용으로 검색을 하지만 검색 결과는 게시글을 보여줘야 하므로, 검색된 댓글의 boardId를 추출해야 합니다. 추출한 boardId값은 string으로 되어있어서 Number 함수를 이용해 숫자로 변환을 한 후에 배열에 넣어주었습니다. 한 글에서 여러 개의 댓글이 검색될 수도 있기 때문에 boardId가 중복될 수도 있어서 Set함수를 이용해 boardId의 중복을 제거하고 정렬을 해주었습니다.
위 코드에 나오지는 않지만 mongoose sequence plugin을 사용하여 boardId가 1, 2, 3 이런 식으로 자동으로 부여가 되기 때문에, 만약 boardId에 잘못된 값이 들어가서 boardId를 1로 반환해 준다면 boardId가 1인 글이 검색 결과에 표시될 수도 있습니다. 그렇기 때문에 이런 상황에서는 Number 보다는 parseInt를 사용하는 것이 좋을 것 같습니다.
참고 문헌
1. parseInt() - MDN 문서
2. Number - MDN 문서
3. Number.parseInt() vs. parseInt() - reddit.com
4. parseInt() vs Number() - Emre Avcılar
