My JS Guide

This guide was made for myself, if it helps you, great. 🙂 It is, at least to start, primarily a condensation and restatement of materials found JavaScript Enlightment.

ES5+

• Syntax (for ES2015+ see JavaScript Enlightenment 4)
  • const – Honors block scope in contrast to var which honors only function scope. (ES2015)
  • let – Honors block scope in constrast to var. (ES2015)
  • Blocks for Scope (see 4.2) – No longer necessary to wrap code in a function to limit scope since let and const are inherently scoped. (ES2015)
  • Default Parameters for Functions (see 4.3) – Default values can now be set in the parameters defined for a function. (ES2015)
  • Destructuring Assignments (see 4.4) – “Destructuring is a fancy word for unpacking elements from an array, or characters from a string, or properties from an object and assigning/reassigning them to one or more variables in a terse expression….Don’t over think destructuring, it simply is a terse way to take a collection of values and assign those values within the collection to different or new variables.” (ES2015)
    • Destructuring can be used with function arguments/parameters. (ES2015)
  • Spread Operator (...) (see 4.7) – “The spread operator (i.e. ...) is used to unpack or expand elements from an Array, properties from an Object, or individual characters from a String, so as to immediately use these individual values…”
    • Arrays – Spread into array literals, can be used with a function. (ES2015)
      • When used with arrays can replace .concat().
    • Objects – Spread into object literals. (ES2018)
      • When used with objects can replace Object.assign().
    • Strings – Spread into array literals, can be used with a function. (ES2015)
  • Rest Operator (...) (see 4.8) – Unlike spread which destructures, the Rest Operator structures.
    • Used as a function parameter to indicate that extra arguments should be wrapped as an array.
    • To take “extra” values from destructuring and place into an array.
    • “Careful not to confuse the spread operator with the rest operator. The ... operator is identical but the context in which it is used changes how the operation functions. The rest operator is used when defining function parameters and destructuring. The spread operator turns iterable items into arguments for functions, into properties for Object literals, or elements for Array literals.”
  • Template Literals (see 4.9) – “Characters wrapped in backticks (i.e. string here) instead of quotes are considered template string literals that return a String value. Template literals support line breaks and interpolation (i.e. a template like syntax for easily inserting values into the string, using ${})."
  • Tagged Template Literals (see 4.10) - (ES2015)
  • Fat Arrow Function Expressions (see 4.11) - (ES2015)
    • Used due to conciseness and provision of a lexical this.
    • Not recommended for non-method functions.
    • Cannot be used as constructor functions.
  • Trailing Commas Support (see 4.12) - (ES2015/2017)
  • for-of loop (see 4.13) - "The for-of loop goes through an iterable and assigns each entry in the iterable one at a time to the variable(s) define[d] before the of keyword." (ES2015)
    • Can be used on any iterable - strings, arrays, maps, sets
    • Can use Object.entries() and destructuring with for-of loops. (ES2017)
  • Shorthand Property Names (see 4.14) - (ES2015)
  • Shorthand Method Names (see 4.15) - (ES2015)
  • Computed Property Names (see 4.16) - "Using brackets around property names/keys will permit the name/key to be a result of an expression." (ES2015)
  • See separate selection below for class syntax.
• String Methods (for ES5 see JavaScript Enlightenment 1.2, for ES2015/2017/? see 3.2)
  • .trim() - Removes "whitespaces" from end of string, create new string of result. (ES5).
  • .startsWith() - (ES2015)
  • .endsWith() - (ES2015)
  • .includes() - (ES2015) - Does string include specified substring?
  • .repeat() - (ES2015) - Repeats a string x times.
  • .padStart() - (ES2017) - Add non-breaking spaces (default) or specified characters to start of string.
  • .padEnd() - (ES2017) - Add non-breaking spaces (default) or specified characters to end of string.
  • .matchAll() - (ES?)
  • .trimStart() - (ES?)
  • .trimLeft() - (ES?)
  • .trimEnd() - (ES?)
  • .trimRight() - (ES?)
• Number Methods
  • Number Static Methods
    • .isInteger() - Returns true/false (ES2015, see JavaScript Enlightenment 3.1 for details).
• Array
  • Array Static Methods (for ES5 see JavaScript Enlightment 1.3, for ES2015 see 3.3).
    • .isArray() - Returns true/false, only returns true if value is an instance of the Array() constructor. (ES5).
    • .from() - (ES2015) - Converts array-like values (objects with length property and indexed values) or iterable values (String, Array, TypedArray, Map, Set) into array values.
    • .of() - (ES2015) - Takes arguments and creates array.
  • Array Methods (ES5, see JavaScript Enlightenment 1.4 for details, see 3.4 for ES2015/2016).
    • [].some() - Checks values in an array until condition is true, in which case it returns true. If no instance is found matching condition then returns false (ES5).
    • [].every() - Checks values in an array until condition is false, in which case it returns false. If all instances match, returns true (ES5).
    • [].filter() - Returns a new array containing all values that pass condition (are true) (ES5).
    • [].forEach() - Runs each value in an array through a given function (ES5).
    • [].indexOf() - Finds first value in array that has value passed in indexOf() and returns the index of the value in the array (ES5).
    • [].lastIndexOf() - Finds last value in array that has value passed in lastIndexOf() and returns the index of the value in the array (ES5).
    • [].map() - Runs each value through a specified function and returns the results in a new array (ES5).
    • [].reduce() - (ES5)
    • [].reduceRight() - (ES5)
    • [].findIndex() - Finds a specified value in an array and returns it's index.
    • [].find() - Finds and returns a specified value in an array.
    • [].includes() - Check if specified value is in array.
    • [].keys() - Returns keys of array as an array iterator object. (ES2015)
    • [].values() - Returns values of array as an array iterator object. (ES2015)
    • [].entries() - Returns array iterator with each item being a key-value array. (ES2015)
    • [].copyWithin() - Copy values from specified indexes in array and overwrite values at separately starting index in array. (ES2015)
    • [].fill() - Replaces values within an array with specified values. (ES2015)
    • [].flat() - (ES?)
    • [].flatMap() - (ES?)
• Objects
  • Getters and Setters (aka Accessors Descriptors or Computed Properties). (ES5, see JavaScript Enlightenment 1.5 for details).
    • Allows one to access methods as if they are properties, defined using get nameOfGetFunction() and set nameOfSetFunction(), called like obj.nameOfGetFunction().
  • Static Methods (ES5, see JavaScript Enlightenment 1.6 for details, 3.5 for ES2015/2017).
    • Object.create() - Create an object and set its prototype. (ES5)
    • Object.getPrototypeOf() - Easily find the prototype of an object. (ES5)
    • Object.defineProperty() - Allows for property to be defined with a descriptor (configurable, enumerable, value, writable, get, set). (ES5)
    • Object.defineProperties() - Allows for multiple properties to be defined simultaneously with a descriptor. (ES5)
    • Object.getOwnPropertyDescriptors() - Allows one to get the descriptor of a property. (ES5)
    • Object.getOwnPropertyNames() - Returns an array of non-inherited properties of the object. (ES5)
    • Object.preventExtensions() - If set, properties cannot be added but can still be deleted. (ES5)
    • Object.isExtensible() - Returns true/false. (ES5)
    • Object.seal() - If set, properties cannot be added or configured. (ES5)
    • Object.isSealed() - Returns true/false. (ES5)
    • Object.freeze() - If set, properties cannot be added, configured, or writable. (ES5)
    • Object.isFrozen() - Returns true/false. (ES5)
    • Object.is() - Takes two values, if values the same returns true. (ES2015)
    • Object.values() - Returns array of enumerable property values from an object. (ES2017)
    • Object.entries() - Returns object properties as key-value pairs inside an array, these key-value pairs together are then wrapped inside an array. (ES2017)
    • Object.assign() - Copies enumerable properties from one object to another. (ES2015)
      • Note: This is a shallow clone.
    • Object.fromEntries() - (ES?)
• Functions
  • Methods
    • bind() - Takes an existing function and creates a new function with specified value for this, but awaits future execution. (ES5, see JavaScript Enlightenment 1.7 for details).
• use strict Mode (ES5, see JavaScript Enlightenment 1.8 for details).
  • Provided by default (implicitly) when using JS modules.
• JSON Methods (ES5, see JavaScript Enlightenment 1.9 for details).
  • .parse() - Takes a JSON string and converts it to JS values.
  • .stringify() - Takes JS values and converts to JSON string.
• Map() - "Maps are key-value pairs stored in insertion order...Think of Maps as objects but with a built-in native API for working with the object and its key-value pairs." (ES2015, see 5.1)
  • “When should you use Maps over object literals? Use a Map when you are performing a lot of work on the entries and the built in methods make everything simpler…”
  • There is also weakMap() which only has set(), delete(), and has() methods.
  • .forEach()
  • .entries()
  • .keys()
  • .values()
  • .set() – Returns the map.
  • .get()
  • .has()
  • .clear()
  • .size()
