What is the difference between const and const {} in JavaScript?

Question

When I study Electron, I found two ways of getting a BrowserWindow object.

const {BrowserWindow} = require('electron')

and

const electron = require('electron')
const BrowserWindow = electron.BrowserWindow

What is the difference between const and const {} in JavaScript?

I can't understand why the const {} can work. Do I miss anything important about JavaScript?

Answer 1

The two pieces of code are equivalent but the first one is using the ES6 destructuring assignment to be shorter.

Here is a quick example of how it works:

const obj = {
  name: "Fred",
  age: 42,
  id: 1
}

//simple destructuring
const { name } = obj;
console.log("name", name);

//assigning multiple variables at one time
const { age, id } = obj;
console.log("age", age);
console.log("id", id);

//using different names for the properties
const { name: personName } = obj;
console.log("personName", personName);

Answer 2

Use:

const {BrowserWindow} = require('electron')

The above syntax uses ES6. If you have an object defined as:

const obj = {
    email: "[email protected]",
    title: "Hello world"
}

Now if we want to assign or use the email and title field of obj, then we don't have to write the whole syntax like

const email = obj.email;
const title = obj.title;

This is old school now.

We can use ES6 destructuring assignment, i.e., if our object contains 20 fields in the obj object, then we just have to write names of those fields which we want to use like this:

const { email,title } = obj;

This is ES6 syntax-the simpler one

It will automatically assign the email and title from obj; just the name has to be correctly stated for the required field.

Answer 3

This is one of the new features in ES6. The curly braces notation is a part of the so-called destructuring assignment. What this means is that, you no longer have to get the object itself and assign variables for each property you want on separate lines. You can do something like:

const obj = {
  prop1: 1,
  prop2: 2
}

// Previously you would need to do something like this:
const firstProp = obj.prop1;
const secondProp = obj.prop2;
console.log(firstProp, secondProp);
// etc.

// However, now you can do this on the same line:
const {prop1, prop2} = obj;
console.log(prop1, prop2);

As you have seen in the end, the functionality is the same—simply getting a property from an object.

There is also more to destructuring assignment. You can check the entire syntax in MDN: Destructuring assignment

Answer 4

Other answers are good enough. I would suggest some useful features of Destructuring assignment.

Firstly, let's look at the following definition:

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

Features:

1. Destructure an array, index of each item in array act as property (Due to an Array is an object in JavaScript)

   > const {0: first, 1: second} = [10, 20]
   console.log(first);   // 10
   console.log(second);  // 20
   

2. Combine with Spread ... operator

   > {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}
   console.log(a); // 10
   console.log(b); // 20
   console.log(rest ); // {c: 30, d: 40}
   

3. Default values

   const {a = 10, b = 20} = {a: 1};
   
   console.log(a); // 1
   console.log(b); // 20
   

4. Assigning to new variable names

   const {p: a, q: b} = {p: 10, q: 20};
   
   console.log(a); // 10
   console.log(b); // 20