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 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’

var person = {

name : 'Viet' ,

age : 2 4 ,

job : 'dev'

}

var name = person . name / / name = 'Viet'

var age = person . age / / age = 2 4

var job = person . job / / job = 'dev'



Using Destructuring Assignment : var person = { name: ‘Viet’, age: 24, job: ‘dev’ } var { name, age, job } = person // name = ‘Viet’, age = 24, job=’dev’

var person = {

name : 'Viet' ,

age : 2 4 ,

job : 'dev'

}

var { name, age, job } = person / / name = 'Viet' , age = 2 4 , 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: var userName = person.name // name = ‘Viet’ var userAge = person.age // age = 24 var userJob = person.job // job = ‘dev’

var userName = person . name / / name = 'Viet'

var userAge = person . age / / age = 2 4

var userJob = person . job / / job = 'dev'



With Destructuring Assignment : var { name: userName, age: userAge, job: userJob } = person // name = ‘Viet’, age = 24, job=’dev’

var { name : userName, age : userAge, job : userJob } = person / / name = 'Viet' , age = 2 4 , job = 'dev'



For cases where it is necessary to retrieve values ​​from an object within an object , we use the following: var person = { info: { name: ‘Viet’, age: 24, job: ‘dev’ } } var { info: { name, age, job } } = person // name = ‘Viet’, age = 24, job=’dev’

var person = {

info : {

name : 'Viet' ,

age : 2 4 ,

job : 'dev'

}

}

var { info : { name, age, job } } = person / / name = 'Viet' , age = 2 4 , job = 'dev'



Note that Destructuring Assignment does not limit the number of object classes that overlap. Memory management in Javascript. The mouse trap in the Javascript Date.setMonth () function

Use Destructuring Assignment to separate values ​​from Array

Similar to Object, Destructuring Assignment helps the “peeling” value from an Array so easier var arr = [1, 2, 3, 4, 5] var first = arr[0] // first = 1 var second = arr[1] // second = 2

var arr = [ 1 , 2 , 3 , 4 , 5 ]

var first = arr [ 0 ] / / first = 1

var second = arr [ 1 ] / / second = 2



Using Destructuring Assignment : var arr = [1, 2, 3, 4, 5] var [ first, second ] = arr // first = 1, second = 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 index in Array and based on the ‘,’ to distinguish index, for example if you want to get the first and fourth values ​​in the array: var arr = [1, 2, 3, 4, 5] var [ first,,, fourth ] = arr // first = 1, fourth = 4

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 var arr = [1, 2, [3, 4]] var [a, b, [c, d]] = arr // a = 1, b = 2, c = 3, d = 4

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: var ob = { arr: [1, 2] } var { arr: [a, b] } = ob // a = 1, b = 2

var ob = { arr : [ 1 , 2 ] }

var { arr : [ a, b ] } = ob / / a = 1 , b = 2



Object inside Array: var arr = [10, { name: ‘Viet’, age: 24 }] var [, { name, age }] = arr // name = ‘Viet’, age = 24

var arr = [ 1 0 , { name : 'Viet' , age : 2 4 } ]

var [ , { name, age } ] = arr / / name = 'Viet' , age = 2 4



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: var printUserInfo = function(person) { var { name, age, jon } = person console.log(‘UserName: ‘, name) }

var printUserInfo = function ( person ) {

var { name, age, jon } = person

console . log ( 'UserName: ' , name )

}



Destructuring Assignment allows to shorten the above code , becoming: var printUserInfo = function({ name, age, jon }) { console.log(‘UserName: ‘, name) }

var printUserInfo = function ( { name, age, jon } ) {

console . log ( 'UserName: ' , name )

}



Similar to Array: var sum = function([a, b]) { return a + b } sum([1, 2]) // 3

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: techtalk.vn

Share This:

































