Hello friends! Although javascript ES6 was introduced a long time ago, but I have not really understood and proficiently used the introduced features. Recently, I have learned and used a feature that I think is quite good and useful when we work with array or object literial, that is Destructuring. In this article I will introduce destructuring and the cases that need to use it.
Destructuring
Destructuring is an easy feature, simple and I use the most. The great thing is that this feature works with both arrays and objects in javascript.
1 2 3 4 5 6 7 8 | // Destructuring dùng với object literial var foo = { bar: 'pony', baz: 3 } var {bar, baz} = foo console.log(bar) // <- 'pony' console.log(baz) // <- 3 |
1 2 3 4 5 6 7 | // Destructuring dùng với array let [a, b] = [1, 2] console.log(a) // <- 1 console.log(b) // <- 2 |
Destructuring allows us to retrieve a specific property very quickly.
1 2 3 4 5 6 7 | var foo = { bar: 'pony', baz: 3, fod: 'trump' } var {bar, baz} = foo console.log(bar) // <- 'pony' console.log(baz) // <- 3 |
In addition, we can also name our variables with syntax.
1 2 3 4 5 6 7 | var foo = { bar: 'pony', baz: 3, foo: 'trump' } var {bar: a, baz: b} = foo console.log(a) // <- 'pony' console.log(b) // <- 3 |
They can also take properties deep inside an object and can also name properties deep inside them.
1 2 3 4 5 6 7 | var foo = { bar: { deep: 'pony', dangerouslySetInnerHTML: 'lol' } } var {bar: { deep, dangerouslySetInnerHTML: sure }} = foo console.log(deep) // <- 'pony' console.log(sure) // <- 'lol' |
By default, if the property is not found in the object, it will have the value undefined, just like when we try to get the value of a property that is not in the object.
1 2 3 4 | var {foo} = {bar: 'baz'} console.log(foo) // <- undefined |
If we try to get the value of a property deep inside that doesn’t exist in the object, an exception will be thrown.
1 2 3 | var {foo:{bar}} = {baz: 'ouch'} // <- Exception |
One of my favorite applications of destructuring is swapping values between two variables.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | function es5 () { var left = 10 var right = 20 var aux if (right > left) { aux = right right = left left = aux } } function es6 () { var left = 10 var right = 20 if (right > left) { [left, right] = [right, left] } } |
We can also use ‘computed property names’ in destructuring.
1 2 3 4 5 | var key = 'such_dynamic' var { [key]: foo } = { such_dynamic: 'bar' } console.log(foo) // <- 'bar' |
We can also assign a default value to a variable when that variable is undefined.
1 2 3 4 5 6 7 8 9 10 | var {foo=3} = { foo: 2 } console.log(foo) // <- 2 var {foo=3} = { foo: undefined } console.log(foo) // <- 3 var {foo=3} = { bar: 2 } console.log(foo) // <- 3 |
As mentioned above, destructuring also works with arrays, now we replace the {and} signs with [and] signs.
1 2 3 4 | var [a] = [10] console.log(a) // <- 10 |
Cases of using Destructuring
Following are some cases where destructuring will be helpful. When a function returns an object, then you want to attach the propery in that object to separate variables, destructuring will help you do that very simply.
1 2 3 4 5 6 7 8 9 10 11 12 | function getCoords () { return { x: 10, y: 22 } } var {x, y} = getCoords() console.log(x) // <- 10 console.log(y) // <- 22 |
Use destructuring in the function param
1 2 3 4 5 6 7 8 | function random ({ min=1, max=300 }) { return Math.floor(Math.random() * (max - min)) + min } console.log(random({})) // <- 174 console.log(random({max: 24})) // <- 18 |
1 2 3 4 5 6 | function random ({ min=1, max=300 } = {}) { return Math.floor(Math.random() * (max - min)) + min } console.log(random()) // <- 133 |
Above I introduced the syntax, the case should use destructuring. I hope my article will help you understand destructuring and use this feature in your code.