apa perbedaan antara const dan const {} dalam javascript

Ketika saya mempelajari elektron, saya menemukan 2 cara untuk mendapatkan objek BrowserWindow.

const {BrowserWindow} = require('electron')

dan

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

Apa perbedaan antara constdan const {}di JavaScript?

Saya tidak mengerti mengapa const {}bisa berhasil. Apakah saya melewatkan sesuatu yang penting tentang JS?

Kedua bagian kode itu setara tetapi yang pertama menggunakan tugas penghancuran ES6 menjadi lebih pendek.

Berikut adalah contoh singkat cara kerjanya:

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

Sintaks di atas menggunakan ES6. Jika Anda memiliki objek yang didefinisikan sebagai:

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

Sekarang jika kita ingin menetapkan atau menggunakan email dan field judul dari obj maka kita tidak perlu menulis sintaks secara keseluruhan

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

Ini sekolah tua sekarang.

Kita bisa menggunakan ES6 Destructuring assignment yaitu jika objek kita berisi 20 field di objek obj maka kita hanya perlu menulis nama field yang ingin kita gunakan seperti ini:

const { email,title } = obj;

Ini adalah sintaks ES6 yang lebih sederhana Ini akan secara otomatis menetapkan email dan judul dari obj, hanya nama harus disebutkan dengan benar untuk bidang yang diperlukan.

Ini adalah salah satu fitur baru di ES6. Notasi kurung kurawal adalah bagian dari apa yang disebut destructuring assignment. Artinya, Anda tidak lagi harus mendapatkan objek itu sendiri dan menetapkan variabel untuk setiap properti yang Anda inginkan pada baris terpisah. Anda dapat melakukan sesuatu seperti:

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

Seperti yang Anda lihat pada akhirnya fungsinya sama - hanya mendapatkan properti dari suatu objek.

Ada juga lebih banyak tugas penghancuran - Anda dapat memeriksa seluruh sintaks di MDN: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment