Learning JavaScript, Day 15 – Number Methods and Properties
Are you bored of JavaScript? Want to read something different?
I've decided that, for all of May, I am watching at least one movie per day. Yep. At least 31 movies will be watched and reviewed this month.
You can see them all on my Letterboxd reviews page.
Am I promising the movies are good? Hell no. Am I promising the reviews are good? Also no. Are you going to be horrified by my weird-as-hell choices? Of course you are.
(Also? Pete Murray Takes You To Nottingham is on Talking Pictures TV at 18:10 on Saturday, May 23rd. Am I delighted to see a 1983 travelogue about the city I live in? HELL YEAH.)
If you're still interested in JavaScript, it's Number Methods time!
JavaScript Number Methods
I'm going to do this in the same way I did String Methods, where I come up with ridiculous examples for each method. I think I might just use my Animal Crossing: New Horizons bell account again, because that's just a bit of silliness.
toString
toString() does exactly what it says. Takes a number, turns it into a string.
Annoyingly, I keep on not realising what goes where. I spent a lot of time trying to figure out why my code wasn't working, and it turns out it was because the variable goes in front of .toString() rather than inside the (). Which is kinda annoying.
But, okay, yes, it turns the number into a string.
let bells = 78900000;
let stringBells = bells.toString();
document.getElementById("demo").innerHTML =
typeof stringBells;
Yep. stringBells is a string.
I can apparently also stick an argument inside the () to change it to a different base. Which, dang, I hate switching bases, but it does show me how to turn numbers into binary.
let robotLove = 69;
let robotLanguage = robotLove.toString(2);
document.getElementById("demo").innerHTML =
robotLanguage + "?";
Returns
1000101?
I now know how to talk dirty to robots.
toExponential
This returns the number as a string again, but it also cuts it down using exponential notation.
let bells = 78900000;
let expoBells = bells.toExponential();
document.getElementById("demo").innerHTML =
"Your bells: " + expoBells;
And I get back
Your bells: 7.89e+7
I can change the number of digits that show up as a decimal in the (), but that also rounds the number, so if I do bells.toExponential(0), I get 8e+7, which, as nice as I would like that, my bells aren't quite at 80 million.
bells.toExponential(1) gets me 7.9e+7, which is a little closer. I don't like the decimalisation there, but that's a personal thing. I figure, there are 5 zeroes, give me 5 zeroes, don't throw two of the numbers into decimals and give me 7 zeroes instead.
toFixed
toFixed() I like, because it helps immensely when you're dealing with money.
let price = 10.59;
let vat = 1.2;
let total = price * vat;
document.getElementById("demo").innerHTML =
total.toFixed(2);
I leave off the toFixed(), I get 12.708 which is annoying, because I don't have 0.08 of a penny lying around, but I do toFixed(2), I get 12.71 and there's my whole penny.
toPrecision
'toPrecision()' lets you make all your numbers match up, especially if you have a long column of numbers.
let soda = 1.99;
let popcorn = 3.5;
let nachos = 5;
let total = (soda + popcorn + nachos) * 1.2;
document.getElementById("demo").innerHTML =
"Soda: £" + soda.toPrecision(3) + "<br>" +
"Popcorn: £" + popcorn.toPrecision(3) + "<br>" +
"Nachos: £" + nachos.toPrecision(3) + "<br>" +
"Total: £" + total.toPrecision(3);
Returns
Soda: £1.99
Popcorn: £3.50
Nachos: £5.00
Total: £12.6
And, yeah, the total looks weird because it's only 3 digits. So if I switch that one to toPrecision(4), I get
Soda: £1.99
Popcorn: £3.50
Nachos: £5.00
Total: £12.59
Which looks great.
Except if anyone can tell me where I can find £5 nachos, please. Please. I need nachos in my life.
(I also need buttered popcorn instead of this weird salty or sweet choice I have over here in the UK, but that's beside the point.)
valueOf
I love this line:
valueOf()returns a number as a number.

I also love
There is no reason to use it in your code.
Okay then!
Converting Variables to Numbers
These is good to know, because it helps clear out a lot of the randomness people might put in.
Number
Number() does just that. Takes a variable, turns it into a number.
Their example lays it out pretty nicely.
document.getElementById("demo").innerHTML =
Number(true) + "<br>" +
Number(false) + "<br>" +
Number("10") + "<br>" +
Number(" 10") + "<br>" +
Number("10 ") + "<br>" +
Number(" 10 ") + "<br>" +
Number("10.33") + "<br>" +
Number("10,33") + "<br>" +
Number("10 33") + "<br>" +
Number("John");
All of those return as a number except for the last three, which return as NaN, because
- Has a comma
- Has a space
- Is a word
I like seeing that true and false return as 1 and 0. You could run a nice quiz and count up all the true/falses that way.
let answer1 = true;
let answer2 = false;
let answer3 = true;
let answer4 = true;
let total = Number(answer1) + Number(answer2) +
Number(answer3) + Number(answer4);
document.getElementById("demo").innerHTML =
"Your score: " + total;
Once I work out how to get user inputs into JavaScript, y'all better watch out, because there's going to be a pile of "Which fictional character are you" quizzes...
You can apparently use Number() on dates too, which gives you the number of milliseconds since January 1st, 1970.
So if I put in the first release date of Animal Crossing
let crossingDay = new Date("2001-04-14");
document.getElementById("demo").innerHTML =
Number(crossingDay);
I get
987206400000
I could do overwrought maths with that too.
let crossingDay = new Date("2001-04-14");
let milliseconds = Number(crossingDay);
let seconds = milliseconds / 1000;
let minutes = seconds / 60;
let hours = minutes / 60;
let days = hours / 24;
let years = days / 365;
document.getElementById("demo").innerHTML = years;
Yeah, 31.304 seems like the number of years from January 1st 1970 to when Animal Crossing was released. Ignoring leap years.
I could do that with a whole bunch of parentheses in order to keep it to just three variables, but surely that way would lie madness.
let crossingDay = new Date("2001-04-14");
let milliseconds = Number(crossingDay);
let years = (((((milliseconds / 1000) /
60) / 60) / 24) / 365);
document.getElementById("demo").innerHTML = years;
Yep. Madness.
But let's get even more ridiculous.
let crossingDay = new Date("2001-04-14");
let crossingMilliseconds = Number(crossingDay);
let crossingYears = (((((crossingMilliseconds / 1000) /
60) / 60) / 24) / 365);
let toDay = new Date();
let todayMilliseconds = Number(toDay);
let todayYears = (((((todayMilliseconds / 1000) /
60) / 60) / 24) / 365);
let anniversary = todayYears - crossingYears;
document.getElementById("demo").innerHTML = anniversary.toFixed(0);
Yes, it has been 25 years since Animal Crossing came out. Hurray for overly complicated arithmetic.
parseInt
parseInt() also converts strings to numbers, but does it even if there are words in the string, but only if the number is first.
let anniversary1 = "25 years";
let anniversary2 = "Year: 25";
document.getElementById("demo").innerHTML =
parseInt(anniversary1) + "<br>" +
parseInt(anniversary2);
Which gives me
25
NaN
As it should.
parseInt() only returns whole numbers, so I can't have
let soda = "1.99";
let popcorn = "5";
let total = parseInt(soda) + parseInt(popcorn);
document.getElementById("demo").innerHTML = total;
return the actual total of 6.99 because it doesn't see the .99. Instead I get 6 and the cashier at the counter is mad at me because I'm only giving them £6.
parseFloat
parseFloat() does allow for decimals. So when I use it
let soda = "1.99";
let popcorn = "5";
let total = parseFloat(soda) + parseFloat(popcorn);
document.getElementById("demo").innerHTML = total;
I get the proper 6.99.
Number Object Methods
These return true if the number fits a certain requirement, but they can't be used on variables. But since they all start with Number. I think I can remember it. Until I forget. Which will happen.
Number.isInteger() returns true if it's a whole integer.
So Number.isInteger(5) returns true but Number.isInteger(5.5) returns false.
Number.isFinite() returns true if the number isn't Infinity or NaN.
And since you can do arithmetic in the (), I can safely say that Number.isFinite(123/0) returns false.
Number.isNaN() returns true if it's not a number. I couldn't get an example to return true, but any number will return false.
But apparently Number.isNaN() is the way to check for equality with NaNs? Okay, that's nice.
Number.isSafeInteger() says that returns true if it can be exactly represented as a double precision number.
I have no idea what that means.
I guess it's something to do with the number of characters you can have? Because I tried the example
document.getElementById("demo").innerHTML =
Number.isSafeInteger(10) + "<br>" +
Number.isSafeInteger(12345678901234567890);
and then started removing numbers from the end of the big one, and it hit 16 characters and it was true.
document.getElementById("demo").innerHTML =
Number.isSafeInteger(10) + "<br>" + Number.isSafeInteger(1234567890123456);
So that would come in handy if I needed to check if my maths were going wrong.
Number.parseFloat() and Number.parseInt() are the same as parseFloat() and parseInt() above, but can only be used on numbers. This is apparently to create modularisation, which I don't get, but okay. Sure.
Number Properties
I was going to stop at Number Methods, but Number Properties is pretty short, so what the hell. Get it all out of the way. Plus, it's all a lot of heavy maths stuff, so I'm going to kinda skim through it.
You can't use number properties on variables, because you'll just get undefined.
EPSILON
Number.EPSILON is the difference between the smallest floating point number greater than 1 and 1.
I don't know how 2.220446049250313e-16 is the smallest floating point number greater than 1, but okay. Sure.
MAX_VALUE
Number.MAX_VALUE is the largest possible number in JavaScript.
It is 1.7976931348623157e+308
Yes, that is 308.
Wait, I have to do it. I can't stop myself.
17,976,931,348,623,157,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000
That's one big number.
MIN_VALUE
Number.MIN_VALUE gives you the opposite. Which is 5e-324. And what the hell, let's make a ridiculous number again. Since I can't break it up by commas, I'm breaking it up by lines
0.00000000000000000000000000000000000000000000000000 00000000000000000000000000000000000000000000000000 00000000000000000000000000000000000000000000000000 00000000000000000000000000000000000000000000000000 00000000000000000000000000000000000000000000000000 00000000000000000000000000000000000000000000000000 00000000000000000000005
That's one tiny number.
MIN_SAFE_INTEGER and MAX_SAFE_INTEGERS
These are, unsurprisingly, the minimum safe integer and the maximum safe integer that you can use in JavaScript.
Number.MIN_SAFE_INTEGER returns -9007199254740991.
Number.MAX_SAFE_INTEGER returns 9007199254740991.
POSITIVE_INFINITY and NEGATIVE_INFINITY
Number.POSITIVE_INFINITY is what you get when you divide a positive number by 0 and Number.NEGATIVE_INFINITY is what you get when you divide a negative number by 0. Or you get Infinity and -Infinity.
That's ridiculous. I love it.
NaN
Yep. Number.NaN returns NaN. This also comes up if you try to do arithmetic with a string that doesn't have a number in it.
So, like 100 / "Your Mom".
JavaScript Number Reference.
There is then a link to the complete Number Reference, which is good to have. Yay, numbers.
Day 15 — Results
toString()turns a number into a string. It goesvariable.toString().- You can put a base number in the
()oftoString()to switch to a different base. toExponential()cuts down big numbers by exponential notation. It goesvariable.toExponential().- If you put a number in the
()oftoExponential, it'll round the number to match the amount of numbers you want. toFixed()gives you the number to the amount you fix in the(). It goesvariable.toFixed(Number).toPrecisionlets you match up all your numbers to a fixed amount. It goesvariable.toPrecision(Number).valueOf()returns a number as a number. No, you don't need to use it.Number()takes anything with a number and turns it into a number. It goesNumber(string or number)Number()doesn't work on strings that have spaces, commas, or are a word. You getNaNwith those.Number()also only picks up the first number.Number()turnstrueandfalseinto1and0accordingly.Number()can also be used on dates.new Date(YYYY-MM-DD)gives you the number of milliseconds since 1970-01-01.parseInt()turns strings into whole numbers, but only if the number is first. It goesparseInt(string).parseFloat()also turns strings into numbers, but lets you have decimals. It goesparseFloat().Number.isIntegersaystrueif the number's a whole integer.Number.isFinitesaystrueif the number isn'tInfiniteorNaN.Number.isNaNsaystrueif the number's Not-a-Number.Number.isSafeInteger()saystrueif the number is 16 characters or less.Number.parseFloat()andNumber.parseInt()do the same asparseFloat()orparseInt()but only work on numbers inside the().- Anything that starts with
Number.can only work on a number. No strings here. Number.EPILSONreturns the difference between the smallest floating point number greater than 1 and 1.Number.MAX_VALUEreturns the largest possible number in JavaScript.Number.MIN_VALUEreturns the smallest possible number in JavaScript.Number.MIN_SAFE_INTEGERreturns the smallest safe integer you can have in JavaScript.Number.MAX_SAFE_INTEGERreturns the largest safe integer you can have in JavaScript.Number.POSITIVE_INFINITYreturnsInfinity(like when you divide a positive number by 0).Number.NEGATIVE.INFINITYreturns-Infinity(like when you divide a negative number by 0).Number.NaNreturnsNaN(like when you divide a number by a word).
Tomorrow, it's Bitwise and BigInt. Because I think those are definitely going to fry my brain.
Today's Sticker

I think she came in a Shifty Thrifting sticker club envelope, but I can't remember more than that. She is very large, and I think she might glow in the dark, based on how the texture feels.