Declaring Variables in ES6

Prior to ES6, the only way to declare a variable was with the var keyword. We now have a few different options that provide improved functionality.

const

A constant is a variable that cannot be changed. Like other languages had done before it, JavaScript introduced constants with ES6.

Before constants, all we had were variables, and variables could be overwritten:

var pizza = true
pizza = false
console.log(pizza) // false

We cannot reset the value of a constant variable, and it will generate a console error (Figure 2-1) if we try to overwrite the value:

const pizza = true
pizza = false

Figure 2-1. An attempt at overwriting a constant

let

JavaScript now has lexical variable scoping. In JavaScript, we create code blocks with curly braces ({}). With functions, these curly braces block off the scope of variables. On the other hand, think about if/else statements. If you’re coming from other languages, you might assume that these blocks would also block variable scope. This is not the case.

If a variable is created inside of an if/else block, that variable is not scoped to the block:

var topic = "JavaScript"

if (topic) {
  var topic = "React"
  console.log('block', topic)     // block React
}

console.log('global', topic)      // global React

The topic variable inside the if block resets the value of topic.

With the let keyword, we can scope a variable to any code block. Using let protects the value of the global variable:

var topic = "JavaScript"

if (topic) {
  let topic = "React"
  console.log('block', topic)     // React
}

console.log('global', topic)      // JavaScript

The value of topic is not reset outside of the block.

Another area where curly braces don’t block off a variable’s scope is in for loops:

var div, 
    container = document.getElementById('container')

for (var i=0; i<5; i++) {
  div = document.createElement('div')
  div.onclick = function() {
      alert('This is box #' + i)
   }
  container.appendChild(div)
}

In this loop, we create five divs to appear within a container. Each div is assigned an onclick handler that creates an alert box to display the index. Declaring i in the for loop creates a global variable named i, and then iterates it until its value reaches 5. When you click on any of these boxes, the alert says that i is equal to 5 for all divs, because the current value for the global i is 5 (Figure 2-2).

Figure 2-2. i is equal to 5 for each box

Declaring the loop counter i with let instead of var does block off the scope of i. Now clicking on any box will display the value for i that was scoped to the loop iteration (Figure 2-3):

var div, container = document.getElementById('container')
for (let i=0; i<5; i++) {
  div = document.createElement('div')
  div.onclick = function() {
      alert('This is box #: ' + i)
   }
  container.appendChild(div)
}

Figure 2-3. The scope of i is protected with let

console.log(lastName + ", " + firstName + " " + middleName)

console.log(`${lastName}, ${firstName} ${middleName}`)

`

   Hello ${firstName},

   Thanks for ordering ${qty} tickets to ${event}.

   Order Details
     ${firstName} ${middleName} ${lastName}
     ${qty} x $${price} = $${qty*price} to ${event}
             
   You can pick your tickets up at will call 30 minutes before 
   the show.

   Thanks,

   ${ticketAgent}

`

document.body.innerHTML = `
<section>
  <header>
      <h1>The HTML5 Blog</h1>
  </header>
  <article>
      <h2>${article.title}</h2>
      ${article.body}
  </article>
  <footer>
      <p>copyright ${new Date().getYear()} | The HTML5 Blog</p>
  </footer>
</section>
`

function logActivity(name="Shane McConkey", activity="skiing") {
  console.log( `${name} loves ${activity}` )
}

var defaultPerson = {
    name: { 
        first: "Shane", 
        last: "McConkey"
    },
    favActivity: "skiing"
}

function logActivity(p=defaultPerson) {
    console.log(`${p.name.first} loves ${p.favActivity}`)
}

Arrow Functions

Arrow functions are a useful new feature of ES6. With arrow functions, you can create functions without using the function keyword. You also often do not have to use the return keyword. Example 2-2 shows the traditional function syntax.

var lordify = function(firstname) {
  return `${firstname} of Canterbury`
}

console.log( lordify("Dale") )       // Dale of Canterbury
console.log( lordify("Daryle") )     // Daryle of Canterbury

