Learning Objectives
 Declaring variables in JavaScript
 Naming variables
 Operations, Operators and Operands in JavaScript
 Operator Precedence
 Using the + Operator with Numbers and Strings
 Strict and Abstract Equality Operators
 The increment++ and decrement– operators
 The assignment operators
Live Session
Watch the following 3 parts of the recording of the live session (21/10/2020) that introduces JavaScript:
Total duration: 175 minutes
Part 1/3 – Duration: 68 minutes
Part 2/3 – Duration: 90 minutes
Part 3/3 – Duration: 14 minutes
Numbers
Computers initially were humans calculating numbers and gradually evolved into the digital machines we use every single day. Nowadays, we can hardly thing of a computer program that does not involve numbers and numeric calculations. Calculating tax revenue, stock prices or the movement of a spaceship in a computer game, all involve work with numbers.
JavaScript is able to operate on any type of number (integers, floating point numbers, negative numbers, fractions, etc.) and also provides a multitude of useful Math constants (PI, E, etc.) and methods to work on these numbers: calculating the sine/cosine or the square root of a number, rounding a floating point number or getting a random number and much, much more.
In order to comprehend how numbers work and are handled by JavaScript, you must thoroughly study the following Numbers in JavaScript section and all subsequent resources and implement the concepts in your web pages.
The following section comes from the book You Don't Know JS
by Kyle Simpson. It is one of the best and most detailed guides to the Number
type in JavaScript.
Numbers in JavaScript
JavaScript has just one numeric type: number
. This type includes both "integer" values and fractional decimal numbers. I say "integer" in quotes because it’s long been a criticism of JS that there are not true integers, as there are in other languages. That may change at some point in the future, but for now, we just have number
s for everything.
So, in JS, an "integer" is just a value that has no fractional decimal value. That is, 42.0
is as much an "integer" as 42
.
Like most modern languages, including practically all scripting languages, the implementation of JavaScript’s number
s is based on the "IEEE 754" standard, often called "floatingpoint." JavaScript specifically uses the "double precision" format (aka "64bit binary") of the standard.
There are many great writeups on the Web about the nittygritty details of how binary floatingpoint numbers are stored in memory, and the implications of those choices. Because understanding bit patterns in memory is not strictly necessary to understand how to correctly use number
s in JS, we’ll leave it as an exercise for the interested reader if you’d like to dig further into IEEE 754 details.
Numeric Syntax
Number literals are expressed in JavaScript generally as base10 decimal literals. For example:
var a = 42;
var b = 42.3;
The leading portion of a decimal value, if 0
, is optional:
var a = 0.42;
var b = .42;
Similarly, the trailing portion (the fractional) of a decimal value after the .
, if 0
, is optional:
var a = 42.0;
var b = 42.;
Warning: 42.
is pretty uncommon, and probably not a great idea if you’re trying to avoid confusion when other people read your code. But it is, nevertheless, valid.
By default, most number
s will be outputted as base10 decimals, with trailing fractional 0
s removed. So:
var a = 42.300;
var b = 42.0;
a; // 42.3
b; // 42
Very large or very small number
s will by default be outputted in exponent form, the same as the output of the toExponential()
method, like:
var a = 5E10;
a; // 50000000000
a.toExponential(); // "5e+10"
var b = a * a;
b; // 2.5e+21
var c = 1 / a;
c; // 2e11
Because number
values can be boxed with the Number
object wrapper (see Chapter 3), number
values can access methods that are built into the Number.prototype
(see Chapter 3). For example, the toFixed(..)
method allows you to specify how many fractional decimal places you’d like the value to be represented with:
var a = 42.59;
a.toFixed( 0 ); // "43"
a.toFixed( 1 ); // "42.6"
a.toFixed( 2 ); // "42.59"
a.toFixed( 3 ); // "42.590"
a.toFixed( 4 ); // "42.5900"
Notice that the output is actually a string
representation of the number
, and that the value is 0
padded on the righthand side if you ask for more decimals than the value holds.
toPrecision(..)
is similar, but specifies how many significant digits should be used to represent the value:
var a = 42.59;
a.toPrecision( 1 ); // "4e+1"
a.toPrecision( 2 ); // "43"
a.toPrecision( 3 ); // "42.6"
a.toPrecision( 4 ); // "42.59"
a.toPrecision( 5 ); // "42.590"
a.toPrecision( 6 ); // "42.5900"
You don’t have to use a variable with the value in it to access these methods; you can access these methods directly on number
literals. But you have to be careful with the .
operator. Since .
is a valid numeric character, it will first be interpreted as part of the number
literal, if possible, instead of being interpreted as a property accessor.
// invalid syntax:
42.toFixed( 3 ); // SyntaxError
// these are all valid:
(42).toFixed( 3 ); // "42.000"
0.42.toFixed( 3 ); // "0.420"
42..toFixed( 3 ); // "42.000"
42.toFixed(3)
is invalid syntax, because the .
is swallowed up as part of the 42.
literal (which is valid — see above!), and so then there’s no .
property operator present to make the .toFixed
access.
42..toFixed(3)
works because the first .
is part of the number
and the second .
is the property operator. But it probably looks strange, and indeed it’s very rare to see something like that in actual JavaScript code. In fact, it’s pretty uncommon to access methods directly on any of the primitive values. Uncommon doesn’t mean bad or wrong.
Note: There are libraries that extend the builtin Number.prototype
(see Chapter 3) to provide extra operations on/with number
s, and so in those cases, it’s perfectly valid to use something like 10..makeItRain()
to set off a 10second money raining animation, or something else silly like that.
This is also technically valid (notice the space):
42 .toFixed(3); // "42.000"
However, with the number
literal specifically, this is particularly confusing coding style and will serve no other purpose but to confuse other developers (and your future self). Avoid it.
number
s can also be specified in exponent form, which is common when representing larger number
s, such as:
var onethousand = 1E3; // means 1 * 10^3
var onemilliononehundredthousand = 1.1E6; // means 1.1 * 10^6
number
literals can also be expressed in other bases, like binary, octal, and hexadecimal.
These formats work in current versions of JavaScript:
0xf3; // hexadecimal for: 243
0Xf3; // ditto
0363; // octal for: 243
Note: Starting with ES6 + strict
mode, the 0363
form of octal literals is no longer allowed (see below for the new form). The 0363
form is still allowed in nonstrict
mode, but you should stop using it anyway, to be futurefriendly (and because you should be using strict
mode by now!).
As of ES6, the following new forms are also valid:
0o363; // octal for: 243
0O363; // ditto
0b11110011; // binary for: 243
0B11110011; // ditto
Please do your fellow developers a favor: never use the 0O363
form. 0
next to capital O
is just asking for confusion. Always use the lowercase predicates 0x
, 0b
, and 0o
.
Small Decimal Values
The most (in)famous side effect of using binary floatingpoint numbers (which, remember, is true of all languages that use IEEE 754 — not just JavaScript as many assume/pretend) is:
0.1 + 0.2 === 0.3; // false
Mathematically, we know that statement should be true
. Why is it false
?
Simply put, the representations for 0.1
and 0.2
in binary floatingpoint are not exact, so when they are added, the result is not exactly 0.3
. It’s really close: 0.30000000000000004
, but if your comparison fails, "close" is irrelevant.
Note: Should JavaScript switch to a different number
implementation that has exact representations for all values? Some think so. There have been many alternatives presented over the years. None of them have been accepted yet, and perhaps never will. As easy as it may seem to just wave a hand and say, "fix that bug already!", it’s not nearly that easy. If it were, it most definitely would have been changed a long time ago.
Now, the question is, if some number
s can’t be trusted to be exact, does that mean we can’t use number
s at all? Of course not.
There are some applications where you need to be more careful, especially when dealing with fractional decimal values. There are also plenty of (maybe most?) applications that only deal with whole numbers ("integers"), and moreover, only deal with numbers in the millions or trillions at maximum. These applications have been, and always will be, perfectly safe to use numeric operations in JS.
What if we did need to compare two number
s, like 0.1 + 0.2
to 0.3
, knowing that the simple equality test fails?
The most commonly accepted practice is to use a tiny "rounding error" value as the tolerance for comparison. This tiny value is often called "machine epsilon," which is commonly 2^52
(2.220446049250313e16
) for the kind of number
s in JavaScript.
As of ES6, Number.EPSILON
is predefined with this tolerance value, so you’d want to use it, but you can safely polyfill the definition for preES6:
if (!Number.EPSILON) {
Number.EPSILON = Math.pow(2,52);
}
We can use this Number.EPSILON
to compare two number
s for "equality" (within the rounding error tolerance):
function numbersCloseEnoughToEqual(n1,n2) {
return Math.abs( n1  n2 ) < Number.EPSILON;
}
var a = 0.1 + 0.2;
var b = 0.3;
numbersCloseEnoughToEqual( a, b ); // true
numbersCloseEnoughToEqual( 0.0000001, 0.0000002 ); // false
The maximum floatingpoint value that can be represented is roughly 1.798e+308
(which is really, really, really huge!), predefined for you as Number.MAX_VALUE
. On the small end, Number.MIN_VALUE
is roughly 5e324
, which isn’t negative but is really close to zero!
Safe Integer Ranges
Because of how number
s are represented, there is a range of "safe" values for the whole number
"integers", and it’s significantly less than Number.MAX_VALUE
.
The maximum integer that can "safely" be represented (that is, there’s a guarantee that the requested value is actually representable unambiguously) is 2^53  1
, which is 9007199254740991
. If you insert your commas, you’ll see that this is just over 9 quadrillion. So that’s pretty darn big for number
s to range up to.
This value is actually automatically predefined in ES6, as Number.MAX_SAFE_INTEGER
. Unsurprisingly, there’s a minimum value, 9007199254740991
, and it’s defined in ES6 as Number.MIN_SAFE_INTEGER
.
The main way that JS programs are confronted with dealing with such large numbers is when dealing with 64bit IDs from databases, etc. 64bit numbers cannot be represented accurately with the number
type, so must be stored in (and transmitted to/from) JavaScript using string
representation.
Numeric operations on such large ID number
values (besides comparison, which will be fine with string
s) aren’t all that common, thankfully. But if you do need to perform math on these very large values, for now you’ll need to use a big number utility. Big numbers may get official support in a future version of JavaScript.
Testing for Integers
To test if a value is an integer, you can use the ES6specified Number.isInteger(..)
:
Number.isInteger( 42 ); // true
Number.isInteger( 42.000 ); // true
Number.isInteger( 42.3 ); // false
To test if a value is a safe integer, use the ES6specified Number.isSafeInteger(..)
:
Number.isSafeInteger( Number.MAX_SAFE_INTEGER ); // true
Number.isSafeInteger( Math.pow( 2, 53 ) ); // false
Number.isSafeInteger( Math.pow( 2, 53 )  1 ); // true
32bit (Signed) Integers
While integers can range up to roughly 9 quadrillion safely (53 bits), there are some numeric operations (like the bitwise operators) that are only defined for 32bit number
s, so the "safe range" for number
s used in that way must be much smaller.
The range then is Math.pow(2,31)
(2147483648
, about 2.1 billion) up to Math.pow(2,31)1
(2147483647
, about +2.1 billion).
To force a number
value in a
to a 32bit signed integer value, use a  0
. This works because the 
bitwise operator only works for 32bit integer values (meaning it can only pay attention to 32 bits and any other bits will be lost). Then, "or’ing" with zero is essentially a noop bitwise speaking.
Note: Certain special values (which we will cover in the next section) such as NaN
and Infinity
are not "32bit safe," in that those values when passed to a bitwise operator will pass through the abstract operation ToInt32
(see Chapter 4) and become simply the +0
value for the purpose of that bitwise operation.
Study Guide
Variables
Variables are pointers to "storage containers" for data in your code. You can think of variables as something close to your contacts in your mobile phone. Each contact list entry contains a name, e.g. Mary. This is your variable name. And each contact list name (variable name) points to a place in the memory of your mobile phone that stores a telephone number or address, e.g. 6985252114.
VARIABLE NAME  POINTER TO  DATA IN MEMORY 

