CODEWITHSUNDEEP
ecmascript-6reduxdestructuring
dvreed77
dvreed77

Reputation: 2387

Decypher ES6 const destructuring declaration

Can someone help me decypher this ES6 statement?

const {
    isFetching,
    lastUpdated,
    items: posts
  } = postsByReddit[selectedReddit] || {
    isFetching: true,
    items: []
  }

I pulled it from the Redux async example - https://github.com/reactjs/redux/blob/master/examples/async/containers/App.js#L81

Upvotes: 1

Views: 294

Answers (3)

Sheepy
Sheepy

Reputation: 18005

The code is simply declaring three constants, getting them from similarly named properties on an object if it is non-empty, otherwise get them from an object literal that acts as default values. I trust that you are confused over the object like syntax rather than the const keyword.

var|let|const { ... } = ... is an object destructuring declaration.

var|let|const [ ... ] = ... is an array destructuring declaration.

Both are short hand for "break down right hand side and assign to left hand side".

Destructuring can be done on array or object using different brackets. It can be part of a declaration or as stand-alone assignment.

const { isFetching } = obj; // Same as   const isFetching = obj.isFetching
var [ a, b ] = ary;         // Same as   var a = ary[0], b = ary[1]
[ a ] = [ 1 ];              // Same as   a = 1

For object destructuring, you can specify the property name. For array, you can skip elements by leaving blank commas. Destructuring can also form a hierarchy and be mixed.

const { items: posts } = obj;        // Same as   const posts = obj.items
var [ , , c ] = ary;                 // Same as   var c = ary[2]
let { foo: [ { bar } ], bas } = obj; // Same as   let bar = obj.foo[0].bar, bas = obj.bas

When destructuring null or undefined, or array destructure on non-iterable, it will throw TypeError. Otherwise, if a matching part cannot be found, its value is undefined, unless a default is set.

let { err1 } = null;                // TypeError
let [ err3 ] = {};                 // TypeError
let [ { err2 } ] = [ undefined ]; // TypeError

let [ no ] = [];                // undefined
let { body } = {};             // undefined
let { here = this } = {};     // here === this

let { valueOf } = 0;        // Surprise! valueOf === Number.prototype.valueOf

Array destructuring works on any "iterable" objects, such as Map, Set, or NodeList. Of course, these iterable objects can also be destructed as objects.

const doc = document;
let [ a0, a1, a2 ]  =  doc.querySelectorAll( 'a' ); // Get first three <a> into a0, a1, a2
let { 0: a, length } = doc.querySelectorAll( 'a' ); // Get first <a> and number of <a>

Finally, don't forget that destructuring can be used in any declarations, not just in function body:

function log ({ method = 'log', message }) {
  console[ method ]( message );
}
log({ method: "info", message: "This calls console.info" });
log({ message: "This defaults to console.log" });

for ( let i = 0, list = frames, { length } = frames ; i < length ; i++ ) {
   console.log( list[ i ] ); // Log each frame
}

Note that because destructuring depends on left hand side to specify how to destructre right hand side, you cannot use destructring to assign to object properties. This also excludes the usage of calculated property name in destructuring.

As you have seen, destructuring is a simple shorthand concept that will help you do more with less code. It is well supported in Chrome, Edge, Firefox, Node.js, and Safari, so you can start learn and use it now!

For EcmaScript5 (IE11) compatibility, Babel and Traceur transpilers can turn most ES6/ES7 code into ES5, including destructuring.

If still unclear, feel free to come to StackOverflow JavaScript chatroom. As the second most popular room on SO, experts are available 24/7 :)

Upvotes: 3

user6445533
user6445533

Reputation:

This is an additional response to the already given. Destructuring also supports default values, which enables us to simplify the code:

const {
  isFetching = true,
  lastUpdated,
  items = []
} = postsByReddit[selectedReddit] || {};

Upvotes: 3

xiaofan2406
xiaofan2406

Reputation: 3310

Basically:

var isFecthing;
var lastUpdated;
var posts;

if (postsByReddit[selectedReddit]) {
  isFecthing = postsByReddit[selectedReddit].isFecthing;
  lastUpdated = postsByReddit[selectedReddit].lastUpdated;
  posts = postsByReddit[selectedReddit].items.posts;
} else {
  isFecthing = true;
  items = [];
}

Upvotes: 0

Related Questions