Understanding the Context of Curly Brackets '{}'

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.

  • How to detect users with Adblock and redirect javascript
  • How do I change the CSS property “display” in javascript
  • Block Scoped Function ECMAScript 6 Strange Behaviour
  • Adding METRONIC to a Django project
  • Do standalone JavaScript blocks have any use?
  • Multilevel drop-down in mootols
  • // 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,

  • How to detect users with Adblock and redirect javascript
  • How do I change the CSS property “display” in javascript
  • is JSHint's “function declarations should not be placed in blocks” too broad?
  • Do standalone JavaScript blocks have any use?
  • Adding METRONIC to a Django project
  • Block Scoped Function ECMAScript 6 Strange Behaviour
  • 2 Solutions collect form web for “Understanding the Context of Curly Brackets '{}'”

    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;
    

    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.