[book note] Manning MEAP: JavaScript Next – Unit 1: Variables & Strings

Unit 1: Variables and & Strings

Lesson 1. Declaring Variables with let

In the history of JavaScript, variables have always been declared using the keyword var. ES6 introduces two new ways to declare variables, with the let and const keywords. Both of these work slightly different than variables with var. There are two primary differences with let:

let variables have different scoping rules

let variables have differently when hoisted

Priming Exercise:

for (var i = 0; i < 5; i++) {
  setTimeOut(function () {
  }, 1);

for (let n = 0; n < 5; n++) {
  setTimeOut(function () {
  }, 1);

1.1 How Scope Works with let

if (true) {
  let foo = 'bar';

// An error is thrown because foo does not exist outside the block it was declared in.

This makes variables much more predictable and won’t lead to bugs introduced because the variable leaks outside of the block is used within. A block is the body of a statement or function. It is the area between the opening and closing curly braces, { & }. You can even use curly braces to create a free standing block that isn’t tied to a statement.

There is one exception to that rule though, in a for loop a variable declared with a let inside the for loop’s clause will be in the scope of the for loop’s block:

Read More »

[book note] Manning MEAP: JavaScript Next – Unit 2: Objects & Arrays

Unit 2 Objects & Arrays

Lesson 5: New Array Methods

Arrays are probably the most common data structure used in JavaScript. We use them to hold all kinds of data but sometimes getting the data we want into or out of the array isn’t as easy as it should be. However those tasks just got a whole lot easier with some of the new array methods that we will cover. In this lesson we will cover the following:

  • Constructing Arrays with Array.from
  • Constructing Arrays with Array.of
  • Constructing Arrays with Array.prototype.fill
  • Constructing Arrays with Array.prototype.includes
  • Constructing Arrays with Array.prototype.find

Priming Exercise: Consider this snippet of jQuery code that grabs all the DOM nodes with a specific CSS class and sets them to be red. If you were going to implement this from scratch what considerations would you have to make? For example, if you were to use document.querySelectorAll which returns a NodeList (not an Array) how would you iterate each node to update its color?

$('.danger').css('color', 'red')

Read More »