Mary  — Points to –>  6985252114 
Ahmed  — Points to –>  6971234567 
In much the same way, variables in programming languages, are names that point to some memory location in which some kind of data is stored:
var someVariableName = "Just some text.";
// The someVariableName, now points to a place in memory
// where the "Just some text." data is stored and can be retrieved.
Until recently there was only one way to create a variable in JavaScript — the var
statement. But in the newest JavaScript versions we have two more ways — let
and const
.
Take a break and then study the following tutorial about variables from JavaScript.info
that explains variables in detail and also contains a Tasks
section where you can (must) practice all the concepts that you’ve learned.
The estimated reading and practice time for this material is approximately 2 hours.
Here is a list of the concepts you’ll be introduced to through this post:
 What is a variable?
 Constants
 Variable naming and naming things right
 Case sensitivity and reserved names
The above tutorial mentioned this, but it’s important enough to note again:
let
andconst
are both relatively new ways to declare variables in JavaScript. In many tutorials (and code) across the internet you’re likely to encountervar
statements. Don’t let it bother you! There’s nothing inherently wrong withvar
, and in most casesvar
andlet
behave the same way. But sometimes the behavior ofvar
is not what you would expect. Just stick tolet
(andconst
) for now. The precise differences betweenvar
andlet
will be explained later. (Source: The Odin Project)
Practice!
Let’s practice those programming skills with some JavaScript code that runs on an HTML file. Create an HTML file and place the JS code inside the script
tag.
<!DOCTYPE html>
<html>
<head>
<title>Numbers in JavaScript</title>
<meta charset="UTF8"/>
</head>
<body>
<script>
// Your code here:
console.log("Hello, World!")
</script>
</body>
</html>
Save the HTML file in a folder, add the folder in a new VSCode
workspace and launch the web page in the browser using the LiveServer
VSCode extension. By rightclicking on the web page you can select Inspect
or Inspect Element
and be able to watch the output on the Developer Tools
console. The console.log()
command will display any value you place inside the parentheses in the browser’s console and this is a command you’ll be using on a daily basis.
Try to complete the following steps:
Basic Numeric Operations:
 Add 2 numbers together! (just type
console.log(23 + 97)
into your html file)  Add a sequence of 6 different numbers together.
 Print the solution to the following equation:
