1. 程式人生 > >JavaScript Essentials: Numbers and Math

JavaScript Essentials: Numbers and Math

JavaScript Essentials: Numbers and Math

Essentials is a series that covers the most used and important methods for X topic along with some other fundamentals. In this post, we cover Numbers and Math.

Prerequisites

It’s recommended that you know about types and just a little bit of math.

Numbers in JavaScript the Basics

  • JavaScript has just one number type. i.e5 and 5.12 are the same type.

What does this mean? All JavaScript numbers are stored as double floating point numbers. JS will trick you into thinking that your var x = 1 is an integer, but really it’s a float and equal to 1.0

If you’re a numbers person then here are some links for you:

The focus of this article will be on the methods for Numbers.

Number Creation & Basics in Code

number creation

Important Guidelines

  • All numbers are floats
  • All numbers are the same type, ‘number’
  • JS like any other language is limited in how large of a number it can represent and how accurate it can be.

Common Methods

Below are code blocks, some with a scenario/task described in a comment up top then some code below and others just showcasing methods.

“Safe” Numbers

A “safe” number is a number whose value is guaranteed to be what you say it is. For example, if we try to use 900719925474099164 in our code it instead becomes 900719925474099200 This is because it’s outside of the safe number range.

How do we see what the range of safe numbers is?

safe numbers

How do I Determine if a Number is an Integer?

Every number in JS is the same type after all…

Number.isInteger

How do I change the number of decimal places?

Number.toFixed
Number.toPrecision

Convert to Exponential Form

Also known as scientific notation.

Number.toExponential

Global Number Functions vs Number.method

You may have noticed that there are global functions like parseInt but I only showed Number.parseInt()

This is because JS is trying to move away from global functions and use modules. Some of the new module methods are updated while the old globals are not. i.e isNan() is different than Number.isNan()

Working with Large Numbers

Warning: I’m from the future — and the vanilla JS method mentioned below is currently not available in your time period. ( you can try it in chrome console ) See the proposal for it here.

BigInt

Until BigInt is available, use a library.

Converting to another Number System

toString, parseInt

Methods on Literal Numbers

You may have tried to use a method on a number literal in the console or anywhere and got an error. i.e 23.toString(2) // syntax error This is because as mentioned previously in the “Numbers Creation Basics” section 23. is a valid number, the 0 is optional.

This means that when you do 23.toString(2) JS thinks that it’s just a number. It should be smart enough to know that a method is being called, but oh well.

The solution: wrap your literal in parentheses (23).toString(2) // "10111" or do something really weird… 23..toString(2) Please don’t do that ?

Not a Number is a Number

TLDR; NaN lives on the Number object, but is defined as a result of some mathematical operations that resulted in a value that cannot be quantified as a number. Or in other words, it’s poorly named. “Invalid number” or similar would’ve been better.

Check for NaN

NaN is toxic — meaning that it turns anything it touches into NaN It’s the only value not equal to itself and we can use that to our advantage by doing something like x !== x if that returns true then it’s NaN.

Object.is, Number.isNaN, isNaN

Ways to Round a Number

floor, ceil, round, toFixed, toPrecision, bit shift

Exponents

** pow **

Generate a Random Number

Math.random

Math Functions

I’ve only included a few Math methods here, but there are lots just check the documentation. I’m not including all of them because they’re pretty self-explanatory and only used often if you’re working on a project that’s math heavy.

References & Links

Practice

Thanks for reading! Leave any feedback or questions in the comments below. Also, let me know if you have any ideas on how I can improve this article. I’m working on figuring out the best layout and how to best deliver the content to your brain and I would appreciate any feedback!