Inovasi literal objek dalam JavaScript ES6

Bahan, terjemahan yang kami sajikan untuk perhatian Anda, dikhususkan untuk mempelajari fitur literal objek dalam JavaScript, khususnya, inovasi yang muncul dalam versi terbaru dari standar ECMAScript.

JavaScript memiliki kemampuan yang kuat dan nyaman untuk membuat objek menggunakan literal objek. Standar ES2015 (ES6) menyederhanakan bekerja dengan objek ketika membuat aplikasi untuk browser modern (kecuali IE) dan untuk platform Node.js.

Dasar-dasarnya

Membuat objek dalam beberapa bahasa dapat menjadi sumber daya yang intensif, yang kami maksudkan adalah waktu kerja programmer dan sumber daya komputasi sistem. Secara khusus, kita berbicara tentang fakta bahwa sebelum Anda membuat objek, Anda harus menggambarkan kelas (katakanlah, menggunakan kata kunci class ). Dalam JavaScript, objek dapat dibuat dengan sangat cepat dan sederhana, tanpa perlu langkah awal. Pertimbangkan sebuah contoh:

 // ES5 var myObject = { prop1: 'hello', prop2: 'world', output: function() {   console.log(this.prop1 + ' ' + this.prop2); } }; myObject.output(); // hello world 

Dalam pemrograman, objek "sekali pakai" sering digunakan. Mereka menyimpan pengaturan dan data lainnya, mereka digunakan sebagai parameter fungsi, sebagai nilai yang dikembalikan oleh fungsi, dan dalam situasi lain. Literal objek JavaScript dalam kasus seperti itu ternyata sangat berguna, dan ES6 memperluas kemampuannya.

Inisialisasi objek dari variabel

Properti objek sering dibuat dari variabel dengan menugaskan mereka nama yang sama yang sudah ditugaskan ke variabel-variabel ini. Sebagai contoh:

 // ES5 var a = 1, b = 2, c = 3; obj = {   a: a,   b: b,   c: c }; // obj.a = 1, obj.b = 2, obj.c = 3 

Di ES6, Anda tidak perlu lagi mengulang nama variabel:

 // ES6 const a = 1, b = 2, c = 3; obj = {   a,   b,   c }; // obj.a = 1, obj.b = 2, obj.c = 3 

Teknik ini mungkin berguna untuk objek yang dikembalikan saat menggunakan pola Revealing Module , yang memungkinkan Anda membuat ruang nama untuk berbagai fragmen kode untuk menghindari konflik nama. Sebagai contoh:

 // ES6 const lib = (() => { function sum(a, b)  { return a + b; } function mult(a, b) { return a * b; } return {   sum,   mult }; }()); console.log( lib.sum(2, 3) );  // 5 console.log( lib.mult(2, 3) ); // 6 

Anda mungkin telah melihat bagaimana teknik ini digunakan dalam modul ES6:

 // lib.js function sum(a, b)  { return a + b; } function mult(a, b) { return a * b; } export { sum, mult }; 

Sintaks singkatan untuk mendeklarasikan metode objek

Saat mendeklarasikan metode objek di ES5, Anda harus menggunakan kata kunci function :

 // ES5 var lib = { sum:  function(a, b) { return a + b; }, mult: function(a, b) { return a * b; } }; console.log( lib.sum(2, 3) );  // 5 console.log( lib.mult(2, 3) ); // 6 

Sekarang, di ES6, Anda tidak bisa lagi melakukan ini. Cara singkat untuk mendeklarasikan metode diperbolehkan di sini:

 // ES6 const lib = { sum(a, b)  { return a + b; }, mult(a, b) { return a * b; } }; console.log( lib.sum(2, 3) );  // 5 console.log( lib.mult(2, 3) ); // 6 

Perlu dicatat bahwa fungsi panah ES6 ( => ) tidak dapat digunakan di sini, karena metode harus memiliki nama. Namun, fungsi panah dapat digunakan jika Anda secara eksplisit menetapkan nama untuk metode (seperti pada ES5). Sebagai contoh:

 // ES6 const lib = { sum:  (a, b) => a + b, mult: (a, b) => a * b }; console.log( lib.sum(2, 3) );  // 5 console.log( lib.mult(2, 3) ); // 6 

Kunci dinamis

Di ES5, Anda tidak bisa menggunakan variabel sebagai nama kunci, meskipun kunci yang namanya diberikan ke variabel bisa ditambahkan setelah membuat objek. Sebagai contoh:

 // ES5 var key1 = 'one', obj = {   two: 2,   three: 3 }; obj[key1] = 1; // obj.one = 1, obj.two = 2, obj.three = 3 

