Closures can be a confusing subject. But before we get into exactly what closures are, we should refresh our knowledge of scope since it's linked to closures.

Scope

Generally, scope works from inside to outside. So inside a function the function has access to its own local variables, and all variables in outer scopes - ie. global objects. But it won’t have access to variables that reside inside other functions - unless it’s nested inside another function, then it has access to its parent’s scope (and its parents, etc.). Let’s look at an example:

let globalVariable = "I'm global!";

function myFunction() {
  let localVariable = "I'm local to myFunction!";

  function insideFunction() {
    let innerVariable = "I'm in insideFunction!";

    console.log(innerVariable); // "I'm in insideFunction!";
    console.log(localVariable); // "I'm local to myFunction!";
    console.log(globalVariable); // "I'm global!";
  }
}

So insideFunction has access to the variables inside itself, and the parent myFunction, and finally the global scope (ie.globalVariable). But it doesn’t work from the outside in. Out in the global scope you can’t console.log neither localVariable (in myFunction) or innerVariable (in insideFunction):

console.log(innerVariable); 
// "ReferenceError: innerVariable is not defined" since it's inside a function and not available in global scope

Closures

Closure basically means that a function does not lose connection to the variables that existed when the function was created. Let’s look at an example of how this works:

function counterFunction() {
  let count = 0;

  return function () {
    count += 1;
    console.log(`Count is now ${count}`);
  };
}

let result = counterFunction();
result(); // "Count is now 1"
result(); // "Count is now 2"
result(); // "Count is now 3"

As you can see in the above example, the result function still has access to the count variable created inside counterFunction, even though that function has finished executing. It works because counterFunction returned a new function, which closes over its parent function and keeps access to its variables, even after the parent function is done executing. That’s how we’re able to use result to increase the count variable.

Summary

We have seen how scope works from inside to outside, and how a function closure preserves the outer scope inside its inner scope.

ES6 introduced the new destructing assignment feature, which makes it easy to destructure objects and arrays into variables.

Object destructuring

Let's take object destructuring:

const user = {
  firstName: "Christian",
  lastName: "Holm",
  age: 41
}

Before ES6 we would have to get the properties out of the object manually, by writing a new variable assignment for each property we wanted:

var firstName = user.firstName;  // "Christian"
var lastName = user.lastName;  // "Holm"
var age = user.age;  // 41

But with modern JavaScript we can use object destructuring:

const { firstName, lastName, age } = user;

console.log(firstName); // "Christian",
console.log(lastName); // "Holm",
console.log(age); // 41

The above code example creates the same three variables with data from the object.

If we only need firstname and lastname, we can specify just those two variables:

const { firstName, lastName } = user;

Alias

We can also create variables with different names:

const { firstName: name, lastName: last } = user;

console.log(name); // "Christian"
console.log(last); // "Holm"

Default value

You can set a default value in case the property doesn't exist in the object:

const { firstName, lastName, age, country = Denmark } = user;

console.log(firstName); // "Christian",
console.log(lastName); // "Holm",
console.log(age); // 41
console.log(country); // Denmark

Nested objects

You can destructure the properties of a nested object into individual variables:

// Object:
const admin = {
  isAdmin: true,
  name: {
    firstName: "Christian",
    lastName: "Holm",
  }
}

// Destructuing the nested name property:
const {
    name: {
        firstName,
        lastName
    }
} = admin;

console.log(firstName); // "John"
console.log(lastName); // "Smith"

Array destructuring

Arrays can also be destructured:

const users = ["Mike", "John", "Christian"];

const [a, b, c] = users;

console.log(a); // "Mike"
console.log(b); // "John"
console.log(c); // "Christian"

Rest syntax

If you only need some of the array values you can split them up like this:

const users = ["Mike", "John", "Christian", "Susan", "Joe"];

const [first, second, ...rest] = users;

console.log(first); // "Mike"
console.log(second); // "John"
console.log(rest); // ["Christian", "Susan", "Joe"]

Skipping values

You can also skip values with a comma:

const users = ["Mike", "John", "Christian"];

const [first, ,third] = users;

console.log(first); // "Mike"
console.log(third); // "Christian"

Swapping variables

There’s a trick for swapping the values of two or more variables using destructuring:

let a = 10;
let b = 20;

[a, b] = [b, a] 

console.log(a); // 20
console.log(b); // 10

Summary

That's it for this blog post. Hopefully you can see how and why destructuring is a handy new feature in modern JavaScript. It works on both objects and arrays and has a wide, ahem, array of possibilities...

The this keyword is often a source of confusion for new JavaScript programmers. In this blog post I'll explain what this is, and how it changes depending on use.

This always refers to an object. The object referenced changes depending on the execution context, ie. how you call the function. In other words this references the object of which the function is a property. Let's take a look at what this means:

