loading...

JavaScript Numbers

ziizium profile image Habdul Hazeez ・3 min read

FrontEnd Development Zero to Hero (67 Part Series)

1) FrontEnd Development: Zero to Hero 2) What is the Internet 3 ... 65 3) What is the Web 4) Web Browsers 5) Tools for Web Development 6) Introduction to HTML 7) History of HTML 8) The HTML specification 9) HTML Elements and Tags 10) Replaced Element and Void Element 11) Writing Accessible HTML 12) Validating HTML documents 13) HTML Resources and Reference 14) Introduction to CSS 15) History of CSS 16) The CSS Specification 17) CSS Properties 18) CSS Selectors 19) CSS Units 20) CSS Specificity 21) The CSS Cascade 22) CSS Inheritance 23) The CSS Box model 24) CSS Margin Collapse 25) CSS Positioning 26) CSS z-index 27) CSS colors 28) CSS Backgrounds 29) CSS Variables 30) CSS Floats 31) CSS Block Formatting Context 32) CSS Flexbox part 1 33) CSS Flexbox part 2 34) CSS Grid part 1 35) CSS Grid part 2 36) CSS Media Queries 37) CSS Typography 38) CSS Animations and Transitions 39) CSS Naming conventions 40) Writing maintainable CSS 41) CSS References and Resource 42) Introduction to JavaScript 43) History of JavaScript 44) The EcmaScript specification 45) Introduction to programming 46) JavaScript Variables 47) JavaScript Arrays 48) JavaScript Objects 49) JavaScript Numbers 50) JavaScript Conditionals 51) JavaScript Loops 52) JavaScript Functions 53) The Document Object Model 54) Introduction to Ajax 55) JavaScript References and Resource 56) Introduction to Web Design 57) History of web design 58) Site Layouts in CSS 59) Introduction to Responsive web design 60) Introduction to Progressive Enhancement 61) Introduction to User Interface design 62) Introduction to user experience design 63) Introduction to Web accessibility and usability 64) Introduction to Color theory 65) Web design References and resource 66) Series final project 67) Building your career as a developer

Programmer or not, am pretty sure you've encountered numbers before. I mean, numbers are everywhere from economics to physics and even in nature.

It is quiet easy to get started with numbers in JavaScript but, before long you'll come to the fact that numbers in JavaScript can be really weird . If you are familiar with the behavior of numbers in some programming languages this won't come as a surprise to you.

All screenshots are from Firefox 71.0 and its Developer Tools. One particular feature in Firefox 71.0 that's worthy of mention is the multi-line code editor in the console.


Every computation performed by a computer program will involve numbers directly or indirectly. Directly, if you are doing some calculations and indirectly, because all high level programming code are converted to machine code which are numbers (0's and 1's).

You might not deal with number's often but it is an huge advantage if you know how they work in JavaScript most especially floating point numbers.

JavaScript represents numbers using the 64-bit floating-point format defined by the IEEE 754 standard. Which means it can represent numbers as large as ±1.7976931348623157 × 10308 and as small as ±5 × 10−324.

When a number appears directly in a JavaScript program, it’s called a numeric literal.

Just like regular math, you can perform calculations in JavaScript using popular math operators like +, - , / and % (modulus).

Lets play with some code.

// addition
console.log(1 + 1);

// multiplication
console.log(2 * 3);

// division
console.log(4 / 2);

// modulus or remainder
console.log(2 % 2);

// exponential operator introduced in
// EcmaScript 2016 (ES7)
console.log(2 ** 2);

// exponential calculation using the Math.pow()
// function, this is similar to the ** (exponential operator)
// introduced in EcmaScript 2016 (ES7)
console.log(Math.pow(2,2));

The code when executed in the console:

Numbers in JavaScript

The code examples above are example of numeric literals.

Now, let's have a look at floating point numbers.

/**
  * Basic calculation with floating point numbers
  */

// addition
console.log(0.1 + 1.2);

// multiplication
console.log(2.2 * 3.12);

// division
console.log(4.1 / 2.08);

// modulus or remainder
console.log(2.0 % 1.2);

