Learn ECMAScript

Narayan Prusty, MEHUL MOHAN

• Publisher: Packt Publishing
• Year: 2018
• ISBN:
  9781788629621
• Edition: 2
• Topic: Informatica
• Subtopic: Sviluppo web

Get up and running with all the new features of ECMAScript and explore new ways of coding with JavaScript.

Key Features

• Grasp the latest features of ECMAScript and the best way to use it in production code
• Learn newly added native APIs to JS Engine and perform tasks efficiently with a cleaner code base
• Understand the more complex sides of JavaScript such as the inheritance model, low-level memory management, multithreaded environments, and web workers

Book Description

Learn ECMAScript explores implementation of the latest ECMAScript features to add to your developer toolbox, helping you to progress to an advanced level. Learn to add 1 to a variable andsafely access shared memory data within multiple threads to avoid race conditions.

You'll start the book by building on your existing knowledge of JavaScript, covering performing arithmetic operations, using arrow functions and dealing with closures. Next, you will grasp the most commonly used ECMAScript skills such as reflection, proxies, and classes. Furthermore, you'll learn modularizing the JS code base, implementing JS on the web and how the modern HTML5 + JS APIs provide power to developers on the web. Finally, you will learn the deeper parts of the language, which include making JavaScript multithreaded with dedicated and shared web workers, memory management, shared memory, and atomics. It doesn't end here; this book is 100% compatible with ES.Next.

By the end of this book, you'll have fully mastered all the features of ECMAScript!

What you will learn

• Implement methods associated with objects as per the latest ECMAScript specification
• Make use of the latest features of ECMAScript
• Make use of many new APIs in HTML5 and modern JavaScript implementation
• Use SharedArrayBuffers for superfast concurrent and parallel programming
• Perform asynchronous programming with JavaScript
• Implement the best ways and practices to perform modular programming in JavaScript

Who this book is for

This book is for web developers who have some basic programming knowledge and want to learn to write cleaner code with the power of ECMAScript.

Knowing Your Library

ES6/ES7/ES8 has added lots of new properties and methods to built-in JavaScript objects. These new functionalities aim to help developers avoid using hacks and error-prone techniques to do various operations related to numbers, strings, and arrays.

From the last chapter, you now know a decent amount of background details about JavaScript, how it works, its fundamentals, and basic stuff such as hoisting, scoping variables, and immutability. Now let's move on and take a look at some topics which you'll end up using practically all the time in your code.

In this chapter, we'll cover:

• The new properties and methods of the Number, Object, Math, and Array objects
• Representing numeric constants as binary or octal
• Creating multiline strings and the new methods of the String object
• Maps and sets
• Using array buffers and typed arrays
• How to iterate properly over arrays using some built-in methods
• String padding, and more!

Working with numbers

ES6, ES2016 (ES7), and ES2017 (ES8) bring new ways of creating numbers and new properties to the Number object to make working with numbers easier. The Number object was enhanced greatly in ES6 to make it easier to create mathematically rich applications and prevent the common misconceptions that caused the errors.

The binary notation

Earlier, there was no native way to represent numeric constants as binary. But now, you can prefix numeric constants using the 0b token to make JavaScript interpret them as binary.
Here is an example:

let a = 0b00001111;
let b = 15;
console.log(a === b);
console.log(a);

The output is as follows:

true
15

Here, 0b00001111 is a binary representation of 15, base 10 decimal.

The octal notation

The octal notation is a number system where we use only eight digits, that is, from 0 to 7. You can represent a number in octal format with JavaScript if you like.

Earlier, to represent a numeric constant as octal, we needed to prefix the numeric constant using 0. For example, take a look at the following:

const a = 017;
const b = 15;
console.log(a === b);
console.log(a);

The output is as follows:

true
15

But often, programmers new to JavaScript, get confused with octal representations and decimal numbers with 0 at the front. For example, they think 017 is the same as 17. Therefore, to remove this confusion, JavaScript now allows us to prefix numeric constants using 00 to make JavaScript interpret them as octal.
Here is an example to demonstrate this:

const a = 0017;
const b = 15;
console.log(a === b);
console.log(a);

The output is as follows:

true
15

The Number.isInteger(number) method

JavaScript numbers are stored as 64-bit, floating-point numbers. So integers in JavaScript are floating-point numbers without a decimal fraction or a decimal fraction with all 0's.

In ES5, there was no built-in way to check whether a number is an integer or not. There exists a new method to the Number object called isInteger(), which takes a number and returns true or false, depending on whether the number is an integer or not.
Here is an example:

let a = 17.0;
let b = 1.2;
console.log(Number.isInteger(a));
console.log(Number.isInteger(b));

The output is as follows:

true
false

The Number.isNaN(value) method

The Number.isNaN function returns true if and only if the value equals NaN. Otherwise, in every other case, it returns false. That means it will not try to typecast something which is not a number, to a number (which usually results in NaN being returned).

Check the following example:

let a = "NaN";
let b = NaN;
let c = "hello";
let d = 12;
console.log(Number.isNaN(a)); // false
console.log(Number.isNaN(b)); // true
console.log(Number.isNaN(c)); // false
console.log(Number.isNaN(d)); // false

Here you can see that the Number.isNaN() method returns true only if the passed value is exactly NaN.

You might ask, why not use == or the === operator instead of the Number.isNaN(value) method? The NaN value is the only value that is not equal to itself, that is, the expression NaN==NaN or NaN===NaN will return false.

If you declare x = NaN, then x is not equal to itself!

isNaN versus Number.isNaN

To me, a method called isNaN should intuitively return false only on numbers and true on everything else. That is exactly what the isNaN() global method does. However, if you're looking to compare a value to NaN (which you cannot do with === or ==), then Number.isNaN is your choice.

For example:

isNaN(' '); // false => because Number(' ') is equal to 0 (a number)
isNaN(true); // false => because Number(true) is equal to 1 (a number)

In short, isNaN also tries to perform type conversion. That is why some developers consider it broken.

The Number.isFinite(number) method

The global isFinite() function takes a value and checks whether it's a finite number or not. But unfortunately, it also returns true for values that convert to a Number type.

The Number.isFinite() method resolves the issue of the window.isFinite() function. Here is an example to demonstrate this:

console.log(isFinite(10)); // true 
console.log(isFinite(NaN)); // false
console.log(isFinite(null)); // true
console.log(isFinite([])); // true
console.log(Number.isFinite(10)); // true
console.log(Number.isFinite(NaN)); // false
console.log(Number.isFinite(null)); // false
console.log(Number.isFinite([])); // false

The Number.isSafeInteger(number) method

JavaScript numbers are stored as 64-bit floating-point numbers, following the international IEEE 754 standard. This format stores numbers in 64 bits, where the number (the fraction) is stored in 0 to 51 bits, the exponent in 52 to 62 bits, and the sign in the last bi...