Introduction

Destructuring is a pattern matching technique that is added to Javascript recently in EcmaScript 6.

It allows you to bind a group of variables to a corresponding set of values when their pattern matches to the right hand-side and the left hand-side of the expression.

Syntax

• let [x, y] = [1, 2]
• let [first, …rest] = [1, 2, 3, 4]
• let [one, , three] = [1, 2, 3]
• let [val=‘default value’] = []
• let {a, b} = {a: x, b: y}
• let {a: {c}} = {a: {c: ‘nested’}, b: y}
• let {b=‘default value’} = {a: 0}

Remarks

Destructuring is new in the ECMAScript 6 (A.K.A ES2015) specification and browser support may be limited. The following table gives an overview of the earliest version of browsers that supported >75% of the specification.

Destructuring Objects

Destructuring function arguments

Nested destructuring

Destructuring arrays

Destructuring inside variables

Default value while destructuring

Renaming variables while destructuring

Using rest parameters to create an arguments array

Feedback about page:

Feedback:

Optional: your email if you want me to get back to you:

Send Feedback Cancel

---