Modern JS Talk: Destructuring Assignment

This article was originally published on bmf-tech.com . ※This article is a reprint from the Innovator Japan Engineers’ Blog . What is Destructuring Assignment Destructuring assignment is an expression that assigns data from arrays or objects to separate variables. It might be hard to visualize just from the text. Let's look at some examples to understand better. Array Destructuring let a , b , c ; [ a , b , c ] = [ 1 , 2 , 3 ] console . log ( a , b , c ) // 1 2 3 let color = [ 1 , 2 , 3 ] const [ red , green , yellow ] = color console . log ( red , green , yellow ) // 1 2 3 You can intuitively understand it. You can also set default values for elements extracted from the array that are undefined during destructuring. const [ red = 4 , green = 5 , yellow = 6 ] = [ 1 , 2 ] // when yellow is undefined console . log ( red , green , yellow ) // 1, 2, 6 It's like specifying default values for function arguments. Object Destructuring ({ a , b } = { a : ' foo ' , b : ' bar ' }) // Destructurin