JavaScript Destructuring assignment

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Extensions
> Step 2: And Like the video. BONUS: You can also share it!

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.

ChromeEdgeFirefoxInternet ExplorerOperaSafari
491345x36x

(Last Updated - 2016/08/18)



Got any JavaScript Question?