5

I was looking through some code from a firefox extension (here: https://github.com/mozilla/prospector/blob/master/oneLiner/bootstrap.js#L34 ) and I saw something I'd never seen before in javascript. The programmer has used an associative array as the variable name. Could someone explain to me how this variable referencing works?

const {classes: Cc, interfaces: Ci, utils: Cu} = Components;

I understand the "const" from reading this page: https://developer.mozilla.org/en/JavaScript/Reference/Statements/const

but how is it able to use an associative array object as a variable name?

Also, it seems to be using key names in the associative array as references to the Components methods (listed here: https://developer.mozilla.org/en/Components_object ). I always thought a key name had to go first and then the value, but this seems to put the value of the reference to the Components classes method first and then assign it to a name of Cc even though Cc is in the spot where a value would go (and Ci for the Components interfaces method & Cu for Components utils method).

Wladimir Palant
  • 56,865
  • 12
  • 98
  • 126
Yansky
  • 4,580
  • 8
  • 29
  • 24
  • 2
    In JavaScript, the usual term for what you've called an "associative array" is just "object" (or sometimes "map" or "dictionary"). We avoid saying "associative array" because it's confusing to lesser-informed folks who think it relates to the `Array` type. – T.J. Crowder Apr 27 '12 at 12:06
  • 2
    possible duplicate of [Constant declaration with block](http://stackoverflow.com/questions/10199229/constant-declaration-with-block) – Wladimir Palant Apr 27 '12 at 13:05

2 Answers2

6

What you are seeing is a Destructuring assignment, it is available since javascript 1.7 see this documentation for more information https://developer.mozilla.org/en/JavaScript/New_in_JavaScript/1.7

Destructuring assignment makes it possible to extract data from arrays or objects using a syntax that mirrors the construction of array and object literals. The object and array literal expressions provide an easy way to create ad-hoc packages of data. Once you've created these packages of data, you can use them any way you want to. You can even return them from functions.

GillesC
  • 10,647
  • 3
  • 40
  • 55
  • Big +1. And apparently, ECMAScript6 will have *some* kind of destructuring assignment, although it may not (or may) be fully compatible with Mozilla's. – T.J. Crowder Apr 27 '12 at 12:08
  • Thanks for the link. I had searched google before I posted but didn't come up with anything. This example seems to explain it pretty well: https://developer.mozilla.org/en/JavaScript/New_in_JavaScript/1.7#Looping_across_values_in_an_array_of_objects It still seems weird swapping the key:value around though. – Yansky Apr 27 '12 at 12:24
0

Yeah, check this out:

var abc = {classes: "ABC", interfaces: "DEF", utils: "XYZ"};
const {classes: Cc, interfaces: Ci, utils: Cu} = abc;
console.debug("test: ", Cc, Ci, Cu);

Looks like a lot of fun, especially for the one who is reading the code :)

Igor Deruga
  • 1,504
  • 1
  • 10
  • 18
  • The worst point is that it's only compatible with Firefox. So basically you force your reader to learn (and keep separate) a different language. – Denys Séguret Apr 27 '12 at 12:14
  • Well, I've tried this [link](http://therelentlessfrontend.com/2010/10/02/how-to-get-the-javascript-version/) and it told me that my chrome supports 1.7 too, and firefox - 1.8, but this statement doesn't work in chrome... furthermore, IE9 supports only 1.3 :D – Igor Deruga Apr 27 '12 at 12:48