Javascript- Useful tips,tricks and Best Practices
Tags: javascript, webdev, beginners, tutorial
Published: 2020-03-04 18:32:12

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

```javascript
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.

```javascript
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. 
```javascript
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”).
```javascript
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](https://amzn.to/32REB1S)

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. 
```javascript
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 <img src="https://practicaldev-herokuapp-com.freetls.fastly.net/assets/emoji/emoji-one-unicorn-695106da1194513bfa0092f1a75943f59089be7d6addbc7459bdfab80f5709e6.png" alt="drawing" width="30" height="30"/> Follow this channel for more articles on Javascript.