자바스크립트 06 parseInt(), Number() 비교

1. 현재의 무드: 주말을 아주 알차게 보냈다! 10월 회고, 11월 회고 불렛 작성도 해놨음. 그리고 노션 폰에 앱 깔아야지... 깔아야지 하다가 드디어 설치했고 이불 빨래도 했다. 밀린 일 다 끝낸 기분 상-쾌 그 잡채. 주말 짱! 

 

(아 그리고 노마드코더 슬랙에서 다른 코딩 초보자분의 질문 글 (function() 호출과 = 할당연산자에 대한 질문이었음) 에 내가 아는 것을 토대로 답변을 달아봤다. 재밌었고, 도움 되셨으면 좋겠다. 다른 분들 질문 읽는게 엄청 공부가 되어서 즐거움) 

 

2. 오늘 학습한 내용 중 키워드: parseInt() vs. Number()

3. 오늘 학습한 내용 요약:

 

오늘은... 사실 이번주 초인가 저번주부터 찾아보려고 적어서 묵혀둔 parseInt() 와 Number()를 비교해서 알아보기! 

 

우선, MDN 문서를 토대로 기본형에 대해 배워보겠음.

 

parseInt() // 함수. 문자열 인자를 파싱하여 특정 진수의 정수를 반환함
praseInt(string) // string: 파싱할 값
parseInt(string, radix) // radix: string의 진수를 나타내는 2부터 36까지의 정수 !! 기본값이 10이 아님 !!

const parsed = parseInt(x, base);

 

어... 진법 어쩌구... 해서 머리가 좀 아프고 이해 안되는 부분이 있기는 하지만, 핵심적인 요소를 정리해보면

 

해당 함수는 첫 번째 인자를 문자열로 변환하고, 그 값을 파싱하여 정수나 NaN을 반환한다. 정수 값을 반환하기 위해 소수점 이하 값을 잘라낸다. 

 

'파싱' 이 대체 뭘까? 

- 언어학에서 parsing은 구문 분석, 즉 문장을 그것을 이루고 있는 구성 성분으로 분해하고 구조를 파악하는 것을 말함. 

- CS에서 parsing은 일련의 문자열을 의미있는 token으로 분해하고 그것들로 이루어진 parse tree를 만드는 과정을 말함. 

 

음.... 대충 쪼개기와 분석을 한다는 것 같음... 진법 체계로 분석해서 읽는다는 뜻일까? 그러면 이해한 걸 토대로 parseInt()를 써보겠음. 

 

parseInt(13) // 13
parseInt(12.23847) // 12
parseInt(101,2) // 5
parseInt(2131,10) // 2131
parseInt(10011, 16) // 65553

 

두번째 케이스에서 소수점을 버리고 정수로 반환한다는 것을 확인.

세번째 케이스에서 101 을 2진법으로 표기된 것으로 인식하여 10진법 체계의 수로 반환해주는 것 확인

네번째 케이스에서 2131을 10진법으로 표기된 것으로 인식하여 10진법 체계의 수로 반환해주는 것 확인

다섯번째 케이스.... 16진법을 몰라서 일단 패스. 

 

Number() // 생성자. Number 객체를 생성함

Number('123') // 123

 

Number() 는 문자열 타입으로 입력된 숫자를 넘버타입으로 변환해주는 역할을 하는 것으로 보인다. 

 

https://thisthat.dev/number-constructor-vs-parse-int/

Number() vs parseInt() - this vs that

 

위 글을 참고해서 둘의 차이를 공부해보니, 

 

공통점: 둘 다 문자열을 숫자 타입으로 변환시켜줄 때 주로 사용함. 

 

차이점: 

1) Number()는 형 변환을 해주지만, parseInt() 는 인풋의 값을 파싱하는 역할을 한다.

 

// Parsing
parseInt('32px') // 32
parseInt('5e1') // 5

//Convert type
Number('32px') // NaN
Number('5e1') // 50

 

여기서 보는 것처럼, parseInt는 첫 non-digit character가 나오기 전까지를 파싱한다. (각각 32, 5까지)

반면 Number는 문자열 전체를 변환하려고 한다. 

 

2) parseInt는 두 가지 파라미터를 허용한다. 

 

parseInt('0101') // 101
parseInt('0101', 10) // 101
parseInt('0101', 2) // 5

Number('0101') // 101

 

이건 위에서 살펴본 개념으로도 충분히 이해 가능. 

 

3) 특정 값을 넣어줬을 때, 다른 결과를 반환한다. 

parseInt() // NaN
parseInt(null) // NaN
parseInt(true) // NaN
parseInt('') // NaN

Number() // 0
Number(null) // 0
Number(true) // 1
Number('') // 0

 

둘의 차이가 아직 완전히 이해되지는 않지만, 향후 공부하면서 다시 돌아와서 읽어보면 다 이해되길... ㅠㅠ