// exponential operator introduced in
// EcmaScript 2016 (ES7)
console.log(2.2 ** 2);

// exponential calculation using the Math.pow()
// function, this is similar to the ** (exponential operator)
// introduced in EcmaScript 2016 (ES7)
console.log(Math.pow(0.2,2));

The code when executed in the console:

Numbers in JavaScript

I mentioned earlier that JavaScript numbers are weird, well it has to do with calculations and comparisons involving floating point numbers. Take a look at the following example.

0.1 + 0.1 == 0.2;

// Expected output: true

When executed in the console:

Numbers in JavaScript

The next calculation might surprise you.

0.1 + 0.2 == 0.3

// Expected output: ?

When executed in the console:

Numbers in JavaScript

Why is this? Well that's because numbers in JavaScript are defined by the IEEE 754 standard.

The last code execution evaluated to false because 0.1 + 0.2 is actually 0.30000000000000004 not 0.3. You can confirm this in the console.

Numbers in JavaScript

Yeah, i know this is weird. There is even a website dedicated to this specific number 0.30000000000000004. The website is https://0.30000000000000004.com.

You can visit the site for more information about floating point numbers.

Numbers can be made negative by adding a negative sign (-) before the number.

Negative numbers in JavaScript

Division by zero is not an error in JavaScript it simply returns Infinity or negative infinity (-Infinity).

2/0

// Expected output: infinity

When executed in the console:

Numbers in JavaScript

There is one exception however, zero divided by zero does not have a well-defined value and the result of this operation is the special not-a-number value, printed as NaN.

0/0

// Expected output: NaN

When executed in the console:

Numbers in JavaScript

NaN also arises if you attempt to divide Infinity by Infinity or take the square root of a negative number or use arithmetic operators with non-numeric operands that cannot be converted to numbers.

There are also hexadecimal numbers and octal numbers in JavaScript. They are not included in this post for the sake of simplicity.

Up next, Loops.

FrontEnd Development Zero to Hero (67 Part Series)

1) FrontEnd Development: Zero to Hero 2) What is the Internet 3 ... 65 3) What is the Web 4) Web Browsers 5) Tools for Web Development 6) Introduction to HTML 7) History of HTML 8) The HTML specification 9) HTML Elements and Tags 10) Replaced Element and Void Element 11) Writing Accessible HTML 12) Validating HTML documents 13) HTML Resources and Reference 14) Introduction to CSS 15) History of CSS 16) The CSS Specification 17) CSS Properties 18) CSS Selectors 19) CSS Units 20) CSS Specificity 21) The CSS Cascade 22) CSS Inheritance 23) The CSS Box model 24) CSS Margin Collapse 25) CSS Positioning 26) CSS z-index 27) CSS colors 28) CSS Backgrounds 29) CSS Variables 30) CSS Floats 31) CSS Block Formatting Context 32) CSS Flexbox part 1 33) CSS Flexbox part 2 34) CSS Grid part 1 35) CSS Grid part 2 36) CSS Media Queries 37) CSS Typography 38) CSS Animations and Transitions 39) CSS Naming conventions 40) Writing maintainable CSS 41) CSS References and Resource 42) Introduction to JavaScript 43) History of JavaScript 44) The EcmaScript specification 45) Introduction to programming 46) JavaScript Variables 47) JavaScript Arrays 48) JavaScript Objects 49) JavaScript Numbers 50) JavaScript Conditionals 51) JavaScript Loops 52) JavaScript Functions 53) The Document Object Model 54) Introduction to Ajax 55) JavaScript References and Resource 56) Introduction to Web Design 57) History of web design 58) Site Layouts in CSS 59) Introduction to Responsive web design 60) Introduction to Progressive Enhancement 61) Introduction to User Interface design 62) Introduction to user experience design 63) Introduction to Web accessibility and usability 64) Introduction to Color theory 65) Web design References and resource 66) Series final project 67) Building your career as a developer

Posted on by:

ziizium profile

Habdul Hazeez

@ziizium

I teach and write code with interests in Web Development, Computer Security, and Artificial Intelligence.

Discussion

markdown guide