With an arrow function, we can simplify the syntax tremendously, as shown in Example 2-3.

var lordify = firstname => `${firstname} of Canterbury`

With the arrow, we now have an entire function declaration on one line. The function keyword is removed. We also remove return because the arrow points to what should be returned. Another benefit is that if the function only takes one argument, we can remove the parentheses around the arguments.

More than one argument should be surrounded by parentheses:

// Old
var lordify = function(firstName, land) {
  return `${firstName} of ${land}`
}

// New
var lordify = (firstName, land) => `${firstName} of ${land}`

console.log( lordify("Dale", "Maryland") )    // Dale of Maryland
console.log( lordify("Daryle", "Culpeper") )  // Daryle of Culpeper

We can keep this as a one-line function because there is only one statement that needs to be returned.

More than one line needs to be surrounded with brackets:

// Old
var lordify = function(firstName, land) {
  
  if (!firstName) {
    throw new Error('A firstName is required to lordify')
  }
  
  if (!land) {
    throw new Error('A lord must have a land')
  }
  
  return `${firstName} of ${land}`
}

// New
var lordify = (firstName, land) => {
  
  if (!firstName) {
    throw new Error('A firstName is required to lordify')
  }
  
  if (!land) {
    throw new Error('A lord must have a land')
  }
  
  return `${firstName} of ${land}`
}

console.log( lordify("Kelly", "Sonoma") )   // Kelly of Sonoma
console.log( lordify("Dave") )              // ! JAVASCRIPT ERROR

These if/else statements are surrounded with brackets but still benefit from the shorter syntax of the arrow function.

Regular functions do not block this. For example, this becomes something else in the setTimeout callback, not the tahoe object:

var tahoe = {
  resorts: ["Kirkwood","Squaw","Alpine","Heavenly","Northstar"],
  print: function(delay=1000) {
    
    setTimeout(function() {
      console.log(this.resorts.join(", "))
    }, delay)
    
  }
}

tahoe.print() // Cannot read property 'join' of undefined

This error is thrown because it’s trying to use the .join method on what this is. In this case, it’s the window object. Alternatively, we can use the arrow function syntax to protect the scope of this:

var tahoe = {
  resorts: ["Kirkwood","Squaw","Alpine","Heavenly","Northstar"],
  print: function(delay=1000) {
    
    setTimeout(() => {
      console.log(this.resorts.join(", "))
    }, delay)
    
  }
}

tahoe.print() // Kirkwood, Squaw, Alpine, Heavenly, Northstar

This works correctly and we can .join the resorts with a comma. Be careful, though, that you’re always keeping scope in mind. Arrow functions do not block off the scope of this:

var tahoe = {
  resorts: ["Kirkwood","Squaw","Alpine","Heavenly","Northstar"],
  print: (delay=1000) => {
    
    setTimeout(() => {
      console.log(this.resorts.join(","))
    }, delay)
    
  }
}

tahoe.print() // Cannot read property resorts of undefined

Changing the print function to an arrow function means that this is actually the window.

To verify, let’s change the console message to evaluate whether this is the window:

var tahoe = {
  resorts: ["Kirkwood","Squaw","Alpine","Heavenly","Northstar"],
  print: (delay=1000)=> {
    
    setTimeout(() => {
      console.log(this === window)
    }, delay)
    
  }
}

tahoe.print()

It evaluates as true. To fix this, we can use a regular function:

var tahoe = {
  resorts: ["Kirkwood","Squaw","Alpine","Heavenly","Northstar"],
  print: function(delay=1000) {
    
    setTimeout(() => {
      console.log(this === window)
    }, delay)
    
  }
}

tahoe.print() // false

Transpiling ES6

Not all web browsers support ES6, and even those that do don’t support everything. The only way to be sure that your ES6 code will work is to convert it to ES5 code before running it in the browser. This process is called transpiling. One of the most popular tools for transpiling is Babel.