(4 + 6 + 9) / 77
 answer should be approximately
0.24675
 answer should be approximately
 Let’s use variables!
 Type the following at the top of the script tag:
let a = 10
console.log(a)
should print10
 Try the following:
9 * a
 and this:
let b = 7 * a
(returns undefined) and thenconsole.log(b)
 Type the following at the top of the script tag:
 You should be getting the hang of this by now… try this sequence:
 Declare a constant variable
max
with the value57
 Set another variable
actual
tomax  13
 Set another variable
percentage
toactual / max
 If you type
percentage
in the console and press enter you should see a value like0.7719
 Declare a constant variable
 Can you think of any reallife scenarios where Numbers and the arithmetic operators of JavaScript can be of use? Take the time to implement these scenarios in your code and add them to the web page. Here’s an example to get you started:
Savings Account:

Create a variable named
balance
and assign an amount to it. (Think of this as a bank deposit transaction) 
Create a variable named
yearly_interest
and set the value to0.05
. This amounts for a 5% interest rate on a yearly basis for a savings account. 
Calculate the
balance
after 2 years and also after 4 years. 
Validate your results against these two online calculators: Savings Calculator / Simple Savings Calculator.
Calculate Grade Average:
 Given the grades of students A and B, below, calculate their averages and create as many useful variables as you think:
const studentA_history = 6;
const studentA_math = 7;
const studentA_geography = 5;
const studentA_art = 8;
const studentA_physics = 4;
const studentA_chemistry = 7;
const studentB_history = 4;
const studentB_math = 9;
const studentB_geography = 5;
const studentB_art = 5;
const studentB_physics = 6;
const studentB_chemistry = 4;
More Practice!
How about using JavaScript to calculate the VAT (or some other kind of tax) for a product?
const VAT = 24; // VAT Tax is set to 24%
const smartphone = 300; // Net price
const total = smartphone + ( smartphone * ( VAT / 100 ) ); // Total === net price + VAT
How about using JavaScript to calculate the number of calories burned while walking or any other activity?
How about calculating a woman’s fertile window?
Blood alcohol content anyone?
There is no shortage of (really useful) ideas to implement in JavaScript using Numbers and the arithmetic operators, so let’s get to work!
Additional Resources
Assignment
Click this link and follow the instructions on how to complete and submit this assignment.