const user = {
    firstName: "Christian",
    lastName: "Holm",
    fullName() {
        return `${this.firstName} ${this.lastName}`;
    }
}

user.fullName(); // "Christian Holm"

In the above example, this is used inside a method on the object "user". That's why it points to the user object. But if you were to use this inside a regular function it will behave differently:

function whatIsThis() {
   console.log(this);
}

whatIsThis(); // returns the global window object

The reason why is because we're calling whatIsThis() from the global object. It's inferred that what we're really calling is window.whatIsThis() and therefore this refers to the window object. However, if we use the strict mode this will return undefined instead of the window object.

You can use this easy rule to remember: this points to whatever is to the left of the function being called. So user.fullName() points to the user object, but calling a regular function just points to the global object (you can visualize it as window.function()).

Arrow functions

Arrow functions behave differently than regular functions. They don’t have their own this context. Instead they get this from their surrounding scope/parent (also known as lexical scope). So if you were to use an arrow function in our previous example, you would get window or undefined depending on whether or not you use strict mode:

const user = {
    firstName: "Christian",
    lastName: "Holm",
    fullName: () => {
        return this;  // simplified the example to show 'this'
    }
}

user.fullName(); // Window

Bind()

Finally let's talk about bind() and what it does. Bind() creates a new function and binds an object to it. We can then reference the bound object with this. Let's look at an example:

let john = {
  first: "John",
  last: "Doe"
}

let susan = {
  first: "Susan",
  last: "Smith"
}

function printName() {
  console.log(`${this.first} ${this.last}`);
}

let johnFunction = printName.bind(john);
johnFunction(); // "John Doe"

let susanFunction = printName.bind(susan);
susanFunction(); // "Susan Smith"

Summary

This changes depending on the execution context. Use the 'left of the dot' rule to remember what object the this keyword points to. And remember that arrow functions don't have their own this context, but instead uses its parent context.

In JavaScript there are three ways to define a variable. There's the old var and the new let and const.

Var can be reassigned multiple times:

var height = 180;
height = 200; // 200

Var doesn’t throw an error if you reuse a variable name in the same scope:

var number = 150;
var number = "hello, world"; // "hello, world"

Var variables are function scoped. That means they’re available everywhere in the scope where they were created (in a function or on the global window object). It can also cause problems if you create a temporary variable for use inside an if statement for example. Since it wasn’t created in a function, it’ll become a global scoped variable:

var age = 42;
if (age > 18) {
    var retirementYears = 68 - age;  // retirementYears is a global variable!
  console.log(`You can retire in ${retirementYears} years!`)
}

console.log(retirementYears) // 26

let and const

Which leads us to the two modern ways of using variables. Let and const are both block scoped. That means in the above example, dogYears would be a local variable only accessible from within that if-block:

let age = 42;
if (age > 18) {
    let retirementYears = 68 - age; // retirementYears is now local to this block
  console.log(`You can retire in ${retirementYears} years!`)
}

console.log(retirementYears) // ReferenceError: retirementYears is not defined

Let and const will only let you declare a variable once:

let name = "John Smith";
let name = "Jane Doe"; // SyntaxError: Identifier 'name' has already been declared

Differences between let and const

Let can be reassigned multiple times, where as const can only be assigned once:

let name = "Hiro Protagonist";
name = "Henry Case"; // "Henry Case"

const age = 24;
age = 25; // TypeError: Assignment to constant variable

Note however, that the value that the const variable points to can indeed change (if it’s a mutable type). So if const points to an array, the array itself can be changed without problem:

const ages = [10, 20, 25, 32];
ages.push(40); // [10, 20, 25, 32, 40]

But you still can’t assign another value to the const variable:

const ages = [60, 85] // TypeError: Assignment to constant variable

Summary

So in conclusion, you’ll want to use let and const instead of var. You might still see var in old code or in tutorials so it’s good to know. But let and const are the only variable types that should be used in modern JavaScript.

You should use let if the variable could be reassigned later, and const if the value isn’t going to change. Some people argue that if in doubt just use const all the time and you’ll get an error if you need to use let instead. But with time it should be easier to figure out which type to use.

let user = undefined;
console.log(user ?? 'Anonymous') // 'Anonymous'

If the user variable had been set to 'Jane Smith', the example above would say 'Jane Smith' instead of 'Anonymous':

let user = 'Jane Smith';
console.log(user ?? 'Anonymous') // 'Jane Smith'

So the ?? operator basically returns the first value if it's not null or undefined. But if the first value is null or undefined, it will return the second (right-hand) value.

"Now isn't this what || does?" you might say. Close, but not quite. The logical OR operator || also includes falsy values like 0. Since 0 might be a perfectly valid value to input, using the || operator would lead to bugs since we don't want to use default on a valid number. Using the ?? operator would fix that since it would return the 0 instead of a default value.