Javascript Fundamentals for ES6

Table of Contents

• Overview
• Variables and Parameters
• Classes
• Functional Programming
• Built-In Objects
• Asynchronous Development in ES6
• Objects in ES6
• Modules
• Using ES6 Today

Overview

Javascript is an implementation of ECMAScript. The ES6 specification that defines the language was in draft status, with release in June 2015.

ES6 introduces an extensive amount of new syntax to the language. The last time the specification tried to add this broadly to the language was with ECMAScript 4, but that project was abandoned.

Some modifications were made with ECMAScript 5 / ES2009.

Try It Yourself

You can use Plunker to test ES6 code. You can also do the same directly in the Chrome JavaScript console using COMMAND + OPTION + J.

You can also go to jsconsole

Compatibility

• ES6 Compatibility Table

The Repository

• ES6FundamentalsCourseFiles

Get Started

Variables and Parameters

Let

Let allows us to define variables. We’ve always done this with the var keyword. However var has limitations when it comes to scope.

With var there is only global scope, and function scope. Global scope is where a variable is placed globally. Functional scope limits the scope of the variable within the function.

However there isn’t block scope with var. In this code below, it looks like var x = 3; might be scoped only to the block it’s defined in (within the if statement), but this isn’t the case.

var doWork = function(flag) {
  if (flag) {
    var x = 3
  }
  return x
}

This variable of x is actually made available throughout the function.

Let provides us with true block scoping.

var doWork = function(flag) {
  if (flag) {
    let x = 3
  }
  return x
}

This code using let will return an error because x is not defined, even if the flag argument is true.

describe("how let works" function(){
  it("will provide block scoping, unlike var", function(){
    var doWork = function(flag) {
      if(flag) {
        var x = 3;
      }
      return x;
    };

    var result = doWork(true);
    expect(result).toBe(3);
  };
});

Const

Rest Parameters

Default Parameters

Destructuring Assignments

Classes

We’ve always had the ability to create objects in JavaScript with properties and methods, however the new class syntax allows us to do that in familiar way, especially for those that have used Python, Java, C++, or Ruby.

A class defines a blueprint for constructing objects, includes the pieces that define the state, construction logic, and even setup inheritance relationships between objects.

Functional Programming

There are some new functional programming capabilities with JavaScript. It has always been a very functional language.

Arrow Function

Arrow functions allow you to use a terse syntax to define functions. In many cases you do not need a return statement or curly braces.

let add = (x, y) => x + y

expect(add(3, 5)).toBe(8)

let numbers = function*(start, end) {
  for (let i = start; i <= end; i++) {
    console.log(i)
    yield i
  }
}

Iterators

Generator Functions

Generator functions can create iterators.

List Comprehension Syntax

Built-In Objects

Set and Map collections

New data structures we can use in JavaScript, have memory friendly counterparts: the WeakMap and the WeakSet.

New APIs

Objects, arrays, numbers, and more.

Asynchronous Development in ES6

Promises, an object that will promise to give you the result of some asynchronous operation in the future. There have been unofficial standards for the Promise API, but now it has been standardized.

Objects in ES6

New APIs, new methods. New Metaprogramming capabilities.

Modules

JavaScript has lacked a modules system, where unofficial community standards have been in place such as CommonJs modules, or the Asynchronous Module Definition (AMD) standard.

Using ES6 Today

How people are using ES6 today. Many teams are using tools like Traceur to transpile ES6 code to ES5 code.