자바스크립트 헷갈리는 Math 메소드 - 숫자를 정수로 변환

알고리즘 풀이를 하다 보니 어느 순간 Math 메서드들이 헷갈리기 시작하여.. 차이를 정리해두려고 한다!

 

자바스크립트 Math 객체는 다양한 수학적 연산을 수행하는 메서드를 제공한다.  

그중에서도 Math.floor(), Math.ceil(), Math.round(), Math.trunc()는 숫자를 정수로 변환하는 데 자주 사용된다. 비슷해 보이지만 각각 동작 방식이 조금씩 다르기 때문에 헷갈리기 좋다 ㅠㅠ
뭐가 조금씩 다른지, 어떤 상황에 무엇을 사용하면 좋을지 정리해보자!

Math.floor()

주어진 숫자와 같거나 작은 숫자 중에 가장 큰 정수를 반환한다. 즉, 소수점 이하를 버리고 내림한다.

Math.floor(4.9); // 4
Math.floor(4.1); // 4

// 음수는 절대값이 더 큰 정수로 내림되기 때문에 더 작은 음수가 된다.
Math.floor(-4.9); // -5
Math.floor(-4.1); // -5

 

 

Math.ceil()

주어진 숫자와 같거나 큰 숫자 중에 가장 작은 정수를 반환한다. 즉, 소수점 이하를 올림 한다.

Math.ceil(4.9); // 5
Math.ceil(4.1); // 5

// 음수일 때는 더 큰 정수로 올림한다.
Math.ceil(-4.9); // -4
Math.ceil(-4.1); // -4

 

 

Math.round()

주어진 숫자를 반올림하여 가장 가까운 정수를 반환한다. 쉽게 말해 소수점 첫째 자리가 0.5 이상이면 더 큰 수로 반올림되고, 0.5 미만이면 더 작은 수로 반올림된다.

Math.round(4.9); // 5
Math.round(4.5); // 5
Math.round(4.4); // 4

// 숫자의 부호를 포함하여 반올림을 수행한다.
Math.round(-4.9); // -5
Math.round(-4.5); // -4
Math.round(-4.4); // -4

 

 

Math.trunc()

위의 세 가지 함수는 양수/음수에 따라 다른 계산을 하지만, Math.trunc() 함수의 경우 양수/음수 값에 상관없이 소수점 이하 우측 부분을 제거하는 아주 단순한 동작을 한다.

Math.trunc(4.9); // 4
Math.trunc(4.1); // 4
Math.trunc(-4.9); // -4
Math.trunc(-4.1); // -4

 

 

+ 추가적으로 헷갈렸던 parseInt

parseInt()

parseInt()는 문자열을 분석하여 정수를 반환한다. 숫자로 시작하는 문자열이 입력되면, 해당 숫자 부분을 정수로 변환한다. 만약 문자열의 시작이 숫자가 아니라면 NaN을 반환한다.

parseInt("10"); // 10
parseInt("10.5"); // 10
parseInt("-10.7"); // -10
parseInt("10px"); // 10
parseInt("px10"); // NaN

 

 

💡Math.floor() vs parseInt() 둘 중에 무엇을 사용해야 할지 헷갈릴 때!

- 음수를 처리할 때 Math.floor()와 parseInt()는 다르게 작동한다. Math.floor()는 음수를 더 작은 값으로 내림 처리하는 반면, parseInt()는 소수점 이하를 무시하고 정수 부분만 반환한다.
- 음수의 소수점 이하를 제거하고자 할 때, 즉 -1.1을 -1로 처리하고자 한다면 parseInt()가 더 적합할 수 있다. 하지만 음수를 더 작은 정수로 내림 처리하고자 할 때는 Math.floor()를 사용해야 한다.

 

 

 

 

 

 

| 참고 문서
- https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/ceil

- https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/trunc

- https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/floor

- https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/round