JavaScript Best Practices — const and Destructuring

JavaScript is a very forgiving language. It’s easy to write code that runs but has mistakes in it.

In this article, we’ll look at using const for declaring constants and using destructuring assignment syntax to assign property values and array entries to variables.

Using const to Declare Constants

The const keyword is one of the new JavaScript features that we should use often.

It lets us declare constants that can’t be reassigned to anything else its value has been set.

Also, we have to set it to a value when it’s defined so that it’s impossible for us to forget to assign it to something.

However, the object that it’s assigned to can still be mutated. For instance, we can still push on an array to add items to an array for example.

For instance, we can write the following code to declare a constant as follows:

const a = 1;

In the code above, we assigned a to 1. a is a constant, so we can’t assign it to any other value.

The is opposed to declaring variables with var or let , where we can assign the value to something else after it’s declared. For instance, we can write the following:

let a = 1;
a = 2;

or:

var b = 1;
b = 2;

If we reassign the value with something declared with const , we’ll get an error.

const can also be used with the destructuring assignment syntax, so we can declare multiple variables assign values to them all at once by using the syntax.

For instance, we can write the following:

const {
  a,
  b
} = {
  a: 1,
  b: 2
};

In the code above, we assigned a to 1 and b to 2 because the object on the right side has properties a and b with values 1 and 2 respectively.

a and b will be constants so they can’t be assigned to something else. If we do try to do that, we’ll get an error.

We can also do that with arrays as follows:

const [a, b] = [1, 2];

and get the same result as in the previous example.

Destructuring Arrays and Objects

The destructuring syntax in JavaScript is another syntax that we should use often.

It helps us destructure arrays and objects into variables. As we can see, from the examples in the previous section, we can destructure array entries and object properties into variables.

It’s easy to use and works with any nesting levels. We can destructure a nested array as follows:

const [
  [a], b
] = [
  [1], 2
];

In the code above, we destructured a nested array by putting the a inside the array on the left side. Then on the right side, we have 1 inside the array. Therefore, 1 will be assigned to a by the position that it’s located in the nested array.

Likewise, we can do the same thing with nested objects as follows:

const {
  a,
  b: {
    c
  }
} = {
  a: 1,
  b: {
    c: 2
  }
};

In the code above, we have the nested property c in the b property. By checking the position of c , the destructuring will be done because c on both sides have the same nesting level.

Therefore, it’s value will be assigned to c .

There’re more ways we can use the destructuring syntax. For instance, it’s very useful for destructuring properties and array entries in object parameters of functions.

We can destructure array entries in parameters into variables as follows:

const foo = ([a, b]) => a + b

In the code, we set the first 2 entries of the array parameter as values of variables a and b .

Then when we call it as follows:

foo([1, 2]);

Then we get 3 because a is 1 and b is 2.

Likewise, we can do that with object parameters. For instance, we can write the following:

const foo = ({
  a,
  b
}) => a + b

and we can call it as follows:

foo({
  a: 1,
  b: 2
})

and get the same return value of 3 because of the destructuring syntax applied to the object.

We can also use it in the for...of loop as follows:

for (const [key, value] of new Map([
    ['a', 1],
    ['b', 2]
  ])) {
  console.log(`${key} - ${value}`);
}

In the code above, we looped through a Map instance with the for...of loop and destructured the entries using the destructuring syntax into the key and value constants.

Therefore, we will see the items’ key and value logged.

Since the destructuring syntax is so convenient, we should use it everywhere.

Conclusion

We should use const to declare constants so that they can’t be reassigned to a different value accidentally.

The destructuring syntax is a very convenient way to assign array entries and object property values to variables directly. Therefore, we should use it everywhere.