Modern JavaScript Cheatsheet

Widely inspired from meaudru Modern JavaScript Cheatsheet with some alterations.

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.

Table of Contents

• 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

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

Glossary

Scope

The context in which values and expressions are "visible," or can be referenced. If a variable or other expression is not "in the current scope," then it is unavailable for use.

Source: MDN

Variable mutation

A variable is said to have been mutated when its initial value has changed afterward.

var myArray = [];
myArray.push("firstEl") // myArray is being mutated

A variable is said to be immutable if it can't be mutated.

Check MDN Mutable article for more details.