Di ES6, kunci dapat ditetapkan secara dinamis dengan menempatkan ekspresi nama dalam tanda kurung ( [] ). Sebagai contoh:

 // ES6 const key1 = 'one', obj = {   [key1]: 1,   two: 2,   three: 3 }; // obj.one = 1, obj.two = 2, obj.three = 3 

Untuk membuat kunci, Anda dapat menggunakan ekspresi apa pun:

 // ES6 const i = 1, obj = {   ['i' + i]: i }; console.log(obj.i1); // 1 

Kunci dinamis dapat digunakan untuk metode dan properti:

 // ES6 const i = 2, obj = {   ['mult' + i]: x => x * i }; console.log( obj.mult2(5) ); // 10 

Pertanyaan lain adalah apakah membuat properti dan metode dengan nama yang dihasilkan secara dinamis. Keterbacaan kode yang menggunakan teknik ini dapat terdegradasi. Mungkin jika Anda dihadapkan pada situasi di mana nama dinamis tampak sesuai, akan lebih baik untuk berpikir tentang menggunakan fungsi pabrik atau kelas untuk membuat objek.

Restrukturisasi

Destrukturisasi adalah ekstraksi properti objek dan penugasannya ke variabel. Seringkali selama pengembangan aplikasi, Anda perlu mengekstraksi nilai properti objek dan menulisnya ke variabel. Di ES5, Anda harus menggambarkan ini sebagai berikut, menggunakan perintah akses properti:

 // ES5 var myObject = { one:   'a', two:   'b', three: 'c' }; var one   = myObject.one, // 'a' two   = myObject.two, // 'b' three = myObject.three; // 'c' 

ES6 mendukung perusakan. Anda bisa membuat variabel dengan nama yang sama yang menanggung properti objek yang sesuai dan melakukan hal berikut:

 // ES6 const myObject = { one:   'a', two:   'b', three: 'c' }; const { one, two, three } = myObject; // one = 'a', two = 'b', three = 'c' 

Variabel yang mendapatkan nilai properti objek sebenarnya dapat memiliki nama apa pun, tetapi jika mereka berbeda dari nama properti, Anda harus menggunakan { propertyName: newVariable } :

 // ES6 const myObject = { one:   'a', two:   'b', three: 'c' }; const { one: first, two: second, three: third } = myObject; // first = 'a', second = 'b', third = 'c' 

Objek dengan struktur kompleks, di mana array dan objek lainnya tertanam, juga dapat digunakan dalam operasi penugasan destruktif:

 // ES6 const meta = { title: 'Enhanced Object Literals', pageinfo: {   url: 'https://www.sitepoint.com/',   description: 'How to use object literals in ES2015 (ES6).',   keywords: 'javascript, object, literal' } }; const { title   : doc, pageinfo: { keywords: topic } } = meta; /* doc   = 'Enhanced Object Literals' topic = 'javascript, object, literal' */ 

Pada awalnya, semua ini mungkin tampak rumit, namun, tidak begitu sulit untuk mengetahuinya, hal utama adalah mengingat yang berikut:

• Sisi kanan ekspresi adalah sumber data - larik atau objek yang menyimpan data yang akan diambil.
• Sisi kiri ekspresi adalah tujuan dari tugas destruktif - struktur yang menggambarkan variabel yang akan diberi nilai yang diekstraksi dari array atau objek.

Saat menggunakan perusakan, Anda mungkin menemui beberapa kesulitan. Jadi, sebuah ekspresi tidak dapat dimulai dengan penjepit keriting, karena kemudian akan terlihat seperti blok kode. Sebagai contoh:

 { a, b, c } = myObject; //  

Desain ini biasanya diterima oleh sistem ketika mendeklarasikan variabel:

 const { a, b, c } = myObject; //  

Jika variabel sudah dideklarasikan, Anda harus menyertakan ekspresi dalam tanda kurung:

 let a, b, c; ({ a, b, c } = myObject); //  

Akibatnya, ketika berhadapan dengan penghancuran, Anda harus berhati-hati tentang kode dan tidak mencampur variabel yang dideklarasikan dan tidak dideklarasikan.

Destrukturisasi adalah teknik yang berguna dalam banyak situasi.

Parameter Fungsi Default

Jika suatu fungsi membutuhkan daftar argumen yang panjang, biasanya lebih mudah memberikannya objek tunggal dengan parameter. Sebagai contoh:

 prettyPrint( { title: 'Enhanced Object Literals', publisher: {   name: 'SitePoint',   url: 'https://www.sitepoint.com/' } } ); 

