CODEWITHSUNDEEP
javascriptangularjsecmascript-6
Sagar Ganesh
Sagar Ganesh

Reputation: 2584

ES 6 new syntax about const

Im new to ES6, certain things I know but still little bit confused about the following things, can anyone provide me some details about these new syntax:

Following are just sample snippet of code: 

1. const { action, stage, conditions } = this.control.ajaxInfo;

What it is called exactly? What exactly this statement will do?, I tried this in console it executed without any error. But when I tried to trace those 3 constants, it shows undefined.

2. const getControlBindings = (control, context) => ({
    control,
    context,
    setAnswer,
    ajaxAction
  });

It is a function with some = and => notations, then what about this type of new syntax: 

getControlBindings((control, context) => {
    control,
    context,
    setAnswer,
    ajaxAction
})

Then what is the main difference between these two type of functions? Please help me understating this.

Upvotes: 0

Views: 176

Answers (3)

Suren Srapyan
Suren Srapyan

Reputation: 68665

1) It means that your this.control.ajaxInfo object must contain properties with those names, which will be destructed into the variables in the left side. For more see Destructing object in JS

var controls = {
  action: 'a',
  stage: 'b',
  conditions: 'c',
}

const { action, stage, conditions } = controls;

console.log(action);

2) It is called arrow function. They are also functions but with some nuances. 

const getControlBindings = (control, context) => ({
    control,
    context,
    setAnswer,
    ajaxAction
  });

This is a function, which accept parameters control and context and returns an object with shape 

{
   control,
   context,
   setAnswer,
   ajaxAction
}

Everythinig after => is the body of arrow function. You can add to arrow function a bracket body with

 const getControlBindings = (control, context) => { return ({
        control,
        context,
        setAnswer,
        ajaxAction
      }); };

And if you add brackets body, you need to use return statement explicitly, if not added brackets body, you must write a single statement which will be returned from the function.

Upvotes: 2

Abhishek
Abhishek

Reputation: 1477

  1. Is the example of Object destructing in ES2016/ES6. In this, 3 separate const with the values of the parameter with the same name mentioned in the left hand side of the equals. i.e. action, stage, condition.

    var controls = {
    action: 'GET',
    stage: 'Test'
}

const { action, stage} = controls;

console.log(action) // Outputs GET

  2. Is the example of arrow function. In the first case u are create an arrow function getControllsBinding which takes control and context parameters and returns an object with 

    {control,
 context,
 setAnswer,
 ajaxAction }

The other definition is like your passing the arrow function as a parameter to getControllsBinding function. Note there is slight syntax problem in this you need to wrap the 

    {control,
     context,
     setAnswer,
     ajaxAction }

withing parenthesis like below

    ({control,
     context,
     setAnswer,
     ajaxAction })

Below are the some good material to start with ES2015/ES6

Arrow functions : https://leanpub.com/understandinges6/read#leanpub-auto-arrow-functions

Object Destructing : https://leanpub.com/understandinges6/read#leanpub-auto-object-destructuring

Upvotes: 3

JVM
JVM

Reputation: 994

Found a good read for you. Hope it helps.

One more on destructuring

Upvotes: 0

Related Questions