295 Advanced JavaScript [2.5d]

Stepping forward from JavaScript Basics, the goal of this card is for you to be able to read and write more complex ES6+ code.

Important

Work on this lesson in builder mode.

Learning goals

• You can explain JavaScript's object model — objects, prototypes and the prototype chain — and how class syntax maps onto it.
• You can explain what a module is and structure code with import/export instead of globals.
• You can explain the different notions of equality in JavaScript, why we always use strict equality, and how to compare objects structurally (e.g. with a helper like Lodash's isEqual) since a class cannot define its own equality.
• You can explain what a closure is and predict what a callback logs when it captures a loop variable declared with var or let, or through an IIFE.
• You can read code written with and without semicolons and explain the rules that make both work.
• You can use ES6+ language features in your own code, such as classes, rest parameters, destructuring and template literals.
• You know how the placement and attributes of a <script> tag (e.g. defer) determine when your code runs.

Resources

Read what's new to you, skim what's familiar, skip what you already master. Stop when you can meet the learning goals.

Your agent can also generate an overview, a tutorial or an explanation for anything here, tailored to what you already know. Just ask.

The object model

• 📄 The JavaScript object model: a deep dive into prototypes and properties — our card, with a video of the talk Show archive.org snapshot in our library
• 📄 MDN: Inheritance and the prototype chain Show archive.org snapshot — the first three sections

Modules and syntax

• 📄 MDN: JavaScript modules Show archive.org snapshot — what a module is, export Show archive.org snapshot and import Show archive.org snapshot
• 📄 MDN: Automatic semicolon insertion Show archive.org snapshot — the rules that make code with and without semicolons work
• 📄 You should probably load your JavaScript with <script defer> — when your code runs

Equality

• 📄 MDN: Equality comparisons and sameness Show archive.org snapshot — ==, === and Object.is
• 🎮 JavaScript equality table Show archive.org snapshot — why we always use ===
• 📄 JavaScript: testing the type of a value — our card
• 📄 What the f*ck JavaScript? Show archive.org snapshot — the surprising cases, for fun and for recognizing them later

Closures

• 📄 A JavaScript closures recap Show archive.org snapshot — what a closure is
• 📄 MDN: IIFE Show archive.org snapshot — the problem immediately-invoked function expressions solved, and whether modules make them obsolete

Closure examples

Have a look at the following examples. Each code snippet is trying to "save away" a local variable i or k in a callback function which can write it to console.log. Understand why each code block behaves the way it does:

Variant 1: Iterating with forEach's callback function

const callbacks = [];

[1, 2, 3].forEach(function(i) {
  callbacks.push(function() { console.log(i) })
})

callbacks.forEach((callback) => callback())

Example 2: Incrementing a variable created with var

const callbacks = [];

var i = 1;
while (i <= 3) {
  callbacks.push(function() { console.log(i) })
  i++
}

callbacks.forEach((callback) => callback())

Variant 3: Wrapping the push statement with an IIFE

const callbacks = [];

var i = 1;
while (i <= 3) {
  (function(k) {
    callbacks.push(function() { console.log(k) })
  })(i)
  i++
}

callbacks.forEach((callback) => callback())

Variant 4: Declaring a temporary variable with let

const callbacks = [];

var i = 1;
while (i <= 3) {
  let k = i
  callbacks.push(function() { console.log(k) })
  i++
}

callbacks.forEach((callback) => callback())

Exercises

Note

Now that you've learned about const and let, you shouldn't use var anymore in any future code you commit.

Note

Important: For the following exercises, don't simply use a library or Stackoverflow code for this. You can look at other people's code to see how it works, but you must understand the concepts and be able to implement them on your own.

• Read You should probably load your JavaScript with script defer, then apply it to your MovieDB
• Write a simple class in ES6
  • Class Rectangle with properties width and height. It offers an area method that returns the product of width and height.
• Write an average function that takes an arbitrary number of arguments ("rest parameters") and computes their arithmetic mean.
• Read JavaScript: Testing the type of a value. Then, write only one isEqual() method that compares whether two objects of the following types are equal:
  • string literals
  • number literals
  • undefined
  • null
  • Array, recursively compared by their elements. Their contents must have the same order.
  • Simple objects, recursively compared by their own properties.
  • Nested structures built from objects, arrays and primitive variables.