Book Image

Learn ECMAScript - Second Edition

By : MEHUL MOHAN, Narayan Prusty
Book Image

Learn ECMAScript - Second Edition

By: MEHUL MOHAN, Narayan Prusty

Overview of this book

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!
Table of Contents (18 chapters)
Title Page
PacktPub.com
Contributors
Preface
Index

Enhanced object literals


Once, JavaScript required developers to write complete function names, property names, even when the function name / property name values matched each other (example: var a = { obj: obj }). However, ES6/ES7/ES8 and beyond relaxes this and allows the minification and readability of code in a number of ways. Let us see how.

Defining properties

ES6 brought in a shorter syntax for assigning object properties to the values of variables that have the same name as the properties. Traditionally, you would've done this:

var x = 1, y = 2;
var object = {
 x: x,
 y: y 
};
console.log(object.x); //output "1"

But now, you can do it this way:

let x = 1, y = 2;
let object = { x, y };
console.log(object.x); //output "1"

Defining methods

ES6 onwards provides a new syntax for defining the methods on an object. The following example demonstrates the new syntax:

let object = {
    myFunction(){
        console.log("Hello World!!!"); //Output "Hello World!!!"
    }
}
object.myFunction();

This concise function allows the use of super in them, whereas traditional object methods don't allow the use of super. We will learn more about this later in the book.

Computed property names

Property names that are evaluated during runtime are called computed property names. An expression is usually resolved to find the property name dynamically. Computed properties were once defined in this way:

var object = {};
object["first"+"Name"] = "Eden";//"firstName" is the property name
//extract
console.log(object["first"+"Name"]); //Output "Eden"

Here, after creating the object, we attach the properties to the object. But in ES6, we can add the properties with the computed name while creating the object. The following example demonstrates this:

let object = {
["first" + "Name"]: "Eden",
};
//extract
console.log(object["first" + "Name"]); //Output "Eden"