Use Destructuring Assignment In Javascript
- Tram Ho
Introduce
In this article, I would like to share about Destructuring Assignment – an extremely useful syntax of JavaScript that I almost use it every day, every time I work with JS.
According to the official definition on MDN , “Destructuring Assignment is a Javascript expression that allows to take the value (value) from within (array) or attribute (properties) in objects and assign new variables.”
In the process of developing JS applications, we rarely work with one or two simple data types such as Number, String, etc., but often have to work with multiple data types, especially with data types. “synthetic” data like Object or Array (in JS, the array is also an Object). Destructuring Assignment helps us interact with Object in a scientific way and is much shorter than Es5 or older syntax, making code easy to read as well as increasing development speed and maintainability.
Use
In this section I will show the typical case of Destructuring Assignment when working with JS.
Use Destructuring Assignment to get the value from Object
In the case we get an Object and want to “peel” into separate values, for example
1 2 3 4 5 6 7 8 | var person = { name: 'Viet', age: 24, job: 'dev' } var name = person.name // name = 'Viet' var age = person.age // age = 24 var job = person.job // job = 'dev' |
Using Destructuring Assignment :
1 2 3 4 5 6 | var person = { name: 'Viet', age: 24, job: 'dev' } var {name, age, job} = person // name = 'Viet', age = 24, job = 'dev' |
The two above code will give similar results, obviously using Destructuring Assignment is more concise, and if we want to use variable names other than the name of the attribute inside Object, such as:
1 2 3 | var userName = person.name // name = 'Viet' var userAge = person.age // age = 24 var userJob = person.job // job = 'dev' |
With Destructuring Assignment :
1 | var {name: userName, age: userAge, job: userJob} = person // name = 'Viet', age = 24, job = 'dev' |
For cases where it is necessary to retrieve values from an object within an object , we use the following:
1 2 3 4 5 6 7 8 | var person = { info: { name: 'Viet', age: 24, job: 'dev' } } var {info: {name, age, job}} = person // name = 'Viet', age = 24, job = 'dev' |
Note that Destructuring Assignment does not limit the number of object classes that overlap.
Use Destructuring Assignment to separate values from Array
Similar to Object, Destructuring Assignment helps the “peeling” value from an Array so easier
1 2 3 | var arr = [1, 2, 3, 4, 5] var first = arr [0] // first = 1 var second = arr [1] // second = 2 |
Using Destructuring Assignment :
1 2 | var arr = [1, 2, 3, 4, 5] var [first, second] = arr // first = 1, second = 2 |
It should be noted that Destructuring Assignment allows to retrieve a correct value according to the index in Array and based on the ‘,’ to distinguish the index, for example if you want to get the first and fourth values in the array:
1 2 | var arr = [1, 2, 3, 4, 5] var [first ,,, fourth] = arr // first = 1, fourth = 4 |
At the same time we can also use Destructuring Assignment for Array inside Array as follows
1 2 | var arr = [1, 2, [3, 4]] var [a, b, [c, d]] = arr // a = 1, b = 2, c = 3, d = 4 |
A bit more complicated, if combining the Destructuring Assignment between Object and Array, it will be as follows
Array inside Object:
1 2 | var ob = {arr: [1, 2]} var {arr: [a, b]} = ob // a = 1, b = 2 |
Object inside Array:
1 2 | var arr = [10, {name: 'Viet', age: 24}] var [, {name, age}] = arr // name = 'Viet', age = 24 |
To avoid confusion, just be aware that for Object we always rely on the Properties and Index for Array.
Use Destructuring Assignment to pass parameters to Function
When function receives object as parameter, for example:
1 2 3 4 | var printUserInfo = function (person) { var {name, age, jon} = person console.log ('UserName:', name) } |
Destructuring Assignment allows to shorten the above code , becoming:
1 2 3 | var printUserInfo = function ({name, age, jon}) { console.log ('UserName:', name) } |
Similar to Array:
1 2 3 4 | var sum = function ([a, b]) { return a + b } sum ([1, 2]) // 3 |
summary
In this article I have shared details about Es6 Destructuring Assignment in Javascript , the concept as well as the cases are often applied, hoping the article is useful for readers.
Source : viblo