ECMAScript Cookbook

ECMAScript Cookbook

By : Ross Harrison

Buy this Book

ECMAScript Cookbook

By: Ross Harrison

Buy this Book

Overview of this book

ECMAScript Cookbook follows a modular approach with independent recipes covering different feature sets and specifications of ECMAScript to help you become an efficient programmer. This book starts off with organizing your JavaScript applications as well as delivering those applications to modem and legacy systems. You will get acquainted with features of ECMAScript 8 such as async, SharedArrayBuffers, and Atomic operations that enhance asynchronous and parallel operations. In addition to this, this book will introduce you to SharedArrayBuffers, which allow web workers to share data directly, and Atomic operations, which help coordinate behavior across the threads. You will also work with OOP and Collections, followed by new functions and methods on the built-in Object and Array types that make common operations more manageable and less error-prone. You will then see how to easily build more sophisticated and expressive program structures with classes and inheritance. In the end, we will cover Sets, Maps, and Symbols, which are the new types introduced in ECMAScript 6 to add new behaviors and allow you to create simple and powerful modules. By the end of the book, you will be able to produce more efficient, expressive, and simpler programs using the new features of ECMAScript. ?

Title Page

Dedication

PacktPub.com

Contributors

Preface

Free Chapter

Building with Modules

Introduction

Installing and configuring - Chrome

Installing and configuring - Firefox

Installing Python, using SimpleHTTPServer to host a local static file server

Creating an HTML page that loads an ECMAScript module

Exporting/importing multiple modules for external use

Renaming imported modules

Nesting modules under a single namespace

Staying Compatible with Legacy Browsers

Introduction

Installing Node.js with NVM – Linux and macOS

Installing Node.js with NVM: Windows

Installing and configuring webpack

Adding fallback script tags to load client bundles

Shimming methods with Babel Polyfill

Supporting new language features with Babel

Using tools to analyze webpack bundles

Working with Promises

Introduction

Creating and waiting for Promises

Resolving Promise results

Rejecting Promise errors

Chaining Promises

Starting a Promise chain with Promise.resolve

Using Promise.all to resolve multiple promises

Handling errors with Promise.catch

Simulating finally with the promise API

Working with async/await and Functions

Introduction

Creating promises with an async function

Awaiting the result of async functions

Using async results in a Promise chain

Awaiting multiple results in a series

Awaiting multiple results concurrently

Using Promise.all to collect an array of async results

Handling errors when awaiting an async function

Handling errors thrown inside of Promise.all

Using finally to ensure an operation is performed

Web Workers, Shared Memory, and Atomics

Introduction

Enabling SharedArrayBuffers in Firefox

Enabling SharedArrayBuffers in Chrome

Performing work on separate threads with Web Workers

Sending messages to and from Web Workers

Sending data to a Web Worker

Stopping workers with terminate

Creating SharedArrayBuffer

Sending SharedArrayBuffer to a Web Worker

Reading SharedArray from multiple Web Workers

Using Atomics to coordinate the use of shared memory

Using promises to provide a simple interface for a worker

Plain Objects

Introduction

Using Object.assign to add properties to an object

Using Object.entries to get iterable property-name pairs

Using Object.is to compare two values

Defining function properties as methods on a plain object

Defining read-only props with Object.defineProperty

Overriding read-only props with Object.defineProperty

Creating a non-enumerable property with Object.defineProperty

Creating an object using object structuring

Picking values from an object using destructuring

Using a spread operator to combine objects

Creating Classes

Introduction

Creating a new class

Assigning properties with constructor arguments

Defining methods on a class

Checking instance type with instanceOf

Using getters to create read-only properties

Using setters to encapsulate values

Using static methods to work with all instances

Inheritance and Composition

Introduction

Extending a class

Assigning additional properties with constructor arguments

Overriding parent class instance methods

Overriding parent class static methods

Calling super methods

Using composition rather than inheritance to add behavior

Using mix-ins to add behavior

Passing a class as an argument

Checking class inheritance with Object.getPrototypeOf

Using throw to simulate abstract classes

Larger Structures with Design Patterns

Introduction

Defining steps with template functions

Assembling customized instances with builders

Replicating instances with factories

Processing a structure with the visitor pattern

Using a singleton to manage instances

Modifying an existing design pattern to fit different use cases

Combining existing design patterns to fit different use cases

Working with Arrays

Introduction

Using Array#find and Array#filter to find values in an array

Using Array#slice to get a subset of the array

Using Array#every and Array#some to test array values

Using Array.map to produce values

Using Array.reduce to transform data

Extracting array members with destructuring

Getting the head and tail of array using the rest operator

Combining arrays with the spread operator

Working with Maps and Symbols

Introduction

Using Symbol to create a local instance

Using Symbol.for to create a global instance

Using Symbol to simulate enums

Setting and deleting entries from Map

Creating a Map from the existing data

Creating a class that wraps Map to work with specific complex types

Setting and deleting entries from WeakMap

Creating a WeakMap from existing data

Creating a class that uses WeakMap to work with specific complex types

Working with Sets

Introduction

Adding and deleting items from a Set

Creating a Set from existing data

Adding and deleting items from WeakSet

Creating a WeakSet from existing data

Finding the union of two sets

Finding the intersection of two sets

Finding the difference between two sets

Creating a class that wraps a Set to work with more complex types

Other Books You May Enjoy

Leave a review - let other readers know what you think

Index

Customer Reviews

5 star

4 star

3 star

2 star

1 star

Renaming imported modules

Modules allow more flexibility in organizing code. This allows for a shorter, more contextual name. For example, in the previous recipe, we named a function launch instead of something more verbose such as launchRocket. This helps keep our code more readable, but it also means that different modules can export members that use the same name.

In this recipe, we'll rename imports in order to avoid these namespace collisions.

Getting ready

We'll be reusing the code from the previous recipe (Exporting/importing multiple modules for external use). The changes from the previous files will be highlighted.

How to do it...

Copy the folder created for the previous recipe into a new directory.
Navigate to that directory with your command-line application and start the Python server.

Rename rocket.js to saturn-v.js, add the name of the rocket to the log statements, and update the main.js import statement:

// main.js 
import name, { launch, COUNT_DOWN_DURATION } from './saturn-v.js'; 
 
export function main () { 
  console.log('This is a "%s" rocket', name); 
  console.log('It will launch in  "%d" seconds.', COUNT_DOWN_DURATION); 
  launch(); 
} 
// saturn-v.js 
export function launch () { 
  console.log(`Launching %s in ${COUNT_DOWN_DURATION}`, name); 
  launchSequence(); 
} 
 
function launchSequence () { 
  // . . .  
      console.log(%shas LIFTOFF!!!
', name); // . . . }

Copy saturn-v.js to a new file named falcon-heavy.js and change the default export value and the COUNT_DOWN_DURATION:

export default name = "Falcon Heavy";export const COUNT_DOWN_DURATION = 5;

Import the falcon module into main.js. Rename the imported members to avoid conflicts and launch the falcon rocket as well:

import rocketName, { launch, COUNT_DOWN_DURATION } from './saturn-v.js'; 
import falconName, { launch as falconLaunch, COUNT_DOWN_DURATION as falconCount } from './falcon-heavy.js'; 
 
export function main () { 
  console.log('This is a "%s" rocket', rocketName); 
  console.log('It will launch in  "%d" seconds.', COUNT_DOWN_DURATION); 
  launch(); 
   
  console.log('This is a "%s" rocket', falconName);  console.log('It will launch in  "%d" seconds.', falconCount);  falconLaunch(); 
}

Open index.html in your browser and you should see the following output:

How it works...

When we duplicated the saturn-v.js file to and imported the members from falcon-heavy.js, we had a potential namespace conflict. Both files export members named COUNT_DOWN_DURATION and launch. But using the as keyword, we renamed those members in order to avoid that conflict. Now the importing main.js file can use both sets of members without issue.

Renaming members can also be helpful to adding context. For example, it might be useful to rename the launch as launchRocket even if there is no conflict. This give the importing module additional context, and makes the code a bit clearer.

ECMAScript Cookbook

By : Ross Harrison

ECMAScript Cookbook

By: Ross Harrison

Overview of this book

Related Content you might be interested in

Current Title:

ECMAScript Cookbook

Learn ECMAScript

Renaming imported modules

Getting ready

How to do it...

How it works...