6 Fitur JavaScript Yang Harus Anda Ketahui

Sedikit lebih dari setahun yang lalu kami berbicara tentang 5 fitur JavaScript "baru" yang harus Anda ketahui untuk dikembangkan dengan nyaman di Gutenberg. Di sana kami mempelajari apa itu destrukturisasi objek dan array, cara membuat fungsi panah, apa itu operator spread dan rest, dan seterusnya. Anda beruntung, JavaScript masih memiliki banyak fitur yang, setelah Anda terbiasa dengannya, akan membantu Anda menulis kode yang lebih mudah dipahami dan ringkas.

Hari ini saya akan menunjukkan kepada Anda enam fitur JavaScript yang sangat keren. Operator, pelingkupan variabel, janji, fungsi asinkron... apakah Anda siap mempelajari semuanya?

#1 Chaining Opsional dalam JavaScript dengan Operator ?.

Operator rantai opsional memungkinkan akses yang disederhanakan ke atribut suatu objek ketika ada kemungkinan bahwa satu tidak undefined atau null . Misalnya, Anda memiliki objek seperti berikut:

 const toni = { name: 'Antonio', details: { age: 35, }, };

Untuk mengakses toni 's age , pertama-tama Anda harus mengakses atribut details dan kemudian age :

 function getAge( person ) { return person.details.age; }

Masalah yang kita miliki di fungsi sebelumnya, dan saya yakin itu bukan hal baru bagi Anda, adalah bahwa properti yang kita harapkan dari person tersebut tidak selalu ada. Yaitu jika person atau person.details undefined , fungsi di atas akan memicu kesalahan tipe:

 getAge( toni ); // 35 getAge( {} ); // Uncaught TypeError: person.details is undefined

Biasanya, kami mengatasi masalah ini dengan menambahkan beberapa penjaga keamanan:

 function getAge( person ) { if ( ! person ) { return; } if ( ! person.details ) { return; } return person.details.age; } getAge( toni ); // 35 getAge( {} ); // undefined

yang jelas memperbaikinya. Sayangnya, fungsi yang dihasilkan lebih kompleks dan memiliki banyak kode berisik yang mengalihkan perhatian kita dari hal-hal yang benar-benar penting. Untuk kembali ke jalur dan memperbaiki solusi dengan cara yang lebih sederhana, yang harus kita lakukan adalah menggunakan operator rantai opsional ?. :

 function getAge( person ) { return person?.details?.age; } getAge( toni ); // 35 getAge( {} ); // undefined

Pada dasarnya, operator ini mengizinkan kita mengakses setiap properti selama itu bukan undefined atau null . Segera setelah mendeteksi kami mencoba mengakses properti dari objek yang tidak ada, ia mengembalikan undefined .

#2 Operator Penggabungan Nullish ( ?? )

Dalam JavaScript, sangat mudah untuk menyetel nilai default ke variabel menggunakan operator ini: || , Baik? Salah! Kita semua pernah melakukan ini, tetapi dapat mengakibatkan efek samping yang tidak terduga jika Anda tidak hati-hati…

Misalnya, kita memiliki pemilih di toko Redux kita yang memungkinkan kita untuk mengambil nilai yang ditetapkan oleh pengguna. Jika pengguna belum menentukan nilai (yaitu, nilainya tidak undefined ), kami mengembalikan nilai default menggunakan || :

 function getValue( state ) { return state.value || 5; }

Sekarang, mari kita lihat beberapa contoh dari apa yang akan kita dapatkan dengan fungsi sebelumnya setelah pengguna menetapkan satu nilai atau lainnya:

 // No setValue( x )... getValue(); // 5 setValue( 2 ); getValue(); // 2 setValue( 1 ); getValue(); // 1 setValue( 0 ); getValue(); // 5

Ups! Semuanya bekerja dengan baik sampai kami mencapai kasus terakhir! Ternyata, jika pengguna menyetel nilainya menjadi 0 , hasil dari fungsi tersebut menjadi 5 . Mengapa? Yah, alasannya cukup jelas: x||y mengembalikan y jika, dan hanya jika, x adalah nilai "palsu". Ini biasanya berfungsi dengan baik, karena undefined adalah nilai falsey. Tapi begitu juga false atau 0 , misalnya.

Pada kenyataannya, kami hanya ingin menetapkan nilai default ketika tidak ada. Jadi kita bisa menambahkan penjaga aman untuk memeriksa apakah ada nilai atau tidak:

 function getValue( state ) { if ( undefined === state.value ) return 5; return state.value; }

dan kita bahkan dapat menulisnya menggunakan operator ternary jika kita ingin:

 function getValue( state ) { return undefined === state.value ? 5 : state.value; }

