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

101

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?

Kevin00000000
fuente

Respuestas:

159

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

VLAZ
fuente
Tu respuesta es útil. El sitio web para desarrolladores de Mozilla me resultó muy difícil de entender. Gracias.
DavidHyogo
27
const {BrowserWindow} = require('electron')

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

const obj = {
    email: "[email protected]",
    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.

Gaurav Sachdeva
fuente
18

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

Vasil Dininski
fuente