Modern JavaScript Cheatsheet

_{Image Credits: Ahmad Awais ⚡️}

If you like this content, you can ping me or follow me on Twitter :+1:

Introduction

Motivation

This document is a cheatsheet for JavaScript you will frequently encounter in modern projects and most contemporary sample code.

This guide is not intended to teach you JavaScript from the ground up, but to help developers with basic knowledge who may struggle to get familiar with modern codebases (or let's say to learn React for instance) because of the JavaScript concepts used.

Besides, I will sometimes provide personal tips that may be debatable but will take care to mention that it's a personal recommendation when I do so.

Note: Most of the concepts introduced here are coming from a JavaScript language update (ES2015, often called ES6). You can find new features added by this update here; it's very well done.

Complementary Resources

When you struggle to understand a notion, I suggest you look for answers on the following resources:

• MDN (Mozilla Developer Network)
• You don't know JS (book)
• Eloquent JavaScript (book)
• Douglas Crockford's blog
• ES6 Features with examples
• Wes Bos blog (ES6)
• Javascript Basics for Beginners - a free Udacity course
• Reddit (JavaScript)
• Google to find specific blog and resources
• StackOverflow

Table of Contents

• Modern JavaScript cheatsheet
  • Introduction
    • Motivation
    • Complementary resources
  • Table of contents
  • Notions
    • Variable declaration: var, const, let
      • Short explanation
      • Sample code
      • Detailed explanation
      • External resource
    • Arrow function
      • Sample code
      • Detailed explanation
        • Concision
        • this reference
      • Useful resources
    • Function default parameter value
      • External resource
    • Destructuring objects and arrays
      • Explanation with sample code
      • Useful resources
    • Array methods - map / filter / reduce
      • Sample code
      • Explanation
        • Array.prototype.map()
        • Array.prototype.filter()
        • Array.prototype.reduce()
        • Array.prototype.find()
      • External Resource
    • Spread operator "..."
      • Sample code
      • Explanation
        • In iterables (like arrays)
        • Function rest parameter
        • Object properties spreading
      • External resources
    • Object property shorthand
      • Explanation
      • External resources
    • Promises
      • Sample code
      • Explanation
        • Create the promise
        • Promise handlers usage
      • External Resources
    • Template literals
      • Sample code
      • External resources
    • Tagged Template Literals
      • External resources
    • Imports / Exports
      • Explanation with sample code
        • Named exports
        • Default import / export
      • External resources
    • JavaScript this
      • External resources
    • Class
      • Samples
      • External resources
    • Extends and super keywords
      • Sample Code
      • External Resources
    • Async Await
      • Sample code
      • Explanation with sample code
      • Error handling
      • External resources
    • Truthy / Falsy
      • External resources
    • Anamorphisms / Catamporphisms
      • Anamorphisms
      • Catamorphisms
      • External resources
    • Generators
      • External resources
    • Static Methods
      • Short Explanation
      • Sample Code
      • Detailed Explanation
        • Calling other static methods from a static method
        • Calling static methods from non-static methods
      • External resources
  • Glossary
    • Scope
    • Variable mutation

Notions

Variable declaration: var, const, let

In JavaScript, there are three keywords available to declare a variable, and each has its differences. Those are var, let and const.

Short explanation

Variables declared with const keyword can't be reassigned, while let and var can.

I recommend always declaring your variables with const by default, but with let if it is a variable that you need to mutate or reassign later.

<table> <tr> <th></th> <th>Scope</th> <th>Reassignable</th> <th>Mutable</th> <th><a href="#tdz_sample">Temporal Dead Zone</a></th> </tr> <tr> <th>const</th> <td>Block</td> <td>No</td> <td><a href="#const_mutable_sample">Yes</a></td> <td>Yes</td> </tr> <tr> <th>let</th> <td>Block</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <th>var</th> <td>Function</td> <td>Yes</td> <td>Yes</td> <td>No</td> </tr> </table>

Sample code

const person = "Nick";
person = "John" // Will raise an error, person can't be reassigned

let person = "Nick";
person = "John";
console.log(person) // "John", reassignment is allowed with let

Detailed explanation

The scope of a variable roughly means "where is this variable available in the code".

var

var declared variables are function scoped, meaning that when a variable is created in a function, everything in that function can access that variable. Besides, a function scoped variable created in a function can't be accessed outside this function.

I recommend you to picture it as if an X scoped variable meant that this variable was a property of X.

function myFunction() {
  var myVar = "Nick";
  console.log(myVar); // "Nick" - myVar is accessible inside the function
}
console.log(myVar); // Throws a ReferenceError, myVar is not accessible outside the function.

Still focusing on the variable scope, here is a more subtle example:

function myFunction() {
  var myVar = "Nick";
  if (true) {
    var myVar = "John";
    console.log(myVar); // "John"
    // actually, myVar being function scoped, we just erased the previous myVar value "Nick" for "John"
  }
  console.log(myVar); // "John" - see how the instructions in the if block affected this value
}
console.log(myVar); // Throws a ReferenceError, myVar is not accessible outside the function.

Besides, var declared variables are moved to the top of the scope at execution. This is what we call var hoisting.

This portion of code:

console.log(myVar) // undefined -- no error raised
var myVar = 2;

is understood at execution like:

var myVar;
console.log(myVar) // undefined -- no error raised
myVar = 2;

let

var and let are about the same, but let declared variables

• are block scoped
• are not accessible before they are assigned
• can't be re-declared in the same scope

Let's see the impact of block-scoping taking our previous example:

function myFunction() {
  let myVar = "Nick";
  if (true) {
    let myVar = "John";
    console.log(myVar); // "John"
    // actually, myVar being block scoped, we just created a new variable myVar.
    // this variable is not accessible outside this block and totally independent
    // from the first myVar created !
  }
  console.log(myVar); // "Nick", see how the instructions in the if block DID NOT affect this value
}
console.log(myVar); // Throws a ReferenceError, myVar is not accessible outside the function.

<a name="tdz_sample"></a> Now, what it means for let (and const) variables for not being accessible before being assigned:

console.log(myVar) // raises a ReferenceError !
let myVar = 2;

By contrast with var variables, if you try to read or write on a let or const variable before they are assigned an error will be raised. This phenomenon is often called Temporal dead zone or TDZ.

Note: Technically, let and const variables declarations are being hoisted too, but not their assignation. Since they're made so that they can't be used before assignation, it intuitively feels like there is no hoisting, but there is. Find out more on this very detailed explanation here if you want to know more.

In addition, you can't re-declare a let variable:

let myVar = 2;
let myVar = 3; // Raises a SyntaxError

const

const declared variables behave like let variables, but also they can't be reassigned.

To sum it up, const variables:

• are block scoped
• are not accessible before being assigned
• can't be re-declared in the same scope
• can't be reassigned

const myVar = "Nick";
myVar = "John" // raises an error, reassignment is not allowed

const myVar = "Nick";
const myVar = "John" // raises an error, re-declaration is not allowed

<a name="const_mutable_sample"></a> But there is a subtlety : const variables are not immutable ! Concretely, it means that object and array const declared variables can be mutated.

For objects:

const person = {
  name: 'Nick'
};
person.name = 'John' // this will work ! person variable is not completely reassigned, but mutated
console.log(person.name) // "John"
person = "Sandra" // raises an error, because reassignment is not allowed with const declared variables

For arrays:

const person = [];
person.push('John'); // this will work ! person variable is not completely reassigned, but mutated
console.log(person[0]) // "John"
person = ["Nick"] // raises an error, because reassignment is not allowed with const declared variables

External resource

• How let and const are scoped in JavaScript - WesBos
• Temporal Dead Zone (TDZ) Demystified

<a name="arrow_func_concept"></a> Arrow function

The ES6 JavaScript update has introduced arrow functions, which is another way to declare and use functions. Here are the benefits they bring:

• More concise
• this is picked up from surroundings
• implicit return

Sample code

• Concision and implicit return

function double(x) { return x * 2; } // Traditional way
console.log(double(2)) // 4

const double = x => x * 2; // Same function written as an arrow function with implicit return
console.log(double(2)) // 4

• this reference

In an arrow function, this is equal to the this value of the enclosing execution context. Basically, with arrow functions, you don't have to do the "that = this" trick before calling a function inside a function anymore.

function myFunc() {
  this.myVar = 0;
  setTimeout(() => {
    this.myVar++;
    console.log(this.myVar) // 1
  }, 0);
}

Detailed explanation

Concision

Arrow functions are more concise than traditional functions in many ways. Let's review all the possible cases:

• Implicit VS Explicit return

An explicit return is a function where the return keyword is used in its body.

  function double(x) {
    return x * 2; // this function explicitly returns x * 2, *return* keyword is used
  }

In the traditional way of writing functions, the return was always explicit. But with arrow functions, you can do implicit return which means that you don't need to use the keyword return to return a value.

  const double = (x) => {
    return x * 2; // Explicit return here
  }

Since this function only returns something (no instructions before the return keyword) we can do an implicit return.

  const double = (x) => x * 2; // Correct, returns x*2

To do so, we only need to remove the brackets and the return keyword. That's why it's called an implicit return, the return keyword is not there, but this function will indeed return x * 2.

Note: If your function does not return a value (with side effects), it doesn't do an explicit nor an implicit return.

Besides, if you want to implicitly return an object you must have parentheses around it since it will conflict with the block braces:

const getPerson = () => ({ name: "Nick", age: 24 })
console.log(getPerson()) // { name: "Nick", age: 24 } -- object implicitly returned by arrow function

• Only one argument

If your function only takes one parameter, you can omit the parentheses around it. If we take back the above double code:

  const double = (x) => x * 2; // this arrow function only takes one parameter

Parentheses around the parameter can be avoided:

  const double = x => x * 2; // this arrow function only takes one parameter

• No arguments

When there is no argument provided to an arrow function,