(34) JavaScript - 자료형(심화) / 숫자형 메소드(toFixed, toString)

자바스크립트에서 숫자는 객체이다.

아무렇지 않게 작성하던 숫자에도 다양한 메소드들이 있는데

숫자형이 가지고 있는 모든 메소드를 다루기보다 가장 많이 사용되는 두 가지 정도만 살펴보겠다.

 

toFixed Method

toFixed 메소드는 소수를 다룰 때 사용하는 메소드로,

파라미터로 숫자 값을 전달해 주면 그만큼 소수점 아래의 자릿수를 고정해 주는 메소드이다.

    //Number 
    let myNumber = 0.3591;

    //toFixed(0 ~ 100)
    console.log(myNumber.toFixed(3));

▲ 범위는 0부터 100까지이며, myNumber에 0.3591이라는 숫자를 할당해 주고있고

toFixed 메소드를 호출하고있다.파라미터로 숫자 3을 전달해 주고있다.

그러면 0.3591 값의 소수점 아래 네 번쨰 자릿값을 반올림해서 소수점 세 자리까지 표시해준다.▼

1의 반올림은 그대로 이므로 0.359가 출력된다.

 

반대로 파라미터로 전달하는 값이 숫자 값의 자릿수를 초과하는 경우에는 0으로 대체된다.

예를들어 7값을 넣어보면..

    //toFixed(0 ~ 100)
    console.log(myNumber.toFixed(3));
    console.log(myNumber.toFixed(7));

 

이렇게 7자리를 만들기 위해서 부족한 자릿수를 0으로 채워 넣는 걸 확인할 수 있다.

한 가지 주의해야할 점은 저렇게 계산된 값이 문자열이라는 점이다.

typeof 연산자를 붙여서 실행해보면..

    //toFixed(0 ~ 100)
    console.log(myNumber.toFixed(3));
    console.log(myNumber.toFixed(7));    
    console.log(typeof myNumber.toFixed(7));

 

string이 출력되는 것을 확인 할 수 있는데 

만약 더하기 연산 같은 걸 한다면 문자열 연결이 되어 버릴 수도 있으니 주의해서 사용해야 한다.

그래서 이 메소드로 수정된 값을 숫자로 사용하고 싶을 때는 

Number 함수를 이용해서 숫자형으로 형 변환을 해줘야한다.●

    //toFixed(0 ~ 100)
    console.log(myNumber.toFixed(3));
    console.log(myNumber.toFixed(7));    
    console.log(typeof myNumber.toFixed(7)); // string
    console.log(Number(myNumber.toFixed(7))); //number 형 변환

 

아까 문자열로 나왔을 때 자릿수를 채우기 위해 들어간 0은 생략되고 

숫자형태의 0.3591이 출력되는 걸 확인할 수 있다.

---

한 가지 팁이 있다면 

자바스크립트에서는 어떤 값 앞에 더하기 기호를 붙여주면 Number 함수와 똑같은 결과를 얻을 수 있다.

    //toFixed(0 ~ 100)
    console.log(myNumber.toFixed(3));
    console.log(myNumber.toFixed(7));    
    console.log(typeof myNumber.toFixed(7)); // string
    console.log(Number(myNumber.toFixed(7))); //number 형 변환
    console.log(+myNumber.toFixed(7)); // +기호 붙여서 Number 함수로 출력

 

자주 사용되지는 않지만 이렇게 toFixed 메소드를 활용할 때 종종 등장할 수 있으니 기억해두는게 좋다.

---

toString Method

toString은 파라미터로 전달하는 숫자의 진법으로, 숫자를 변환해 주는 메소드이며 범위는 2부터 36까지 이다.

 

    //Number
    let myNumber2 = 255;

    //toString(2 ~ 36)
    console.log(myNumber2.toString(2));
    console.log(myNumber2.toString(8));
    console.log(myNumber2.toString(16));

▲ 255를 각각 2, 8, 16진수로 변환하고 있는데, 코드를 실행해보면 변환된 모습을 확인 할 수 있다.

 

참고로 메소드 이름이 이미 toString인 만큼 결과값도 문자열이라는 점이다.

---

이렇게 자주 사용되는 숫자형 메소드 두 가지를 확인해봤는데,

한 가지 더, 일반적으로 숫자형 메소드를 사용할 때 주의해야할 점이 있다.

 

변수에 담아서 변수 이름과 점 표기법으로 메소드를 사용하고 있지만

숫자에 바로 이 메소드를 바로 사용할 수있는데,▼

console.log(255.toString(2));

▲ 그냥 255를 적으면 에러가 발생한다. 

정수에 바로 점을 찍게 되면 메소드를 호출하는 점 표기법이아니라 소수점으로 인식하기 때문이다.

그래서 정수 형태의 숫자 값에는 메소드를 사용할 때에는▼

    console.log(255.toString(2)); //error
    console.log(255..toString(2)); //점 두개 사용

▲ 이렇게 점 두 개를 사용해야 한다.

또한 만약 점 두 개가 아닌 괄호를 넣어도 에러 없이 잘 출력된다.▼

    // console.log(255.toString(2)); //error
    console.log(255..toString(2)); //점 두개 사용
    console.log((255).toString(8)); //괄호 사용

실행해보면 정상적으로 잘 출력이 되는 것을 볼 수 있다.

---

★GitHub 주소(숫자형 메소드)

https://github.com/SeopE9611/JavaScript_soloPlay/blob/main/Basic/10-%EC%9E%90%EB%A3%8C%ED%98%95(%EC%8B%AC%ED%99%94)/2.%EC%88%AB%EC%9E%90%ED%98%95%EB%A9%94%EC%86%8C%EB%93%9C.html

JavaScript_soloPlay/Basic/10-자료형(심화)/2.숫자형메소드.html at main · SeopE9611/JavaScript_soloPlay