JavaScript ES6 Interview Cheat Sheet

Photo by Kelly Sikkema on Unsplash

In a recent interview, I was asked what is JavaScript…and I froze. I have been coding using JavaScript for the past 6 months but I had never thought to define it before. So before I begin explaining some key features of ES6 (ECMA Script 6), I thought I would give you a definition of JavaScript so you don’t freeze as I did!

JavaScript is a dynamic, high-level, lightweight programming language most commonly used to automate and animate web pages. It is a loosely-typed , synchronous language with object-oriented capabilities.

Javascript conforms to the ECMAScript specification which aims to create a general-purpose scripting language. ES6, which was released in June 2015 brings new features that make your code more readable, allowing you to write less code and do more. Let’s take a look at some new features….

Let and Const:

• const is an immutable variable — it cannot be reassigned.
• let is a mutable variable — can be reassigned and take a new value.
• Both let and const are blocked-scope (only available within its scope).
• It is preferable to use const instead of var because var is ‘hoisted’. Hoisting is JavaScripts default behaviour which is to move all declaration at the top of the scope before the code is executed which means JavaScript can use the component before its declaration

Arrow Functions:

Simply put, they are the shorthand and more accurate way of writing functions.

Arrow functions consist of parameters followed by an arrow (=>) and the body of the function.

//ES5
var add = function(x,y){
    return x + y;
}
//ES6
let add = (x,y) => { return x + y };
//or even shorter
let add = (x,y)=> x + y;

For the above example, it may not seem like a huge difference however when you are writing more complex function it becomes a lot easier to read.

The main advantages of the arrow function are:

• They reduce code size and make it easier to read and write.
• The return statement is optional for a single line function.
• Lexically bind the context.
• Functional braces are optional for a single-line statement.

Rest Operator:

• The rest operator improves the ability to handle multiple parameters.
• It is represented by three dots (…).
• Essentially it takes data and puts it into an array meaning that you can call a function with any number of arguments.

let sum = (...args) => {
    let total = 0;
    for (let i of args) {
       total += i;
    }
    console.log("Sum :" + total)
}
total(10, 20, 30) //=> Sum: 60

Spread Operator:

• The spread operator allows the concatenation between array.
• Similar to the rest operator, it is represented by three dots(…) but, note that their functionality is entirely opposite.
• It is useful for easily creating copies of arrays or objects.

let arr1 = [4, 5, 6]
let arr2 = [1, 2, 3, ...num2, 7, 8, 9]

console.log(arr2) //=> [1, 2, 3, 4, 5, 6, 7, 8, 9]

Promises:

• Promises are the easiest way to work with asynchronous programming. Previously you could have used callbacks but you could end up in callback hell and promises overcome this problem.
• A promise can be pending: this is the initial state of every promise meaning that the result has not been computed yet.
• A promise can be fulfilled: the operation has been computed.
• A promise can be rejected: the operation has resulted in a failure that occurs during computation.
• Once the promise reaches the state of fulfilled or rejected, it becomes immutable.
• The Promise() constructor takes two arguments: a rejected function and a resolve function and based on the asynchronous operation, it will return either the first argument or the second.

Template Literals:

• Provide an easy way of creating a multiline string and perform string interpolation. You no longer need to use + to concatenate strings.
• They consist of using backticks(``), placing the expression within curly braces {}, preceded by a dollar sign.

let str1 = "Hello"
let str2 = "World"
let str = `${str1} ${str2}!`
console.log(str) //=> Hello World!

This is by no means a comprehensive list of ES6 features but I hope you find it useful for interview prep! Thank you for reading :)