Best of Modern JavaScript — Object and Array Parameter Destructuring

Since 2015, JavaScript has improved immensely.

It’s much more pleasant to use it now than ever.

In this article, we’ll look at working with objects and array parameter destructuring.

Objects and Names Parameters

We can pass in objects as parameters and destructure them into variables.

This way, we can have one object parameter that has multiple properties and we can turn them into variables.

Now we don’t have to have many parameters in our function.

For instance, we can write:

function foo({
  a = 1,
  b = 2,
  c = 3
}) {
  console.log(a, b, c)
}

And then we have an object parameter with properties a , b and c .

And we set their default values to 1, 2, and 3 respectively.

This way, we can pass in an object with any of these properties and they’ll be destructured.

Otherwise, we set the default values.

For example, we can write:

foo({
  a: 2,
});

Then a and b are 2 and c is 3.

a is passed in but b and c are set from the default values.

This is much shorter than what we have in ES5 or earlier:

function foo(props) {
  props = props || {};
  var a = props.a || 0;
  var b = props.b || -1;
  var c = props.c || 1;
  console.log(a, b, c)
}

We have the props parameter which is an object.

If it’s falsy, then we set it to an object.

And we assign the properties of it to variables after that.

We assign the default values if they’re falsy as opposed to only when they’re undefined .

As we can see, this is much longer and we might not want to return the default value for all falsy values.

Destructuring Arrays

We can destructure arrays in parameters.

For instance, we can write:

const arr = [
  ['foo', 3],
  ['bar', 19]
];
arr.forEach(([word, count]) => {
  console.log(word, count);
});

Then we have the arr array with arrays as entries.

We destructured the callback with the array and then we can use the nested entries as variables.

Also, we can use them to transform maps by converting them to arrays and calling the map method to do what we want with it.

We can write:

const map = new Map([
  [1, 'a'],
  [2, 'b'],
  [3, 'c'],
]);

const newMap = new Map(
  [...map]
  .map(([k, v]) => [k * 2, v])
);

We have a map with the arrays in it.

Then we created a new map by spreading the existing map to an array.

And then we called map to return the new entries.

The spread operator will convert it to an array with the entries being arrays of the key and value of each entry.

Therefore, we can use the destructuring assignment in the same way.

We can do the same thing with an array of promises.

For example, we can write:

const promises = [
  Promise.resolve(1),
  Promise.resolve(2),
  Promise.resolve(3),
];

Promise.all(promises)
  .then(([foo, bar, baz]) => {
    console.log(foo, bar, baz);
  });

We destructured the array parameter in then .

Then we get the destructured variables in the console log.

They have all the resolved values.

Conclusion

We can destructure object and array parameters to assign properties and array entries in arguments to variables.