In the past, the only way to use the latest JavaScript features was to wait weeks, months, or even years until browsers supported them. Now, transpiling has made it possible to use the latest features of JavaScript right away. The transpiling step makes JavaScript similar to other languages. Transpiling is not compiling: our code isn’t compiled to binary. Instead, it’s transpiled into syntax that can be interpreted by a wider range of browsers. Also, JavaScript now has source code, meaning that there will be some files that belong to your project that don’t run in the browser.

Example 2-4 shows some ES6 code. We have an arrow function, already covered, mixed with some default arguments for x and y.

const add = (x=5, y=10) => console.log(x+y);

After we run the transpiler on this code, here is what the output will look like:

"use strict";

var add = function add() {
    var x = arguments.length <= 0 || arguments[0] === undefined ? 
        5 : arguments[0];
    var y = arguments.length <= 1 || arguments[1] === undefined ? 
        10 : arguments[1];
    return console.log(x + y);
};

The transpiler added a “use strict” declaration to run in strict mode. The variables x and y are defaulted using the arguments array, a technique you may be familiar with. The resulting JavaScript is more widely supported.

You can transpile JavaScript directly in the browser using the inline Babel transpiler. You just include the browser.js file, and any scripts with type="text/babel" will be converted (even though Babel 6 is the current version of Babel, only the CDN for Babel 5 will work):

<script 
    src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js"> 
</script> 
<script src="script.js" type="text/babel">
</script>

You may be thinking to yourself: “Great! When ES6 is supported by all browsers, we won’t have to use Babel anymore!” However, by the time this happens, we will want to use features of the next version of the spec. Unless a tectonic shift occurs, we’ll likely be using Babel in the foreseeable future.

ES6 Objects and Arrays

ES6 gives us new ways for working with objects and arrays and for scoping the variables within these datasets. These features include destructuring, object literal enhancement, and the spread operator.

var sandwich =  {
      bread: "dutch crunch",
      meat: "tuna",
      cheese: "swiss",
      toppings: ["lettuce", "tomato", "mustard"]
}

var {bread, meat} = sandwich

console.log(bread, meat) // dutch crunch tuna

var {bread, meat} = sandwich

bread = "garlic"
meat = "turkey"

console.log(bread) // garlic
console.log(meat) // turkey

console.log(sandwich.bread, sandwich.meat) // dutch crunch tuna

var lordify = regularPerson => {
  console.log(`${regularPerson.firstname} of Canterbury`)
}

var regularPerson = {
  firstname: "Bill",
  lastname: "Wilson"
}

lordify(regularPerson)       // Bill of Canterbury

var lordify = ({firstname}) => {
  console.log(`${firstname} of Canterbury`)
}

lordify(regularPerson)      // Bill of Canterbury

var [firstResort] = ["Kirkwood", "Squaw", "Alpine"]

console.log(firstResort) // Kirkwood

var [,,thirdResort] = ["Kirkwood", "Squaw", "Alpine"]

console.log(thirdResort) // Alpine

var name = "Tallac"
var elevation = 9738

var funHike = {name,elevation}

console.log(funHike) // {name: "Tallac", elevation: 9738}

var name = "Tallac"
var elevation = 9738
var print = function() { 
  console.log(`Mt. ${this.name} is ${this.elevation} feet tall`)
}

var funHike = {name,elevation,print}

funHike.print()     // Mt. Tallac is 9738 feet tall

// OLD
var skier = {
    name: name,
    sound: sound,
    powderYell: function() {
        var yell = this.sound.toUpperCase()
        console.log(`${yell} ${yell} ${yell}!!!`)
    },
    speed: function(mph) {
        this.speed = mph
        console.log('speed:', mph)
    }
}

// NEW
const skier = {
    name,
    sound,
    powderYell() {
        let yell = this.sound.toUpperCase()
        console.log(`${yell} ${yell} ${yell}!!!`)
    },
    speed(mph) {
        this.speed = mph
        console.log('speed:', mph)
    }
}

var peaks = ["Tallac", "Ralston", "Rose"]
var canyons = ["Ward", "Blackwood"]
var tahoe = [...peaks, ...canyons]

console.log(tahoe.join(', '))  // Tallac, Ralston, Rose, Ward, Blackwood

