Assigning default values to variables destructured from a JavaScript object

This is first in the 10 part series of useful ES6 features. We are going to learn how to assign default values to variables destructured from a JavaScript object, which may come in handy if we'd like to avoid setting those variables to undefined because a certain field is not specified in the object we are destructuring from.

We start with an object which describes a square. A square has two sides, sideA and sideB, and we also give it a color.

const square = {
  sideA: 10,
  sideB: 10,
  color: "blue"
};

We then calculate the area of this square. To do that, create a new function which is called calculateArea. It's going to take the square as an argument.

const calculateArea = square => {
  //I'm going to destructure sideA and sideB from this square object
  const { sideA, sideB } = square;
  //I'm going to return sideA multiplied by sideB
  return sideA * sideB;
};

//I'm going to console log the result of calling `calculateArea` and I'm going to pass in my original square object to this function.
console.log(calculateArea(square)); //returns 100

We have the result which is equal to 100.

Let's see what happens if I'm going to remove one of those sides of this square.

const square = {
  sideA: 10,
  color: "blue"
};

const calculateArea = square => {
  const { sideA, sideB } = square;
  return sideA * sideB;
};

console.log(calculateArea(square)); // returns `NAN`

Right now, the result is NAN because here we are destructuring this square object and sideA is going to be equal to 10, but side B is not defined in this square object and is going to be equal to undefined.

TIP - NaN stands for “not a number”, even though it is a value of the number type.You’ll get this result when you, for example, try to calculate 0 / 0 (zero divided by zero), Infinity - Infinity, or any number of other numeric operations that don’t yield a meaningful result.There is only one value in JavaScript that is not equal to itself, and that is NaN (“not a number”).

console.log(NaN == NaN)
// → false

NaN is supposed to denote the result of a nonsensical computation, and as
such, it isn’t equal to the result of any other nonsensical computations.
- Marijn Haverbeke, Eloquent Javascript

In this case we are multiplying undefined by 10 and the result is of course NAN. Luckily, we can give those sideA and sideB variables destructured from this square object default values, so that whenever each one of those is not provided, the function is going to provide 0 instead of NAN.

To do that, set the default value of sideA and sideB like this.

const calculateArea = square => {
  const { sideA = 0, sideB = 0 } = square;
  return sideA * sideB;
};

Now we have the desired effect, that sideB is going to take the default value of 0 unless any other value was provided.

If I define sideB again to be equal to 10, I'm going to get the proper result. Those default values are only taken into account whenever sideA or sideB is undefined inside of the square object.

Next Part2, in this series, is going to be about Learning Template Literals.Stay Tuned!

If you found this article helpful, please tap the Follow this channel for more articles on Javascript.