tetapi, sekali lagi, kedua solusi tidak perlu memperumit kode. Untuk menetapkan nilai default ke variabel, kita harus menggunakan operator penggabungan nullish ?? , yang mengembalikan bagian kanan jika, dan hanya jika, bagian kiri adalah null atau undefined :

 function getValue( state ) { return state.value ?? 5; }

dan, kejutan-kejutan!, hasilnya persis seperti yang kita inginkan:

 // No setValue( x )... getValue(); // 5 setValue( 2 ); getValue(); // 2 setValue( 1 ); getValue(); // 1 setValue( 0 ); getValue(); // 0

Oh, dan omong-omong, Anda dapat menggunakan operator ini dikombinasikan dengan tugas. Misalnya, ini:

 value = value ?? 5;

setara dengan ini:

 value ??= 5;

#3 Janji dan fungsi asinkron

Promise adalah mekanisme yang diterapkan dalam JavaScript yang memungkinkan kita untuk menyederhanakan kode sumber kita saat bekerja dengan operasi asinkron, yaitu operasi yang hasilnya tidak segera tersedia. Misalnya, jika kita ingin mengambil data dari server kita, jelas bahwa responsnya tidak akan instan, karena kita harus menunggu server menerima permintaan, memprosesnya, dan mengirimkan kembali respons itu kepada kita.

Dalam versi dan pustaka JavaScript yang lebih lama (misalnya, jQuery) kami biasa mengimplementasikannya dengan panggilan balik. Idenya cukup sederhana: bersama dengan permintaan itu sendiri, tentukan fungsi (panggilan balik) yang harus dipanggil setelah respons tersedia. Dengan cara ini, ketika operasi asinkron (yaitu mengambil data dari server) selesai, perpustakaan akan memanggil fungsi dan logika kita akan dilanjutkan:

 jQuery.ajax( { url: 'https://server.com/wp-json/wp/users/1', success: ( user ) => { console.log( user ); }, } );

Jika kami hanya memicu satu permintaan yang terisolasi, solusi ini cukup elegan dan nyaman. Tapi, begitu kami perlu melakukan lebih banyak permintaan, semuanya menjadi kotor dengan cepat. Misalnya, jika kita ingin meminta dua pengguna yang berbeda, kita harus menyarangkan callback:

 jQuery.ajax( { url: 'https://server.com/wp-json/wp/v2/users/1', success: ( user1 ) => { jQuery.ajax( { url: 'https://server.com/wp-json/wp/v2/users/2', success: ( user2 ) => { console.log( user1, user2 ); }, } ); }, } );

Promise adalah solusi untuk masalah ini: jika memperoleh hasil tertentu tidak segera (seperti, misalnya, ketika kami mengambil sesuatu dari server), kami dapat segera mengembalikan janji JavaScript. Objek ini adalah pembungkus dari nilai sebenarnya dan menandakan "janji" bahwa nilai tersebut akan tersedia di beberapa titik di masa depan.

Misalnya, jika kami menulis ulang cuplikan pertama kami menggunakan janji, itu akan terlihat seperti ini:

 const promise = wp.apiFetch( { url: 'https://server.com/wp-json/wp/v2/users/1', } ); promise.then( ( user ) => console.log( user ) );

Seperti yang Anda lihat, wp.apiFetch harus mengambil pengguna 1 dari server, tetapi langsung memberikan hasil. Hasilnya, bagaimanapun, bukanlah pengguna itu sendiri, tetapi sebuah janji yang akan diberikan kepada pengguna setelah permintaan selesai. Oleh karena itu, yang harus kita lakukan hanyalah menulis panggilan balik yang akan memproses respons janji ketika diselesaikan.

Anda sekarang mungkin berpikir bahwa ini tidak sesulit yang kita miliki sebelumnya, bukan? Lagi pula, kami masih menggunakan panggilan balik… tetapi Anda dapat melihat betapa bergunanya ini setelah kami mulai menggabungkan beberapa permintaan:

 const promise1 = wp.apiFetch( { url: 'https://server.com/wp-json/wp/v2/users/1', } ); const promise2 = wp.apiFetch( { url: 'https://server.com/wp-json/wp/v2/users/2', } ); Promise.all( [ promise1, promise2 ] ).then( ( [ user1, user2 ] ) => console.log( user1, user2 ); );

Dengan menggunakan janji, kami dapat meluncurkan dua permintaan paralel untuk mengambil pengguna 1 dan 2 dan menggunakan Promise.all untuk menunggu kedua janji diselesaikan. Tidak ada kode spageti dengan panggilan balik bersarang yang terlibat.