var peaks = ["Tallac", "Ralston", "Rose"]
var [last] = peaks.reverse()

console.log(last) // Rose
console.log(peaks.join(', '))  // Rose, Ralston, Tallac

var peaks = ["Tallac", "Ralston", "Rose"]
var [last] = [...peaks].reverse()

console.log(last) // Rose
console.log(peaks.join(', '))  // Tallac, Ralston, Rose

var lakes = ["Donner", "Marlette", "Fallen Leaf", "Cascade"]

var [first, ...rest] = lakes

console.log(rest.join(", ")) // "Marlette, Fallen Leaf, Cascade"

function directions(...args) {
  var [start, ...remaining] = args
  var [finish, ...stops] = remaining.reverse()
  
  console.log(`drive through ${args.length} towns`)
  console.log(`start in ${start}`)
  console.log(`the destination is ${finish}`)
  console.log(`stopping ${stops.length} times in between`)
}

directions(
    "Truckee", 
    "Tahoe City", 
    "Sunnyside", 
    "Homewood", 
    "Tahoma"
)

var morning = {
  breakfast: "oatmeal",
  lunch: "peanut butter and jelly"
}

var dinner = "mac and cheese"

var backpackingMeals = {
  ...morning,
  dinner
}

console.log(backpackingMeals) // {  breakfast: "oatmeal",
                              //    lunch: "peanut butter and jelly",
                              //    dinner: "mac and cheese"}

Promises

Promises give us a way to make sense out of asynchronous behavior. When making an asynchronous request, one of two things can happen: everything goes as we hope or there’s an error. There may be several different types of successful or unsuccessful requests. For example, we could try several ways to obtain the data to reach success. We could also receive multiple types of errors. Promises give us a way to simplify back to a simple pass or fail.

Let’s create an asynchronous promise for loading data from the randomuser.me API. This API has information like email address, name, phone number, location, and so on for fake members and is great to use as dummy data.

The getFakeMembers function returns a new promise. The promise makes a request to the API. If the promise is successful, the data will load. If the promise is unsuccessful, an error will occur:

const getFakeMembers = count => new Promise((resolves, rejects) => {
  const api = `https://api.randomuser.me/?nat=US&results=${count}`
  const request = new XMLHttpRequest()
  request.open('GET', api)
  request.onload = () => 
       (request.status === 200) ? 
        resolves(JSON.parse(request.response).results) : 
        reject(Error(request.statusText))
  request.onerror = (err) => rejects(err)
  request.send()
})

With that, the promise has been created, but it hasn’t been used yet. We can use the promise by calling the getFakeMembers function and passing in the number of members that should be loaded. The then function can be chained on to do something once the promise has been fulfilled. This is called composition. We’ll also use an additional callback that handles errors:

getFakeMembers(5).then(
  members => console.log(members),
  err => console.error(
      new Error("cannot load members from randomuser.me"))
)

Promises make dealing with asynchronous requests easier, which is good, because we have to deal with a lot of asynchronous data in JavaScript. You’ll also see promises used heavily in Node.js, so a solid understanding of promises is essential for the modern JavaScript engineer.

Classes

Previously in JavaScript, there were no official classes. Types were defined by functions. We had to create a function and then define methods on the function object using the prototype:

function Vacation(destination, length) {
  this.destination = destination
  this.length = length
}

Vacation.prototype.print = function() {
    console.log(this.destination + " | " + this.length + " days") 
}

var maui = new Vacation("Maui", 7)

maui.print() // Maui | 7 days

If you were used to classical object orientation, this probably made you mad.

ES6 introduces class declaration, but JavaScript still works the same way. Functions are objects, and inheritance is handled through the prototype, but this syntax makes more sense if you come from classical object orientation:

class Vacation {
  
  constructor(destination, length) {
    this.destination = destination
    this.length = length
  }
  
  print() {
    console.log(`${this.destination} will take ${this.length} days.`)  
  }
  
}

Once you’ve created the class, you can create a new instance of the class using the new keyword. Then you can call the custom method on the class:

const trip = new Vacation("Santiago, Chile", 7)

trip.print() // Chile will take 7 days.

Now that a class object has been created, you can use it as many times as you’d like to create new vacation instances. Classes can also be extended. When a class is extended, the subclass inherits the properties and methods of the superclass. These properties and methods can be manipulated from here, but as a default, all will be inherited.

You can use Vacation as an abstract class to create different types of vacations. For instance, an Expedition can extend the Vacation class to include gear:

class Expedition extends Vacation {
  
  constructor(destination, length, gear) {
   super(destination, length)
   this.gear = gear
  }
  
  print() {
    super.print()
    console.log(`Bring your ${this.gear.join(" and your ")}`)
  }
}

That’s simple inheritance: the subclass inherits the properties of the superclass. By calling the print method of Vacation, we can append some new content onto what is printed in the print method of Expedition. Creating a new instance works the exact same way—create a variable and use the new keyword:

const trip = new Expedition("Mt. Whitney", 3, 
                     ["sunglasses", "prayer flags", "camera"])

trip.print() 

// Mt. Whitney will take 3 days. 
// Bring your sunglasses and your prayer flags and your camera

We will use classes a bit in this book, but we’re focusing on the functional paradigm. Classes have other features, like getters, setters, and static methods, but this book favors functional techniques over object-oriented techniques. The reason we’re introducing these is because we’ll use them later when creating React components.

ES6 Modules

A JavaScript module is a piece of reusable code that can easily be incorporated into other JavaScript files. Until recently, the only way to work with modular JavaScript was to incorporate a library that could handle importing and exporting modules. Now, with ES6, JavaScript itself supports modules.³

JavaScript modules are stored in separate files, one file per module. There are two options when creating and exporting a module: you can export multiple JavaScript objects from a single module, or one JavaScript object per module.

In Example 2-6, text-helpers.js, two functions are exported.

export const print(message) => log(message, new Date())

export const log(message, timestamp) =>
    console.log(`${timestamp.toString()}: ${message}`)

export can be used to export any JavaScript type that will be consumed in another module. In this example the print function and log function are being exported. Any other variables declared in text-helpers.js will be local to that module.

Sometimes you may want to export only one variable from a module. In these cases you can use export default (Example 2-7).

const freel = new Expedition("Mt. Freel", 2, ["water", "snack"])

export default freel

export default can be used in place of export when you wish to export only one type. Again, both export and export default can be used on any JavaScript type: primitives, objects, arrays, and functions.⁴

Modules can be consumed in other JavaScript files using the import statement. Modules with multiple exports can take advantage of object destructuring. Modules that use export default are imported into a single variable:

import { print, log } from './text-helpers'
import freel from './mt-freel'

print('printing a message')
log('logging a message')

freel.print()

You can scope module variables locally under different variable names:

import { print as p, log as l } from './text-helpers'

p('printing a message')
l('logging a message')

You can also import everything into a single variable using *:

import * as fns from './text-helpers

ES6 modules are not yet fully supported by all browsers. Babel does support ES6 modules, so we will be using them throughout this book.

CommonJS

CommonJS is the module pattern that is supported by all versions of Node.js.⁵ You can still use these modules with Babel and webpack. With CommonJS, JavaScript objects are exported using module.exports, as in Example 2-8.

const print(message) => log(message, new Date())

const log(message, timestamp) =>
    console.log(`${timestamp.toString()}: ${message}`}

module.exports = {print, log}

CommonJS does not support an import statement. Instead, modules are imported with the require function:

const { log, print } = require('./txt-helpers')

JavaScript is indeed moving quickly and adapting to the increasing demands that engineers are placing on the language. Browsers are quickly implementing the features of ES6 and beyond, so it’s a good idea to use these features now without hesitation.⁶ Many of the features that are included in the ES6 spec are present because they support functional programming techniques. In functional JavaScript, we can think about our code as being a collection of functions that can be composed into applications. In the next chapter, we’ll explore functional techniques in more detail and will discuss why you might want to use them.