What does curly brackets in the `var { … } = …` statements do?

by

What you’re looking at is a destructuring assignment. It’s a form of pattern matching like in Haskell.

Using destructuring assignment you can extract values from objects and arrays and assign them to newly declared variables using the object and array literal syntax. This makes code much more succinct.

For example:

var ascii = {
    a: 97,
    b: 98,
    c: 99
};

var {a, b, c} = ascii;

The above code is equivalent to:

var ascii = {
    a: 97,
    b: 98,
    c: 99
};

var a = ascii.a;
var b = ascii.b;
var c = ascii.c;

Similarly for arrays:

var ascii = [97, 98, 99];

var [a, b, c] = ascii;

This is equivalent to:

var ascii = [97, 98, 99];

var a = ascii[0];
var b = ascii[1];
var c = ascii[2];

You can also extract and rename an object property as follows:

var ascii = {
    a: 97,
    b: 98,
    c: 99
};

var {a: A, b: B, c: C} = ascii;

This is equivalent to:

var ascii = {
    a: 97,
    b: 98,
    c: 99
};

var A = ascii.a;
var B = ascii.b;
var C = ascii.c;

That’s all there is to it.

More Related Contents:

  1. One-liner to take some properties from object in ES 6
  2. What is destructuring assignment and its uses?
  3. Where can I get info on the object parameter syntax for JavaScript functions?
  4. Is it possible to destructure onto an existing object? (Javascript ES6)
  5. ES6/ES2015 object destructuring and changing target variable
  6. How do I destructure all properties into the current scope/closure in ES2015?
  7. ES6 destructuring function parameter – naming root object
  8. How to destructure object properties with key names that are invalid variable names?
  9. Destructuring in Node.JS
  10. Destructuring and rename property
  11. ES6 Destructuring and Module imports
  12. Destructuring Nested objects in javascript | Destructure second level parent and child Objects
  13. ES6 destructuring object assignment function parameter default value
  14. How to destructure option argument with all default values in ES6?
  15. Curly brackets (braces) in Node.js ‘require’ statement
  16. Node JS / V8 destructuring bug?
  17. How to bind methods when destructuring an object in JavaScript?
  18. object destructuring: how to use intermediate nested property
  19. Javascript object literal: what exactly is {a, b, c}?
  20. Is it possible to import modules from all files in a directory, using a wildcard?
  21. Call async/await functions in parallel
  22. What does the @ mean inside an import path?
  23. ES6 Promise.all() error handle – Is .settle() needed? [duplicate]
  24. Filtering an array with a function that returns a promise
  25. Can I set the filename of a PDF object displayed in Chrome?
  26. When should I use brackets with imports
  27. es6 import for side effects meaning
  28. Error: How to serialize data from getStaticProps : Next.js
  29. Access to Script at ‘ from origin ‘null’ has been blocked by CORS policy
  30. How to namespace es6 classes (for React components)

Leave a Comment