Nah, hal hebat tentang janji akan segera datang. Kita dapat menggunakan gula sintaksis untuk bekerja dengan janji JavaScript dan menulis kode asinkron yang terlihat, sinkron. Yang harus Anda lakukan adalah mendefinisikan fungsi asinkron menggunakan kata kunci async dan tiba-tiba segalanya menjadi lebih mudah:

 async function logTwoUsers( id1, id2 ) { const user1 = await wp.apiFetch( { url: '…' + id1 } ); const user2 = await wp.apiFetch( { url: '…' + id2 } ); console.log( user1, user2 ); }

Setiap kali Anda memanggil operasi asinkron dalam fungsi asinkron, Anda dapat menunggu hasilnya menggunakan kata kunci await . Satu-satunya hal yang harus Anda ingat adalah, ketika Anda mendefinisikan fungsi async , hasilnya akan selalu menjadi janji:

 async function getNumberFive() { return 5; } const p = getNumberFive(); // a promise p.then( console.log ); // prints "5"

#4 Lingkup Variabel saat menggunakan let dan const

Seperti yang mungkin sudah Anda ketahui, sekarang Anda dapat mendeklarasikan variabel menggunakan kata kunci let dan const . Yang pertama mendefinisikan variabel dan yang terakhir mendefinisikan konstanta:

 let x = 1; console.log( x ); // 1 x = 2; console.log( x ); // 2 const y = 1; console.log( y ); // 1 y = 2; // Uncaught TypeError: invalid assignment to const 'y' console.log( y ); // 1

Anda mungkin tergoda untuk berpikir bahwa let dan var adalah hal yang sama, karena kedua kata kunci tersebut memungkinkan kita untuk mendeklarasikan variabel non-konstan. Tetapi ada perbedaan substansial di antara mereka: ruang lingkup mereka. Dengan let dan const , ruang lingkup variabel adalah blok di mana ia didefinisikan. Di var , ini adalah seluruh fungsi.

 function fn() { if ( true ) { var x = 1; let y = 2; const z = 3; }//end if console.log( x ); // 1 console.log( y ); // Uncaught ReferenceError: y is not defined console.log( z ); // Uncaught ReferenceError: z is not defined }

#5 Transformasi Data Saat Menggunakan JSON.parse

Fungsi JSON.parse mem-parsing string JSON dan membangun objek JavaScript. Sebagai contoh:

 const x = JSON.parse( '{"x":1,"a":[1,2,3]}' ); // Object { x: 1, a: [ 1, 2, 3 ] }

Apa yang kebanyakan orang tidak tahu tentang itu adalah bahwa ia mendukung argumen kedua yang disebut reviver . Parameter ini adalah fungsi yang akan dieksekusi untuk setiap elemen yang sedang diurai, memungkinkan Anda untuk memanipulasi nilai sesuka Anda. Misalnya, bayangkan string JSON seperti berikut:

 const json = '{"name":"David","birthday":"1985-12-01T10:00:00.000Z"}';

Jika kita menggunakan JSON.parse apa adanya, itu akan menghasilkan objek dengan dua atribut string: name dan birthday . Tetapi jika kami menyediakan fungsi JSON.parse reviver kami dapat memastikan bahwa birthday diurai sebagai Date :

 const user = JSON.parse( json, ( key, value ) => 'birthday' === key ? new Date( value ) : value )

#6 Pemisah Numerik pada Source Code Menggunakan Karakter Undesrcore ( _ )

Tip terakhir kami hari ini adalah pemisah numerik. Ada usulan (saat ini dalam tahap 4) yang memungkinkan penulisan angka dengan cara yang lebih mudah dipahami manusia. Misalnya, dapatkah Anda benar-benar mengetahui seberapa besar angka-angka berikut?

 10000000000 2189719.25

Kalau saja kita bisa menggunakan pemisah ribuan, akan lebih mudah untuk menafsirkannya! Dan itulah tepatnya yang dapat kita lakukan menggunakan garis bawah _ :

 10_000_000_000 2_189_719.25

Ringkasan

Dimungkinkan untuk menulis kode JavaScript yang lebih baik jika Anda terbiasa dengan semua alat dan fitur baru yang disertakan dalam JavaScript. Hari ini kita telah melihat beberapa contoh dari apa yang mungkin dengan bahasa pemrograman ini. Saya harap Anda telah mempelajari sesuatu yang baru dan jika Anda menyukainya, jangan lupa untuk membagikannya kepada rekan-rekan Anda. Sampai jumpa lagi!

Gambar unggulan oleh Sam Dan Truong di Unsplash.