Rantai opsional, penyatuan dengan nol, dan bagaimana mereka mengubah pendekatan kami dalam menulis kode

Foto oleh Miguel Á. Padriñan .

Selamat siang teman-teman!

Saya mempersembahkan kepada Anda terjemahan artikel Sam Sedighian “ Rantai Pilihan, Penggabungan Null dan Bagaimana Mereka Akan Mengubah Cara Anda Menulis Kode” .

Rantai opsional, penyatuan dengan nol, dan bagaimana mereka mengubah pendekatan untuk menulis kode

Cara yang lebih aman dan ergonomis untuk mengakses objek.

Jika Anda mengikuti rilis TypeScript, maka Anda tahu bahwa Chaining Opsional dan Null Coalescing diperkenalkan di TypeScript 3.7. Juga, fitur-fitur ini disertakan secara default di Babel 7.8.0. Ini adalah salah satu pesaing utama untuk peran fitur JavaScript. Saat ini, mereka berada pada tahap 4 dan 3, masing-masing (pada 23 Januari, standar ECMAScript 2020 diadopsi, di mana ada rantai opsional, integrasi dengan nol, dan beberapa hal menarik; Saya sadar bahwa sebuah artikel baru-baru ini muncul di Habré terjemahan tentang fitur yang diperkenalkan di JS ES2020, namun, saya pikir beberapa contoh tambahan tidak akan merugikan - kira-kira.

Rantai opsional

Cukup sering, kita harus mengakses properti yang tertanam dalam dari suatu objek. Jika Anda menulis 100 baris kode yang tidak terlalu berkualitas tinggi, ini dapat menyebabkan Uncaught TypeError.

const data = {} data.user.id // Uncaught TypeError: Cannot read property 'id' of undefined //           -   

Untuk contoh lebih lanjut, kami akan menggunakan pseudo-code ini (respon server palsu):

 { 'url': 'https://api.github.com/repos/sedighian/Hello-World/pulls/12', 'number': 12, 'state': 'open', 'title': 'Amazing new feature', 'user': { 'login': 'sedighian', 'id': 123234 }, 'labels': [{ 'id': 208045946, 'name': 'bug', }] } 

Mencoba menghindari Uncaught TypeError, dan mendapatkan nilai id, kita harus "menari". Pendekatan yang kami gunakan sebelumnya adalah untuk memverifikasi kebenaran objek di setiap tingkat bersarang. Templat ini lebih mirip pernyataan bersyarat yang mengembalikan boolean daripada cara mengakses properti, tapi ini adalah cara terbersih dan teraman yang kami temukan sejauh ini:

 const userId = data && data.user && data.user.id //     const label = data && data.labels && data.labels[0] const someFuncRes = navigator && navigator.serviceWorker && window.serviceWorker() 

Atau, jika Anda lebih suka merusak:

 const { user: { id } = {} } = data || {} //        const { user } = data || {} const { id } = user || {} 

Cara yang lebih ergonomis adalah dengan menggunakan Lodash atau Ember:

 // lodash import _ from 'lodash' _.get(data, 'user.id') // ember import { get } from '@ember/object' get(data, 'user.id') 

Bagaimana kita melakukan hal yang sama dengan rantai opsional?

 const userId = data?.user?.id //     const label = data?.labels?.[0] const someFuncRes = someFunc?.() 

Menggabungkan dengan null (Null Coalescing)

Ketika nilai properti objek yang kami akses adalah nol atau tidak terdefinisi, kami menggunakan nilai default. Sebelumnya, operator || (logis atau).

Jika kami ingin menulis sedighian ke nilai properti login secara default, kami melakukan hal berikut:

 //      data && data.user && data.user.login || 'sedighian' //     data?.user?.login || 'sedighian' //        null data?.user?.login ?? 'sedighian' 

Contoh kedua dan ketiga serupa. Apa keuntungan menggabungkan dengan null? Menggabungkan dengan null mengevaluasi ke kanan hanya jika sisi kiri tidak terdefinisi atau nol. Ini memberi kita beberapa perlindungan terhadap hasil acak ketika kita bekerja dengan nilai nyata (valid), tetapi salah.

Misalkan kita ingin mengembalikan '' (string kosong), false atau 0. Dengan operator || Ini tidak akan berhasil, karena dia akan mengembalikan sisi kanan. Dalam hal ini, menggabungkan dengan null berguna bagi kami:

 //  data.user.alias   ,     data?.user?.alias ?? 'code ninja' // '' data?.user?.alias || 'code ninja' // code ninja //  data.user.volumePreference = 0 data?.user?.volumePreference ?? 7 // 0 data?.user?.volumePreference || 7 // 7 //  data.user.likesCats = false data?.user?.likesCats ?? true // false data?.user?.likesCats || true // true 

Sebagai alternatif, Anda dapat menggunakan perpustakaan pihak ketiga, dan dalam kasus Ember, utilitas bawaan:

 // lodash import _ from 'lodash' _.get(data, 'user.likesCats', true) // ember import { getWithDefault } from '@ember/object' getWithDefault(data, 'user.likesCats', true) 

Ingatlah bahwa menggabungkan dengan null lebih dari nilai default suatu variabel. Ini adalah cara alternatif untuk menjalankan blok kode jika tidak ada nilai yang sesuai:

 const temp = { celsius: 0 } temp?.fahrenheit ?? setFahrenheit(temp) 

Apa yang harus diingat?

Ingat urutan karakter dalam string opsional (pertama tanda tanya, kemudian tanda titik):

 data.?user // Uncaught SyntaxError: Unexpected token '?' data?.user // ok 

Rantai opsional tidak melindungi terhadap pemanggilan fungsi yang tidak ada:

 data?.user() // Ungaught TypeError: user is not a function 

Menggabungkan dengan nol tidak identik dengan lodash.get atau EmberObject.getWithDefault. Perbedaan utama adalah bagaimana menggabungkan c null menangani nilai "null":

 const data = { user: { interests: null } } // lodash import _ from 'lodash' _.get(data, 'user.interests', 'knitting') // null // ember import { get } from '@ember/object' getWithDefault(data, 'user.interests', 'knitting') // null //   null data?.user?.interests ?? 'knitting' // knitting 

Terima kasih atas perhatian anda Semua yang terbaik