¿Cuál es la diferencia entre const y const {} en javascript?

Cuando estudio electron, encontré 2 formas de obtener el objeto BrowserWindow.

const {BrowserWindow} = require('electron')

y

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

¿Cuál es la diferencia entre consty const {}en JavaScript?

No puedo entender por qué funciona la const {}lata. ¿Extraño algo importante sobre JS?

Las dos piezas de código son equivalentes, pero la primera utiliza la asignación de desestructuración de ES6 para que sea más corta.

Aquí hay un ejemplo rápido de cómo funciona:

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);

const {BrowserWindow} = require('electron')

La sintaxis anterior usa ES6. Si tiene un objeto definido como:

const obj = {
    email: "hello@gmail.com",
    title: "Hello world"
}

Ahora, si queremos asignar o usar el correo electrónico y el campo de título de obj, no tenemos que escribir toda la sintaxis como

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

Esta es la vieja escuela ahora.

Podemos usar la asignación de desestructuración de ES6 , es decir, si nuestro objeto contiene 20 campos en el objeto obj, entonces solo tenemos que escribir los nombres de esos campos que queremos usar así:

const { email,title } = obj;

Esta es la sintaxis de ES6, más simple. Asignará automáticamente el correo electrónico y el título de obj, solo el nombre debe indicarse correctamente para el campo requerido.

Esta es una de las nuevas funciones de ES6. La notación de llaves es parte del llamado destructuring assignment. Lo que esto significa es que ya no tiene que obtener el objeto en sí y asignar variables para cada propiedad que desee en líneas separadas. Puedes hacer algo como:

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);

Como ha visto al final, la funcionalidad es la misma: simplemente obtener una propiedad de un objeto.

También hay más sobre la asignación de desestructuración: puede verificar la sintaxis completa en MDN: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment