This workshop is important because:
ES6 (ECMAScript6) is the most recent version of JavaScript, and more and more tools are being converted to ES6 every day. Additionally, ES6 added many convenient and useful features to JavaScript. Taking advantage of these will make you a more effective developer.
- Explain the history of ES and JS
- Compare/contrast features of ES5 and ES6
- Explain when to use
var
vslet
vsconst
- Use template literals to interpolate variables and strings
- Use deconstruction to extract values from objects and arrays
- Use default parameters and arrow functions
Before this workshop, developers should already be able to:
- Read and write ES5-style JavaScript, including functions.
- Describe JavaScript scope.
- Explain the meaning of
this
in JavaScript. - For classes: explain constructor functions and prototypes; recognize prototype-based inheritance.
- For
=>
: give an example of a "closure" in JavaScript, and explain what it does.
Today, we are going to be looking at a new way to write Javascript by playing with some of the new features released in ES6.
The JavaScript standard is officially referred to as ECMAScript.
JavaScript is so widely used that any changes would affect the whole web. Because of this, a body known as TC39 or Ecma International formally approves official versions of ECMAScript for release.
Each version contains features or changes to be added to the language. The most recent is ECMAScript6. Most people shorten ECMAScript versions to ES, like 'ES6'.
In short, ECMAScript defines a language, and JavaScript is an implementation of that language.
Complete this awesome visualization of the current state of the JavaScript universe
Condensed timeline:
- 1999 - ES3 released, the first widespread use of the language.
- ES4 never released, largely due to political reasons.
- 2009 - ES5 released, what we've been writing so far in class.
- 2015 - ES6 publishe,d releasing a wide set of new features and syntax.
Many plugins, frameworks, and modules still use ES5 because it can take time to refactor projects and because browser support for the new version of the language is still not quite universal. However, the new syntax and features of ES6 are increasingly becoming more and more widespread among open-source projects and in the developer world at large. Also, you are very likely to see ES6 in the documentation of some technologies we use in this course.
Today is all about exploring some of the new features of ES6 and getting comfortable with the new syntax.
For more backstory, we recommend checking out this talk from Brendan Eich on what he views as the future of JavaScript.
What does the concept of scope refer to in JS?
In short, the notion of which variables are available where.
So far in class, what is the primary way to control scope in JS?
Through the use of functions to create new local scopes.
So far, the primary way to control scope in an application has been through the use of functions:
// es5
var a = 1;
function myFunction() {
a = 2;
console.log(a);
}
console.log(a);
myFunction();
ES6 introduces the concept of block scoping, which allows us to limit the scope
of a variable declared with let
to a given block { ... }
// es6
var a = 1;
{
let a = 2;
console.log(a);
}
console.log(a);
You're more likely to see let
declarations inside an if
or for
block:
//es5
for(var i = 0; i < 10; i++){
console.log(i)
}
console.log("outside loop:", i)
// versus
//es6
for(let j = 0; j < 10; j++){
console.log(j)
}
console.log("outside loop:", j)
//throws an error
let
is great for temporary variables that don't need to last through the entire function.
Unlike with var
, let
or const
will throw an error if you redeclare the same variable within the scope.
ES6 introduces another keyword for declaring variables: const
const
is an identifier for variables that won't be reassigned:
const a = 1;
a = 2;
// Throws an error in chrome
const a = 2;
// throws an error
var a = 2;
// throws an error
const
is also block scoped.
Complete exercises 1 and 2 in the exercises folder.
We previously used "concatenation" to insert variables into strings.
var name = "Inigo Montoya"
var killee = "my father"
var prepareTo = "die"
console.log("Hello. My name is "+ name + ". You killed " + killee +". Prepare to " + prepareTo + ".")
In ES6, we can "interpolate" strings with variables using template literal syntax. You'll recognize template literal strings because they're surrounded by backtics (\
``).
let name = "Inigo Montoya"
let killee = "my father"
let prepareTo = "die"
console.log(`Hello. My name is ${name}. You killed ${killee}. Prepare to ${prepareTo}.`)
There are serious security issues with inserting user input into your code.
Complete exercise 8.
How would you set a missing argument in an ES5 function?
The way we previously dealt with optional arguments in JavaScript was with the ||
operator:
function hello(name){
name = name || "stranger";
console.log("Hello, " + name);
}
hello() // Hello, stranger
hello("Jessie") // Hello, Jessie!
With ES6, we now have the option add set a default value directly as part of the functions' parameters.
function hello(name = "stranger"){
console.log("Hello, " + name)
}
hello() // Hello, stranger
hello("Jessie") // Hello, Jessie
One of the main benefits is that this makes it easier to allow optional arguments that might be falsy. As an example, what could go wrong with the ES5 optional argument strategy in the function below?
function pluralize(baseWord, suffix){
suffix = suffix || 'es';
return baseWord + suffix;
}
console.log(pluralize('shrimp', ''));
How could you handle intentionally falsy argument values with the ES5 strategy that relies on the `||` operator?
You could more specifically check whether the argument is `undefined`:suffix === undefined ? 'es' : suffix
Complete exercises 3 and 4 in the exercises folder.
Arrow functions are a new shorthand syntax for defining anonymous functions:
// es5
var foods = ["pizza","mac n cheese","lasagna"]
foods.forEach(function(food){
console.log("I love " + food)
})
// es6
let foods = ["pizza","mac n cheese","lasagna"]
foods.forEach( food => console.log(`I love ${food}`) )
If there is more than one parameter for the anonymous function, the parameters have to be wrapped in parentheses.
let foods = ["pizza","mac n cheese","lasagna"]
foods.forEach( (food,i) => console.log(`My #${i} favorite food is ${food}`) )
Arrow functions also have the benefit of not creating a new value of this
inside the function (read more here). Compare the two code samples below.
// es5
var pizza = {
temperature: 0,
toppings: ["cheese", "ham", "pineapple"],
bake() {
setInterval(function(){ // note that the setInterval function belongs to the window object
this.temperature++
}, 1000)
}
}
// es6
var pizza = {
temperature: 0,
toppings: ["cheese", "ham", "pineapple"],
bake() {
setInterval( () => {
this.temperature++
}, 1000)
}
}
pizza.bake();
console.log(pizza.temperature);
Additionally, the return
statement is not needed with single line arrow functions. There is an implicit return.
// es6
let add = (x, y) => x + y
add(2, 3) //5
// es5
function subtract(x,y){ x+y } // es5 needs explicit return
subtract(2, 3) // undefined
If the arrow function is multi-line, you still need to explicitly return:
let add = (x,y) => {
return x + y
}
add(2,3)
//undefined in console
The single line return can be faked by wrapping the expression in parentheses:
let add = (x,y) => (
x + y
)
Complete exercise 10.
"Destructuring" is a kind of assignment that makes it possible to pull out multiple variables from data inside arrays and objects.
Here's an array example:
let [a,b] = [1,2]
a //= 1
b //= 2
let nums = [1,2,3,4,5]
let [first, second, third] = nums
first //= 1
second //= 2
third //= 3
And an example with an object:
var user = {
id: 1,
name: "Bob",
age: 43 ,
profile_url: "http://api.co/users/1",
location: "DC"
}
Complete exercise 5.
ES6 allows us to shorten object literals in a few ways.
First, we can omit function
for method definitions within object literals.
// es5
var car = {
drive: function(){
console.log("vroom")
}
}
Spot the differences between the ES5 code above and the ES6 code below.
// es6
let car = {
drive(){
console.log("vroom")
}
}
Second, when a key is the same as the variable storing the value, there's a new shorthand for that as well.
// es5
var x = 1
var y = 2
var obj = {x:x, y:y}
//es6
let x = 1
let y = 2
let obj = {x,y}
We can combine these features to rewrite some function definitions. What is happening below?
// ES5
function greetUser (user) {
console.log("Hello " + user.name + ", how's the weather in " + user.location)
}
// In ES6 becomes
function greetUser ({ name, location }) {
console.log("Hello " + name + ", how's the weather in " + location)
}
// You would call both by using: greetUser(user) if you have a user variable
// set up with the proper structure.
Complete exercise 6.
ES6 adds class-based object-oriented programming. Click to expand more information about ES6 classes.
Classes in ES6 are defined as "syntactical sugar" on top of the prototypal patterns.
// es5
function Animal(name){
this.name = name
}
Animal.prototype.speak = function(){
console.log("my name is " + this.name)
}
function Dog(name){
this.name = name
}
// prototype-based inheritance
Dog.prototype = new Animal()
var lassie = new Dog("lassie")
lassie.speak()
// es6
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(this.name + ' makes a noise.');
}
}
// class-based inheritance
class Dog extends Animal {
speak() {
console.log(this.name + ' barks.');
}
}
var lassie = new Dog("lassie")
Practice with ES6 classes to complete exercises 12 and 13.
ES6 added built-in support for modules to help organize code on a larger scale. This feature is not avialable in browsers (yet), but many libraries support it.
Node.js has a module structure with export
and require
, like this:
// ES5
// routes.js file
module.exports = {
index: function(){
console.log("index route");
}
}
// app.js
var routes = require("./routes.js");
routes.index();
ES6 modules are not the same (read more here). They have named import
s and export
s, which allow us to import functions and
objects with a name tied to them:
// ES6
// routes.js
export function index(){
console.log("index route")
}
export function show(){
console.log("show route")
}
// app.js
// import just a few of the exports from a module
import {index, show} from 'routes'
index()
show()
// ES6
// import everything from a module
import * as routes from 'routes'
routes.index()
routes.show()
// ES6
// export a single value
export default function twice(x) {
return x * 2;
}
Support for ES6 is great! - https://kangax.github.io/compat-table/es6/
If you need to support a legacy browser, check out the following tools:
There are serious security issues with inserting user input into your code. Complete exercise 9 to learn about and practice a more secure approach.
ES6 adds special support for getter and setter methods for objects. Research getters and setters, and complete exercise 7. If you've done exercise 13, also complete exercise 14.
Click to expand more information about getters and setters.
Getters and setters in ES6 allow us to define pseudo-properties on objects.
Consider the following example:
let person = {
firstName: "Jesse",
lastName: "Shawl",
get fullName(){ // creates a reader for person.fullName
return this.firstName + " " + this.lastName
},
set fullName(newName){ // creates a writer for person.fullName
var names = newName.split(" ")
this.firstName = names[0]
this.lastName = names[1]
}
}
person.fullName = "j dog" // notice - no parentheses
The spread operator ...
allows an expression to be expanded into multiple elements. Complete exercises 11.
Click to expand more information about the spread operator.
This is useful for separating an array into individual elements:var dimensions = [10, 5, 2];
var volume = function(height, width, length){
return height * width * length;
}
// es5
volume(dimensions[0], dimensions[1], dimensions[2]);
// es6
volume(...dimensions);
This also makes it very easy to create copies of an array for functions where we want to modify data without changing the input array:
var days = ["monday","tuesday","wednesday","thursday","friday","saturday","sunday"];
function reversedDays(arr){
return arr.reverse();
}
// this returns a reversed version of the days array, ...
console.log(reversedDays(days))
// ... but now the original days array is reversed, too
console.log(days)
There are strategies to fix this in either version of JavaScript.
// es5
function reversedDays(arr){
var newArray = [];
for(let i = 0; i < arr.length; i++){
newArray.push(arr[i]);
}
return newArray.reverse();
}
// es6
function reversedDays(arr){
return [...arr].reverse()
}
// either way, we are now keeping the original days array in order
console.log(reversedDays(days))
console.log(days)
There are lots more features of ES6 that we have not covered: