Understanding ECMAScript 6

Chapter 1: Block Bindings

ECMAScript 6 introduces block-level scoping options.

Block scopes, also called lexical scopes, are created in the following places:

  • Inside a function
  • Inside a block (indicated by the { and } characters)

let declarations

you can basically replace var with let to declare a variable but limit the variable's scope to only the current block.

let will not redefine an identifier that already exists in the same scope.

const declarations

bindings declared using const are considered constants, meaning their values cannot be changed once set.

attempting to assign a const to a previously defined constant will throw an error in both strict and non-strict modes.

a const declaration prevents modification of the binding, not of the value.

const declarations for objects don't prevent modification of those objects.

when used in a for-in or for-of loop, a const variable behaves similarly to a let variable.

// doesn't cause an error
for (const key in object) {
  ... 
}

Chapter 2: Strings and Regular Expressions

The regular expression u flag

ECMAScript6 defines a u flag (which stands for Unicode) for use in regular expressions.

var pattern = new RegExp(".", "u");

always use the RegExp constructor when you're using the u flag.

methods for identifying substrings

  • includes()
  • startsWith()
  • endsWith()

includes() and startsWith() start the match from that index, and endsWith() starts the match from the length of the string minus the second argument.

ECMAScript6 also adds a repeat() method to strings.

Template Literals

template literals act like regular strings delimited by backticks

let message = `hello world!`;

substitutions are delimited by an opening ${ and a closing } that can have any javascript expression inside.

let messsage = `hello, ${name}`;

a template tag performs a transformation on the template literal and returns the final string value.

let message = tag`hello world`;

using raw values in template literals:

let message = String.raw`multiline\nstring`;

Chapter 3: Functions

ECMAScript6 makes it easier to provide default values for parameters by supplying initializations that are used.

function makeRequest(url, timeout = 2000, callback = function() {}) {
  ...
}

the default value will be used only if there is no argument passed in or if the argument is explicitly passed in as undefined (not null)

a value null is considered valid.

default value of a parameter cannot access any variables declared inside the function body.

rest parameters

a rest parameters is indicated by three dots ...

function pick(object, ...keys) {
    ...
}

rest parameters don't affect a function's length property.

rest parameter must be last.

rest parameters cannot be used in an object literal setter. (setter restricted to a single argument.)

the spread operator

prefix with three dots ...

let values = [25, 50, 75, 100];
console.log(Math.max(...values));

Chapter 4: Expanded Object Functionality

Chapter 5: Destructuring for Easier Data Access

Chapter 6: Symbols and Symbol Properties

Chapter 7: Sets and Maps

Chapter 8: Iterators and Generators

Chapter 9: Introducing JavaScript Classes

Chapter 10: Improved Array Capabilities

Chapter 11: Promises and Asynchronous Programming

Chapter 12: Proxies and the Reflection API

Chapter 13: Encapsulating Code with Modules

Search Blog: