티스토리 뷰
사실 JavaScript에서는 숫자도 객체입니다. 그래서 우리가 아무렇지 않게 작성하던 숫자에도 다양한 메소드들이 있는데요.
첫 번째는 toFixed라는 메소드 입니다. 이 메소드는 소수를 다룰 대 사용하는 메소드인데요.
파라미터로 숫자 값을 전달해 주면 그만큼 소수점 아래의 자릿수를 고정해주는 메소드 입니다.
// Number
let myNumber = 0.3591;
// toFixed(0 ~ 100)
console.log(myNumber.toFixed(3)); // 0.359
console.log(myNumber.toFixed(7)); // 0.3591000
console.log(typeof myNumber.toFixed(7)); // string
console.log(typeof Number(myNumber.toFixed(7))); // number
console.log(Number(myNumber.toFixed(7))); // 0.3591
console.log(+myNumber.toFixed(2)); // 0.36
범위는 0부터 100까지인데요. 코드를 보면 myNumber에 0.3591이라는 숫자를 할당해 주고 있고 toFixed 메소드를 호출하고 있는데요. 파라미터로 숫자 3을 전달해 주고 있습니다. 그러면 여기 이 숫자 값의 소수점 아래 네 번째 자릿값을 반올림해서 소수점 세 자리까지 표시해 주는데요. 실행해보면 0.359가 출력이 되는데요.
반대로 파라미터로 전달하는 값이 숫자값의 자릿수를 초과하는 경우에는 0으로 대체됩니다. 파라미터 값을 7로 바꾸면 이렇게 7자리를 만들기 위해서 부족한 자릿수를 0으로 채워 넣는 것을 확인할 수 있습니다.
그런데 한 가지 주의할 점은 이렇게 계산된 값이 문자열이라는 점인데요. 만약 더하기 연산 같은 걸 한다면 문자열 연결이 되어 버릴 수도 있으니까 이 부분은 주의해서 사용해야 합니다. 그래서 이 메소드로 수정된 값을 숫자로 사용하고 싶을 때는 Number 함수를 이용해서 숫자형으로 형 변환을 해줘야 합니다. typeof를 지워보면 아까 문자열로 나왔을 때 자리수를 채우기 위해 들어간 0은 생략이 되고 색깔도 보라색으로 이렇게 숫자형태의 0.3591이 출력되는 것을 확인할 수 있습니다.
JavaScript에서는 어떤 값 앞에 더하기 기호를 붙여주면 Number 함수와 똑같은 결과를 얻을 수가 있습니다.
다음으로 살펴볼 메소드는 toString 메소드입니다.
//Number
let myNumber = 255;
//toString(2~36)
console.log(myNumber.toString(2)); // 11111111
console.log(myNumber.toString(8)); // 377
console.log(myNumber.toString(16)); // ff
toString은 파라미터로 전달하는 숫자의 진법으로 숫자를 변환해 주는 메소드 로 범위는 2부터 36까지입니다.
코드를 보면 255를 각각 2,8,16진수로 변환하고 있습니다.
메소드 이름이 toString인 만큼 이 결과값도 문자열이라는 점을 기억해두면 좋을 것 같습니다.
마지막으로 일반적으로 숫자형 메소드를 사용할 때 주의해야 할 부분이 있습니다.
위 코드에서는 숫자를 변수에 담아서 변수 이름과 점 표기법으로 메소드를 사용하고 있지만 숫자에 바로 이 메소드를 사용할 수도 있습니다.
그런데 255를 그냥 적으면 빨간 줄로 에러가 발생합니다.
왜냐하면 정수에 바로 점을 찍게 되면 메소드를 호출하는 점 표기법이 아니라 소수점으로 인식하기 때문입니다.
그렇기 때문에 정수 형태의 숫자 값에는 메소드를 사용할 때 반드시 점 두개를 사용해 줘야 합니다.
또 다른 방법으로는 양옆의 괄호를 감싸주는 방법과 숫자를 변수에 담아서 사용하는 방법이 있는데 코드를 작성하는 상황에 따라 조금 더 가독성 있고 안전한 방법을 선택해서 사용하면 좋을 것 같습니다.
//Number
let myNumber = 255;
//toString(2~36)
console.log(255..toString(2)); // 11111111
console.log((255).toString(8)); // 377
console.log(myNumber.toString(16)); // ff
'프론트엔드 > JavaScript' 카테고리의 다른 글
[자료형 심화] 05. 바보 자바스크립트? (0) | 2022.10.24 |
---|---|
[자료형 심화] 04. Math객체 (0) | 2022.10.24 |
[자료형 심화] 01. 다양한 숫자 표기법 (0) | 2022.10.19 |
[배열] 12. 다차원 배열 (0) | 2022.10.11 |
[배열] 10. for...of 반복문 (2) | 2022.10.10 |
- Total
- Today
- Yesterday
- 타입변환
- find
- 기본형 데이터
- 동적(dynamic) 언어
- redux-thunk
- some
- 참조형 데이터
- filter
- redux-middleware
- findindex
- undefined
- map
- redux middleware
- foreach
- null
- EVERY
- 비교 연산자
- 얕은복사
- 불변 객체
- redux thunk
- redux
- 느슨한 타입(loosely typed)
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |