Advanced JavaScript

Speed up web development with the powerful features and benefits of JavaScript

Zachary Shute

• Publisher: Packt Publishing
• Year: 2019
• ISBN:
  9781789803891
• Edition: 1
• Topic: Computer Science
• Subtopic: Programming in JavaScript
• Index: Computer Science

Gain a deeper understanding of JavaScript and apply it to build small applications in backend, frontend, and mobile frameworks.

Key Features

• Explore the new ES6 syntax, the event loop, and asynchronous programming
• Learn the test-driven development approach when building apps
• Master advanced JavaScript concepts to enhance your web developments skill

Book Description

If you are looking for a programming language to develop flexible and efficient applications, JavaScript is an obvious choice. Advanced JavaScript is a hands-on guide that takes you through JavaScript and its many features, one step at a time. You'll begin by learning how to use the new JavaScript syntax in ES6, and then work through the many other features that modern JavaScript has to offer. As you progress through the chapters, you'll use asynchronous programming with callbacks and promises, handle browser events, and perform Document Object Model (DOM) manipulation. You'll also explore various methods of testing JavaScript projects. In the concluding chapters, you'll discover functional programming and learn to use it to build your apps. With this book as your guide, you'll also be able to develop APIs using Node.js and Express, create front-ends using React/Redux, and build mobile apps using React/Expo.

By the end of Advanced JavaScript, you will have explored the features and benefits of JavaScript to build small applications.

What you will learn

• Examine major features in ES6 and implement those features to build applications
• Create promise and callback handlers to work with asynchronous processes
• Develop asynchronous flows using Promise chaining and async/await syntax
• Manipulate the DOM with JavaScript
• Handle JavaScript browser events
• Explore Test Driven Development and build code tests with JavaScript code testing frameworks.
• List the benefits and drawbacks of functional programming compared to other styles
• Construct applications with the Node.js backend framework and the React frontend framework

Who this book is for

This book is designed to target anyone who wants to write JavaScript in a professional environment. We expect the audience to have used JavaScript in some capacity and be familiar with the basic syntax. This book would be good for a tech enthusiast wondering when to use generators or how to use Promises and Callbacks effectively, or a novice developer who wants to deepen their knowledge on JavaScript and understand TDD.

Chapter 1

Introducing ECMAScript 6

Learning Objectives

By the end of this chapter, you will be able to:

• Define the different scopes in JavaScript and characterize variable declaration
• Simplify JavaScript object definitions
• Destructure objects and arrays, and build classes and modules
• Transpile JavaScript for compatibility
• Compose iterators and generators

In this chapter, you'll be learning how to use the new syntax and concepts of ECMAScript.

Introduction

JavaScript, often abbreviated as JS, is a programming language designed to allow the programmer to build interactive web applications. JavaScript is one of the backbones of web development, along with HTML and CSS. Nearly every major website, including Google, Facebook, and Netflix, make heavy use of JavaScript. JS was first created for the Netscape web browser in 1995. The first prototype of JavaScript was written by Brendan Eich in just a mere 10 days. Since its creation, JavaScript has become one of the most common programming languages in use today.

In this book, we will deepen your understanding of the core of JavaScript and its advanced functionality. We will cover the new features that have been introduced in the ECMAScript standard, JavaScript's asynchronous programming nature, DOM and HTML event interaction with JavaScript, JavaScript's functional programming paradigms, testing JavaScript code, and the JavaScript development environment. With the knowledge gained from this book, you will be ready to begin using JavaScript in a professional setting to build powerful web applications.

Beginning with ECMAScript

ECMAScript is a scripting language specification standardized by ECMA International. It was created to standardize JavaScript in an attempt to allow for independent and compatible implementations. ECMAScript 6, or ES6, was originally released in 2015 and has gone through several minor updates since then.

Note

You may refer to the following link for more information about ECMA specification:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Language_Resources.

Understanding Scope

In computer science, scope is the region of a computer program where the binding or association of a name to an entity, such as a variable or function, is valid. JavaScript has the following two distinct types of scope:

• Function scope
• Block scope

Until ES6, function scope was the only form of scope in JavaScript; all variable and function declarations followed function scope rules. Block scope was introduced in ES6 and is used only by the variables declared with the new variable declaration keywords let and const. These keywords are discussed in detail in the Declaring Variables section.

Function Scope

Function scope in JavaScript is created inside functions. When a function is declared, a new scope block is created inside the body of that function. Variables that are declared inside the new function scope cannot be accessed from the parent scope; however, the function scope has access to variables in the parent scope.

To create a variable with function scope, we must declare the variable with the var keyword. For example:

var example = 5;

The following snippet provides an example of function scope:

var example = 5;

function test() {

var testVariable = 10;

console.log( example ); // Expect output: 5

console.log( testVariable ); // Expect output: 10

}

test();

console.log( testVariable ); // Expect reference error

Snippet 1.1: Function Scope

Parent scope is simply the scope of the section of code that the function was defined in. This is usually the global scope; however, in some cases, it may be useful to define a function inside a function. In that case, the nested function's parent scope would be the function in which it is defined. In the preceding snippet, the function scope is the scope that was created inside the function test. The parent scope is the global scope, that is, where the function is defined.

Note

Parent scope is the block of code, which the function is defined in. It is not the block of code in which the function is called.

Function Scope Hoisting

When a variable is created with function scope, it's declaration automatically gets hoisted to the top of the scope. Hoisting means that the interpreter moves the instantiation of an entity to the top of the scope it was declared in, regardless of where in the scope block it is defined. Functions and variables declared using var are hoisted in JavaScript; that is, a function or a variable can be used before it has been declared. The following code demonstrates this, as follows:

example = 5; // Assign value

console.log( example ); // Expect output: 5

var example; // Declare variable

Snippet 1.2: Function Scope Hoisting

Note

Since a hoisted variable that's been declared with var can be used before it is declared, we have to be careful to not use that variable before it has been assigned a value. If a variable is accessed before it has been assigned a value, it will return the value as undefined, which can cause problems, especially if variables are used in the global scope.

Block Scope

A new block scope in JavaScript is created with curly braces ({}). A pair of curly braces can be placed anywhere in the code to define a new scope block. If statements, loops, functions, and any other curly brace pairs will have their own block scope. This includes floating curly brace pairs not associated with a keyword (if, for, etc). The code in the following snippet is an example of the block scope rules:

// Top level scope

function scopeExample() {

// Scope block 1

for ( let i = 0; i < 10; i++ ){ /* Scope block 2 */ }

if ( true ) { /* Scope block 3 */ } else { /* Scope block 4 */ }

// Braces without keywords create scope blocks

{ /* Scope block 5 */ }

// Scope block 1

}

// Top level scope

Snippet 1.3: Block Scope

Variables declared with the keywords let and const have block scope. When a variable is declared with block scope, it does NOT have the same variable hoisting as variables that are created in function scope. Block scoped variables are not hoisted to the top of the scope and therefore cannot be accessed until they are declared. This means that variables that are created with block scope are subject to the Temporal Dead Zone (TDZ). The TDZ is the period between when a scope is entered and when a variable is declared. It ends when the variable is declared rather than assigned. The following example demonstrates the TDZ:

// console.log( example ); // Would throw ReferenceError

let example;

console.log( example ); // Expected output: undefined

example = 5;

console.log( example ); // Expected output: 5

Snippet 1.4: Temporal Dead Zone

Note

If a variable is acces...