• Set() – “Sets are values stored in a specific order that can’t contain a duplicate. Sounds a bit like an Array object right…? Think of Sets as Arrays but with a built in API for working with items in the Array and the bonus of automatically eliminating duplicates.” (ES2015, see 5.2)
  • There is also weakSet which can only hold values that are objects and removed values (without references) are garbage collected. It can’t be iterated over and provides only add(), delete(), and has() methods.
  • .forEach()
  • .entries() – Uses each value in set as both the key and value in output.
  • .keys() – Returns same as values.
  • .values()
  • .has() – Returns if set contains a value.
  • .add() – Adds values to set.
    • Returns the set and thus can be chained together.
  • .delete() – Deletes value from set.
  • .clear() – Removes all ordered values (aren’t they all always ordered?).
  • .size() – Gets size of set.

Class Syntax (ES5/ES2015+)

• See JavaScript Enlightenment Chapter 6.
• “ES2[01]5 class syntax is a cleaner way to work with prototype inheritance and object factories. The class, extend, constructor, super, and static keywords simplify and conceal what was already possible with JavaScript.
• One can create classes as an expression or declaration (see 6.2).
• The class constructor method (see 6.3).
• Class methods (see 6.4).
• static Class methods (see 6.5).
• extend (see 6.6, 6.9).
• super (see 6.7, 6.8).

Promises (ES5/ES2015+)

• See JavaScript Enlightenment Chapter 7.
• “Code that does not run completely as part of a normal execution cycle is said to run asynchronously. Asynchronously executed code in this context basically means that one defines code now to occur later in the future while not blocking other code from running synchronously. The simplest example of this is setTimeout().” (see 7.1)
• “Callback functions before ES2015 were the typical means in which one dealt with asynchronous programming situations. And even today, a simple callback function works just fine in many situations….However, asynchronous situations do exits that make using callback functions buggy and laborious.” (see 7.2)
• Promise API added in ES2015 to get around callback hell. (see 7.2)
• “An instance of a Promise is basically a function that typically houses asynchronous routines with two special functions to be called once the asynchronous work either completes or fails (i.e. resolve() or reject()). In short, a Promise provides the boilerplate around asynchronous code which results in an interface/methods for working with asynchronous code.” (see 7.3)
• Methods (including Static) for Promises
  • Promise.all() – “The Promise.all() static method takes an array of promises and will return a single promise when all the promises in the Array are fulfilled.” (see 7.9) (ES2015)
  • Promise.prototype.then() – “The then() method is used to provide a resolution and rejection function for a promise.” (see 7.6) (ES2015)
  • Promise.protoytpe.cache() (ES2015)
  • Promise.prototype.finally() (ES2018)
  • Promise.race() – “takes an Array of promises and will return only the first promise that is fulfilled.” (see 7.10) (ES2015)
  • Promise.reject() (ES2015) – static
  • Promise.resolve() (ES2015) – static
  • Promise.finally() – Runs whether the promise is resolved or rejected, see 7.8. (ES2018)
  • Promise.catch() – “The catch() method is typically used over providing each then() with a rejection parameter.” (see 7.7)
• “To produce a promise one only need to construct an instance of a promise from the Promise constructor passing the constructor one argument known as the executor function. The executor function is passed two argument functions, the first is called resolve, and the second is called reject.” (see 7.3)
• The Fetch API returns a Promise by default and is a replacement for the XMLHttpRequest API. (see 7.4)

Async Functions & await Operator (ES2017+)

• See JavaScript Enlightenment Chapter 8.
• “…the use of the await operator with async functions [allows writing asynchronous code that looks] more like synchronous/procedural code.” (see 8.0)
• One needs to understand Promises to understand async and await, the latter enhance the former but do not replace it.
• “An async function returns a promise that is typically resolved using the await operator. Think of an async function as a syntactical replacement for an executor function and the await operator as an inline syntactical replacement for then().” (see 8.1)
• “Using async functions and the await operator to handle asynchronous code is a stylistic choice with some subjective benefits over traditional promises.” (see 8.2)

Modules (ES2015+)

• See JavaScript Enlightenment Chapter 9 and Chapter 10.
• Prior to ES2015 there was no native module support in JS.
• Node uses CommonJS modules but these are being replaced by the native JS modules over time.

Using Modern JavaScript (ES5/ES2015+)

• Online
  • Babel’s REPL.
  • Codesandbox.
• Compile
  • Babel – Literally allows more recent versions.
    • babel-standalone – Allows for dynamic compilation at runtime.
  • TypeScript – Typed twist on JS with support for some newer syntax.
• Bundlers
  • Webpack
  • Parcel
• Polyfills
  • babel-polyfill