Understanding the Context of Curly Brackets '{}'

Question

I have been reviewing other people's code and while ES2015 on the whole is taking some getting use to, however, I keep on getting stuck with Destructuring.

Previously, In Javascript, the Curly Brackets {} were either used for blocks or objects. e.g.

// Curly Brackets Block
If () {
  ...
}

// Curly Brackets in Obj
var obj = {
  a : 1,
  ...
}

However, in destructuring, we see again and again the following syntax:

let a = ({ a, b }) => {
}

My question, is the arguments container an actual object or just a block? Please explain whether the following be the same as the code above:

let a = ( a, b ) => {
}

EDIT: My understanding (so far) from reading Axel Rauschmayers article on Destruturing is that we are merely mapping the props. into a new Obj always? I.e:

let a = { first : a, second : b } = AnObj;
===
a.a === AnObj.first;
a.b === AnObj.second;

Is the above correct? Is an obj always instantiated? However, that doesn't make sense as in the above function, the object thus created for the props would be an anonymous object, right?

Many thanks,

Sall

Read this one, will help you a lot Destructuring – Turkestan

If you really want to know what happens when a destructuring assignment is processed, have a look at the spec: ecma-international.org/ecma-262/6.0/… – Penoyer

Answer 1

No, the curly braces in destructuring do form neither a block nor an object literal.

They definitely are not a block because they are not a statement (and don't contain a statement list), they are an expression like an object literal. In fact they even do have the same syntax as an object literal, the only difference is that they are in the position of an assignment target (left hand side of an assignment operator) or a function parameter.

Is let a = ({ a, b }) => {…} the same as let a = ( a, b ) => {…}?

No, really not. Both parameter lists do declare variables a and b for the function scope, but the first function expects an object with properties .a and .b while the second function expects two arguments.

My understanding is that we are merely mapping the properties into a new obj?

No. There is no new object created/instantiated. There is only the object that you pass in (the right hand side). And it is destructured - "pulled apart" - into pieces that are then assigned to the various sub-targets (variables, property references).

To write

a.b = anObj.first;
a.c = anObj.second;

with a destructuring assignment you'd use

({first: a.b, second: a.c}) = anObj;

(the parenthesis are necessary to distinguish the expression from a block).

The more common use case is for variable initialisations however. You can shorten

let b = anObj.first,
    c = anObj.second;

to

let {first: b, second: c} = anObj;

And also there's a shorthand when the variable has the same name as the property, so

let first = anObj.first,
    second = anObj.second;

is equivalent to

let {first, second} = anObj;

Is let a = { first : a, second : b } = anObj; correct?

No, that doesn't make much sense. It would desugar to

let a;
a = anObj.first;
b = anObj.second;
a = anObj;

Dam

A wonderful answer that clear the confusion in my head & creates a whole host of questions about the curly brackets in my head :) Thanks @Dam – Sall

Answer 2

It is for destructuring:

var obj = {a: 1, b: 2},
    add = ({a, b}) => a + b;

console.log(add(obj));  //3

So basically to the statements inside the function it would appear there are 2 arguments, but when you call it you only pass an object.

Kira

Thanks for the answer, however, it doesnt answer the question /s. Im trying to understand the context & what is actually happening while destructing. – Sall