Search code examples
javascriptecmascript-6destructuring

How does the object destructuring syntax work in ES6?


I had been through array destructuring syntax, which is well understood.

What exactly are we doing below, when we say var {p, q} = o;?

Is p and q in var {p, q} different from properties of o i.e., 'p' and 'q'? If yes,

why var {a, b} = o; does not work?

> var o = {p: 42, q: true};
    undefined
> p
    ReferenceError: p is not defined
> q
    ReferenceError: q is not defined
> o['p']
    42
> o['q']
    true
> var {p, q} = o;
    undefined
> p
    42
> q
    true
> var {a, b} = o;
    undefined
> a
    undefined
> b
    undefined

*Note: I learnt that, dictionary keys are string literals in javascript.*


Solution

  •     var o = {p: 42, q: true};
         var {p, q} = o;
    

    Here, var {p,q} = o is just a shorthand for var {p:p , q:q} = o

    Consider this.

          var o = { key : "value" };
          var { key : local_var } = o ;
          local_var === o["key"] // true
    

    If you omit the local_var, and write var {key} = o; a new variable key will be created with the idenifier "key"., same like doing var key = o["key"]

    So in your example that's like doing

          var p =  o["p"] ;  //42
           var q = o["q"];   //true
           var a = o["a"];  // undefined
           var b = o["b"];   //undefined
    

    This may not be exactly true, but should help you understand it.
    It's kind of something like Pattern Matching that other languages provide, but it's different.