#destructuring

Destructuring assignments allow you to quickly unpack values from data structures like arrays and put them directly into variables or constants. For example:

const [a, b, c] = [1, 2, 3]; console.log(a, b, c); // 1 2 3

Variables or constants can be on both sides of the assignment, so it can be used to swap values without using temporary variables:

let d = 1, e = 2; [d, e] = [e, d]; console.log(d, e); // 2 1

This tends to be useful when iterating over arrays of objects:

const cars = [ { id: 'miata', value1: 155, value2: 2400 }, { id: '4c', value1: 237, value2: 2465 }, { id: 'elice', value1: 217, value2: 2000 } ]; function swapProperties(arr, property1, property2) { for (const ele of arr) { [ele[property1], ele[property2]] = [ele[property2], ele[property1]] } return arr; } console.log(swapProperties(cars, 'value1', 'value2')); // [ { id: 'miata', value1: 2400, value2: 155 }, // { id: '4c', value1: 2465, value2: 237 }, // { id: 'elice', value1: 2000, value2: 217 } ]

I already have a sidebar for my most popular posts. Though popular doesn't necessarily mean better. So below is a list of what I think are the 5 best posts that are not in the top 10 from 2017 (as of December 2016):

1. Template Literals in JavaScript A new way of defining strings with significantly reduced syntax. Whenever I have a string that involves variables or multiple lines and the environment I am working in supports Template Literals, I use them instead of regular strings.

2. New Explained in JavaScript There is still confusion about the new keyword in JS. This post explains the difference by implementing a function that does exact what new does. With class syntax usage becoming common in JavaScript code these days, this is very important to know.

3. JavaScript Promisify Easily convert asynchronous APIs to promises. Which results in having one simple and standard way to access all asynchronous content.

4. Destructuring Assignments in JavaScript How to handle returns of multiple values in JavaScript in one line. Useful for more complex functions that can generate multiple results.

5. When To Use Let and Const in JavaScript let and const make code with var more predictable.

Posts of Previous Years

Best Posts Of 2016

A destructuring assignment allows mapping data structures directly to objects. For example, if I wanted to return the sum of values and number of keys of an object from a single function:

function sumAndLength(obj) { let sum = 0; for (let keyName in obj) { sum += obj[keyName]; } return [sum, Object.keys(obj).length]; } const obj = { property1: 150, property2: 200, property3: 175, }; let [sum, length] = sumAndLength(obj); console.log(sum, length); // 525, 3

This is very useful for simple functions where it is more convenient to return multiple results, but destructuring really becomes useful with object returns. Here is an example request that sends back (very simple) HTTP request data:

function simulateRequest(callback) { setTimeout(function() { callback({ statusCode: 200, body: { content: 'Request succeeded' } }); }, 500); }; simulateRequest(function(response) { const { statusCode: code, body: { content: bodyContent } } = response; console.info(code, bodyContent); // 200 'Request succeeded' });

This looks strange at first, but is easier to read than 2 separate extracting statements for the 2 variables once you get used to it. Unlike the older seperate extractions, the important parts of the structure of the return object is apparent with just reading the extraction code. The original function or documentation do not need to be viewed.

I covered what I think are the most useful parts of destructuring that I personally used, but there are a few more edge cases you may want to know about. MDN gives a good list of them. Destructors are available in every browser except IE (but are available for MS edge).

I recently read about a nice feature in Kotlin language – Destructuring. Let’s see how it work and why we should use this skill.

Here is an example of destructuring:

(more…)