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.

The JavaScript Object Model

• Read The JavaScript Object Model: A deep dive into prototypes and properties.
  • There's also a video Show archive.org snapshot of that talk in our internal library.
• The first three sections of the article Inheritance and the prototype chain on mdn Show archive.org snapshot also gives a good introduction into JavaScript's Object model.

ES6 ("ES Next")

• Understand what modules are Show archive.org snapshot and what export Show archive.org snapshot and import Show archive.org snapshot do.
• Understand the meaning of semicolons Show archive.org snapshot in JavaScript. You will encounter code with and without them.

Equality

• Understand the different meanings of equality in JavaScript Show archive.org snapshot
• Understand why we should always use ===, never == Show archive.org snapshot
• Testing the type of a value
• Understand the benefit of LoDash's _.isEqual
• What the f*ck JavaScript? Show archive.org snapshot
• Understand that there is no way for a JavaScript class to define its own concept of equality

Closures

• Read " A javascript closures recap Show archive.org snapshot " to understand what a "closure" is in JavaScript
• Understand the reason for Immediately-Invoked Function Expression (IIFE) Show archive.org snapshot and the problem it solves. Are IIFEs still useful when we have ES6 modules?

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

Copyconst 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

Copyconst 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

Copyconst 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

Copyconst 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.