I just saw something I have never seen before and cannot seem to find an explanation of what it really is... not in the ES5.1 standard and ES6 draft, nor in the Mozilla ES6 support.

Please explain technically what is happening (anonymous object, anonymous block?) and provide some reference to a section in the ES standard or some other resource that explains this.

The context is a firefox extension.

const // var also works here it seems
{
      classes    : Cc
    , interfaces : Ci
    , utils      : Cu

} = Components

It creates variables Cc, Ci, Cu on the current scope. It's kind of counter intuitive since this looks like an anonymous object, but then one would expect property names on the left and values on the right...

Source of the construct in question:

update: Thanks to Leo I found the right word for it (destructuring). I found this blog explains it quite nicely.

I just saw something I have never seen before and cannot seem to find an explanation of what it really is... not in the ES5.1 standard and ES6 draft, nor in the Mozilla ES6 support.

Please explain technically what is happening (anonymous object, anonymous block?) and provide some reference to a section in the ES standard or some other resource that explains this.

The context is a firefox extension.

const // var also works here it seems
{
      classes    : Cc
    , interfaces : Ci
    , utils      : Cu

} = Components

It creates variables Cc, Ci, Cu on the current scope. It's kind of counter intuitive since this looks like an anonymous object, but then one would expect property names on the left and values on the right...

Source of the construct in question: https://developer.mozilla/en-US/Add-ons/Overlay_Extensions/XUL_School/JavaScript_Object_Management

update: Thanks to Leo I found the right word for it (destructuring). I found this blog explains it quite nicely.

• javascript

Share Improve this question Follow edited May 3, 2017 at 6:52 Mistalis 18.3k1414 gold badges7777 silver badges9797 bronze badges asked Dec 26, 2014 at 3:24 user1115652user1115652

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

This is ES6 Destructuring. More specifically Object Destructuring.

Components should be something like this:

{classes: 'asdf', interfaces: 'qwer', utils: `zxcv`}

Then you get three constants (defined with const, which is readonly after assignment):

Cc // 'asdf'
Ci // 'qwer'
Cu // 'zxcv'

As the Mozilla documentation states:

It's a mon practice to abbreviate Components.classes and Components.interfaces by storing a reference to the object as a constant:

const Cc = Components.classes, Ci = Components.interfaces;

var os = Cc["@mozilla/observer-service;1"] .getService(Ci.nsIObserverService);

What you're seeing here is this mon practice pacted further with ES6 object destructuring.