This is the curriculum for the 2018 Foxtrot Web Developer Bootcamp.

Introducing ES6

ECMAScript is a programming language specification first developed by Netscape in 1995. It is the specification that defines how Javascript should function as a language. It has changed significantly since then, and continues to evolve today. The community is currently in a transition from ES5 to the new, and greatly improved ES6, also known as ES2015. It takes a few years for all of the web browsers to fully support a new language specification, which can add some interesting challenges to us as programmers if we are writing Javascript that needs to run in our users' browsers, where we have little to no control over when they upgrade to the latest version that supports ES6.

So far in this class we have mostly used vanilla javascript, but, this class is about your future as a web developer, so we're going to turn our focus to the ES6 specification. ES7 is just around the corner with some added functionality, but will not introduce any big changes from ES6.

The next few sections of the course are focused on running Javascript on the server, where we as developers have more control over the environment our code runs in. This is great news because it means that we can use a modern version of Node.js which has great support for the ES6 syntax. As long as we are running a version of Node greater than 6.5, we're good to go.

Benefits of ES2015 / ES6

ES6 fixed many long standing problems that existed in Javascript beforehand, and introduced many features to help developers write less buggy code that is more concise and easier to read at the same time.

The 4 major improvements in ES6 that we'll take advantage of when working with Node are:

  • Block Scope
  • Classes
  • Destructured Literals
  • Text Interpolation

ES6 let, const and var

const is a signal that the identifier wont be reassigned.

  • Example: const pie = "Apple"

let is a signal that the variable may be reassigned, such as a counter in a loop, or a value swap in an algorithm. It also signals that the variable will be used only in the block its defined in, which is not always the entire containing function.

  • Example: let ball = "Baseball"

var is now the weakest signal available when you define a variable in JavaScript. The variable may or may not be reassigned, and the variable may or may not be used for an entire function, or just for the purpose of a block or loop.

  • Example: var plane = "Boeing 747"

Stack Overflow Example

Object Destructuring

In Javascript, we use a lot of the data type Object. Remember that both objects and arrays are of data type Object in JS.

Because we pass so much information around using objects, new ES syntax gives us some handy shortcuts for getting at information.

For the official definition:

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from 
arrays, or properties from objects, into distinct variables.

-- MDN, JS Object Destructuring

Some Examples

To see what this actually means, lets look at some examples.

Using information from objects gets easier:

// given this user object
var user = {first_name: 42, last_name: "Doe"}

// we can create two new variables and assign them the value of the attribute with the same name
var {first_name, last_name} = user

console.log(first_name); // 42
console.log(last_name); // "Doe"

Here, notice that this trick only works if the variable names exactly match the object attribute keys

Assigning values out of arrays gets easier:

// we declare two new variables without values
var a, b

// we can efficiently assign them each values in one line
[a, b] = [10, 20];

console.log(a);
// expected output: 10

console.log(b);
// expected output: 20

More Practice:

There is tons that you can do with this concept of destructuring, and it can be used in all sorts of ways. For a fantastic list of all the things you can do with destructuring, go to the MDN page Destructuing Assignmment Operators

JS Spread Syntax

Like Object Destructuring, spread syntax is fairly new to javascript. It is a quick way to write really convenient code.

The official definition:

Spread syntax allows an iterable such as an array expression or string to be expanded in places where zero or more
arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded
in places where zero or more key-value pairs (for object literals) are expected.

-- MDN, Spread Syntax

Some Examples:

A better way to concatenate arrays

Sometimes it is easier to see what is going on with new syntax by looking at code that does the same thing in a syntax you already understand. Here is an example with Array.concat, which is used to concatenate a new array to the end of an existing array. Without spread syntax this is done as:

var arr1 = [0, 1, 2]
var arr2 = [3, 4, 5]

// Append all items from arr2 onto arr1

arr1 = arr1.concat(arr2)

But with spread syntax this looks like:

var arr1 = [0, 1, 2]
var arr2 = [3, 4, 5]

// spread all the values in both arrays into arr1
arr1 = [...arr1, ...arr2]

We can also copy arrays:

var arr = [1, 2, 3];
var arr2 = [...arr]; // like arr.slice()
arr2.push(4); 

// arr2 becomes [1, 2, 3, 4]
// arr remains unaffected

Super Helpful -- We can spread a changing number of items into a function as arguments

Take a look at this function. It takes in individual strings as arguments, and returns those words combined them into a sentence

// 
function create_a_sentence(w1, w2, w3) {
  return w1 + w2 + w3
}

create_a_sentence("hello", "to", "world")
// ==> "Hello to world"

But, this is very fragile code. Our function breaks if passed more than 3 words. We can fix this problem and make a much better function using the spread operator. What code could you write make this work?

const words = ["the", "answer", "is", "42"]

// your code here

If you want to see a function with the spread operator working - look here at this dedupe function challenge - a challenge from last week, re-written to make use of spread syntax

Arrow Functions

With some differences that we will talk more about later, Arrow Functions are a shorthand way to define a function in javascript.

The official definition:

An arrow function expression has a shorter syntax than a function expression and does not have its own this,
arguments, super, or new.target. These function expressions are best suited for non-method functions, and they 
cannot be used as constructors.

-- MDN Arrow Functions

Examples:

A named function is declared with the "function" key word and a name, like this:

function makeSomthing(arguments){ return something }

An anonymous function is mostly the same, but instead of using a name with the "function" key word, it is run "anonymously" and the value that is returned is saved into a variable. Like this:

var someResult = function(arguments){ return something}

Arrow functions get rid of the "function" key word and instead looks like this:

var someResult = (arguments) => { return something }

Refactoring

Refactoring your code is a great skill to practice. Look over any challenges you have done since starting at learn, and find 3 programs you built that could benefit from any of the new syntax we learned. Make the changes and show an instructor.