Dalam ES5, perlu mem-parsing objek dengan parameter untuk, jika objek ini tidak memiliki apa yang mereka butuhkan, tetapkan nilai default ke parameter yang sesuai:

 // ES5,     function prettyPrint(param) { param = param || {}; var   pubTitle = param.title || 'No title',   pubName = (param.publisher && param.publisher.name) || 'No publisher'; return pubTitle + ', ' + pubName; } 

Dalam ES6, parameter apa pun dapat ditetapkan nilai default:

 // ES6 -     function prettyPrint(param = {}) { ... } 

Kemudian Anda bisa menggunakan destrrukturisasi untuk mengekstraksi nilai dari objek, dan, jika perlu, untuk menetapkan nilai default:

 // ES6     function prettyPrint( {   title: pubTitle = 'No title',   publisher: { name: pubName = 'No publisher' } } = {} ) { return `${pubTitle}, ${pubName}`; } 

Perlu dicatat bahwa kode seperti itu mungkin lebih sulit dibaca daripada yang lebih tradisional, meskipun ini adalah masalah preferensi pribadi programmer.

Parsing objek dikembalikan oleh fungsi

Fungsi dapat mengembalikan hanya satu nilai, tetapi nilai ini bisa menjadi objek dengan ratusan properti atau metode. Di ES5, Anda harus terlebih dahulu mendapatkan objek yang dikembalikan, dan setelah itu Anda bisa mengekstrak nilai dari itu:

 // ES5 var obj = getObject(), one = obj.one, two = obj.two, three = obj.three; 

Restrukturisasi menyederhanakan proses ini. Sekarang semua ini dapat dilakukan tanpa harus menyimpan objek dalam variabel yang terpisah dan kemudian menguraikannya:

 // ES6 const { one, two, three } = getObject(); 

Anda mungkin telah melihat sesuatu yang serupa di Node.js. Misalnya, jika Anda hanya memerlukan metode writeFile() dan writeFile() pada modul fs , Anda bisa mendapatkan tautan ke sana seperti ini:

 // ES6 Node.js const { readFile, writeFile } = require('fs'); readFile('file.txt', (err, data) => { console.log(err || data); }); writeFile('new.txt', 'new content', err => { console.log(err || 'file written'); }); 

Sintaks parameter yang tersisa dan operator ekstensi ES2018 (ES9)

= Dalam ES2015, sintaks dari parameter yang tersisa dan operator ekstensi (keduanya terlihat seperti tiga titik, … ) digunakan hanya ketika bekerja dengan array. Dalam ES2018, fungsionalitas serupa dapat digunakan untuk bekerja dengan objek:

 const myObject = { a: 1, b: 2, c: 3 }; const { a, ...x } = myObject; // a = 1 // x = { b: 2, c: 3 } 

Pendekatan serupa dapat digunakan untuk mentransfer nilai-nilai tertentu ke suatu fungsi:

 function restParam({ a, ...x }) { // a = 1 // x = { b: 2, c: 3 } } restParam({ a: 1, b: 2, c: 3 }); 

Harap perhatikan bahwa dalam situasi seperti itu, Anda hanya dapat menggunakan satu ekspresi dengan tiga titik di akhir daftar. Selain itu, untuk objek yang bersarang di objek lain, ini tidak berfungsi.

Operator ekstensi dapat digunakan di dalam objek:

 const obj1 = { a: 1, b: 2, c: 3 }, obj2 = { ...obj1, z: 26 }; // obj2 is { a: 1, b: 2, c: 3, z: 26 } 

Operator ekstensi dapat digunakan untuk mengkloning objek ( obj2 = { ...obj1 }; ), tetapi di sini harus diingat bahwa dengan pendekatan ini, salinan objek yang dangkal dilakukan. Jika properti objek adalah objek lain, klon objek akan merujuk ke objek bersarang yang sama.

Sintaks parameter yang tersisa dan operator ekstensi belum didukung secara luas. Saat ini, mereka dapat digunakan di browser Chrome dan Firefox tanpa upaya tambahan, dan ketika mengembangkan untuk platform Node.js versi 8.6 dan lebih tinggi.

Ringkasan

Literal objek selalu menjadi fitur JavaScript yang berguna. Inovasi yang muncul dalam JavaScript sejak standar ES2015 tidak membawa perubahan mendasar, tetapi mereka menghemat waktu programmer dan membantu menulis kode yang lebih bersih dan ringkas.

Pembaca yang budiman! Apa metode membuat objek JS yang paling sering Anda gunakan?