5 fitur JavaScript yang tanpanya saya tidak bisa menulis kode

Selamat siang teman-teman!

Saya mempersembahkan untuk Anda terjemahan dari artikel Kent Dodds “5 Fitur JavaScript yang Tidak Dapat Saya Kode Tanpa”.

Ini adalah terjemahan pertama saya, jadi saya akan senang dengan komentar apa pun.

5 fitur JavaScript yang tanpanya saya tidak bisa menulis kode

Sebelum kita mulai, izinkan saya berbicara sedikit tentang kode yang saya tulis. Hampir semua kode saya terdiri dari Javascript, ditambah beberapa HTML dan CSS. Saya menulis JS client dan server. Saya sedang menguji kode saya. Saya membuat dan mendistribusikan pustaka sumber terbuka yang digunakan oleh ribuan pengembang di seluruh dunia. Untuk frontend, saya menggunakan React, untuk backend - Express atau komputasi tanpa server.

Berikut adalah 5 fitur JS yang tanpanya saya tidak bisa menulis kode. Secara acak. Tentu saja, "tanpanya saya tidak bisa menulis kode" adalah hiperbola. Ini adalah fitur yang sangat saya sukai dan digunakan oleh saya sepanjang waktu.

1. Restrukturisasi

Saya menggunakan fitur ini di hampir semua file. Tidak masalah apakah itu komponen Bereaksi atau fungsi yang mengambil argumen, restrukturisasi adalah hal yang keren.

Berikut ini beberapa contohnya:

const address = { city: 'Salt Lake City', state: 'UT', zip: 84115, coords: { lat: 40.776608, long: -111.920485, }, } // ,    : const city = address.city const state = address.state const zip = address.zip //  ,    : const {city, state, zip} = address 

Begini tampilannya di Bereaksi:

 //  : function UserName(props) { return ( <div> </div> ) } //   : function UserName() { return ( <div> </div> ) } //    : function UserName({name: {first, last}}) { return ( <div> </div> ) } 

Fitur ini memungkinkan Anda melakukan beberapa hal menarik:

 const info = { title: 'Once Upon a Time', protagonist: { name: 'Emma Swan', enemies: [ {name: 'Regina Mills', title: 'Evil Queen'}, {name: 'Cora Mills', title: 'Queen of Hearts'}, {name: 'Peter Pan', title: `The boy who wouldn't grow up`}, {name: 'Zelena', title: 'The Wicked Witch'}, ], }, } //       , //          const { title, protagonist: { name: name, enemies: [, , , {title: enemyTitle, name: enemyName}], }, } = info console.log(`${enemyTitle} (${enemyName}) is an enemy to ${name} in "$5 JavaScript Features I Couldn't Code Without"`) 

2. Modul

Ini adalah fitur lain yang saya gunakan di hampir setiap file. Sebelum modul menjadi bagian dari bahasa, kami harus menggunakan perpustakaan dan alat aneh untuk bekerja dengan proyek besar. Dengan modul (dan pembangun seperti Rollup atau Webpack) kami memiliki peluang besar untuk berbagi kode dengan orang lain.

Berikut adalah beberapa contoh:

 // a.js //  function add(a, b) { return a + b } const foo = 'bar' const theAnswer = 42 const theQuestion = 'who knows' //        ,  //     ""    export default add export {foo, theAnswer, theQuestion} // b.js //  // 1.   import './a' // 2.    import add from './a' // 3.  `theAnswer`  `theQuestion`  './a' import {theAnswer, theQuestion} from './a' // 4.  `theAnswer`     `fortyTwo` import {theAnswer as fourtyTwo} from './a' // 5.  `add` ( )  `theQuestion` import {default as add, theQuestion} from './a' // 6.  `add`  `theQuestion`      import add, {theQuestion} from './a' // 7.     " "   `allTheThings` import * as allTheThings from './a' 

Jika Anda ingin tahu lebih banyak tentang modul, Anda dapat menonton video youtube saya - “Lebih dari yang ingin Anda ketahui tentang Modul ES6”.

3. Pengaturan Default

Saya suka dan menggunakan fitur ini setiap saat. Ini berlaku untuk argumen fungsi dan perusakan. Inilah cara ini digunakan untuk merestrukturisasi objek:

 const bench = {type: 'Piano', adjustable: false} const {legs = 4} = bench // `The bench has ${legs} legs` // -> The bench has 4 legs // bench - , leg -  

Perhatikan bahwa objek bangku tidak memiliki properti kaki. Tanpa sintaks parameter default, nilai kaki akan tidak terdefinisi.

Anda juga dapat menggunakan tugas yang merusak dengan fitur ini:

 const bench = {type: 'Piano', adjustable: false} const {legs: legCount = 4} = bench // `The bench has ${legCount} legs` // -> The bench has 4 legs 

Berikut tampilannya di daftar parameter:

 function getDisplayName(firstName = 'Unknown', lastName = 'Unknown') { return `${firstName} ${lastName}` } // getDisplayName() // -> Unknown Unknown // getDisplayName('Andrew') // -> Andrew Unknown // getDisplayName(undefined, 'Yang') // -> Unknown Yang // getDisplayName('Andrew', 'Yang') // -> Andrew Yang 

Fitur ini juga memungkinkan Anda melakukan beberapa hal yang cukup menarik, karena nilai di sebelah kanan tanda "=" dihitung hanya jika perlu. Ini berarti Anda dapat menggunakannya untuk memeriksa parameter yang diperlukan:

 function getCandy( kind = requiredParam('kind'), size = requiredParam('size'), upperKind = kind.toUpperCase(), callback = function noop() {}, ) { const result = {kind, size, upperKind} callback(result) return result } function requiredParam(argName) { throw new Error(`${requiredParam} is required`) } // getCandy('twix', 'king') // -> {kind: 'twix', size: 'king', upperKind: 'TWIX'} // getCandy('twix') // -> : 'size is required' 

Beberapa orang menganggap kode ini terlalu rumit. Mungkin mereka benar. Tetapi memahami cara kerjanya sangat keren!

Oh, dan Anda perhatikan bahwa kita dapat menggunakan argumen sebelumnya sebagai bagian dari parameter default untuk argumen berikut (seperti halnya dengan upperKind)? Bagus kan?

4. Fungsi panah

Saya sering menggunakan fungsi panah. Saya suka ekspresi fungsional, tetapi jika, misalnya, saya memerlukan fungsi callback anonim (yang saya tidak ingin memunculkan nama), atau saya ingin mendapatkan nilai balik implisit, maka fungsi panah hanyalah yang saya butuhkan.

Berikut ini beberapa contoh penggunaan fungsi panah:

 const divide = (a, b) => a / b const getFive = () => 5 const identity = i => i const asArray = (...args) => args // ,         // (       ), //     ,  : const tryInvoke = (obj, fn, ...args) => { try { return obj[fn](...args) } catch (e) { return undefined } } //  ,   ,       const getObject = favoriteCandy => () //  JSX ( JS  React)        const MyComponent = () => ( <div> Hello world! I am a function and I return <strong>JSX!</strong> </div> ) 

5. Janji dan async / menunggu

JS adalah single-threaded dan dibangun pada sistem acara (panggilan tumpukan). Saya penggemar pembicaraan seperti Apa itu loop acara? (dengan subtitle Rusia). Janji dan async / menunggu adalah alat yang hebat untuk mengelola ini. Sebagian besar kode saya asinkron, dan alat-alat ini sangat menyederhanakan pekerjaan saya. Jujur saja, janji adalah topik serius dan mengharuskan beberapa orang terbiasa, tapi itu bagus.

Saya sering menggunakan async / menunggu dalam tes dan backend. Berikut ini contoh uji asinkron:

 test('Can fill out a form across multiple pages', async () => { mockSubmitForm.mockResolvedValueOnce({success: true}) const testData = {food: 'test food', drink: 'test drink'} const {findByLabelText, findByText} = render(<App />) user.click(await findByText(/fill.*form/i)) user.type(await findByLabelText(/food/i), testData.food) user.click(await findByText(/next/i)) user.type(await findByLabelText(/drink/i), testData.drink) user.click(await findByText(/review/i)) expect(await findByLabelText(/food/i)).toHaveTextContent(testData.food) expect(await findByLabelText(/drink/i)).toHaveTextContent(testData.drink) user.click(await findByText(/confirm/i, {selector: 'button'})) expect(mockSubmitForm).toHaveBeenCalledWith(testData) expect(mockSubmitForm).toHaveBeenCalledTimes(1) user.click(await findByText(/home/i)) expect(await findByText(/welcome home/i)).toBeInTheDocument() }) 

Berikut adalah contoh penggunaan async \ await di Express:

 async function getListItems(req, res) { const listItems = await listItemsDB.query({ownerId: req.user.id}) res.json({listItems: await expandBookDataMultiple(listItems)}) } 

Anehnya, saya tidak sering menggunakan async / menunggu dalam kode Bereaksi saya (setidaknya secara langsung). Ini karena saya mencoba melakukan sebagian besar "logika asinkron" di luar komponen saya. Karena itu, jika saya, misalnya, melakukan sesuatu yang tidak sinkron ketika memanggil useEffect di Bereaksi, saya membatasi diri pada satu panggilan ke fungsi asinkron, karena saya merasa lebih mudah untuk bekerja dengan janji-janji:

 React.useEffect(() => { getUser().then( user => setState({status: 'success', error: null, user}), error => setState({status: 'error', error, user: null}), ) }, []) 

Saya menyarankan Anda untuk membaca artikel oleh Anthony Chu "Async / Menunggu di Node".

Kesimpulan

Ada banyak fitur lain yang saya gunakan secara teratur dan yang dapat dimasukkan dalam daftar ini. Fitur-fitur ini adalah favorit saya, saya selalu menoleh ke sana. Ada juga beberapa tambahan baru pada bahasa yang belum memasukkan memori otot saya. Sekarang saatnya untuk menjadi pengembang JS! Semoga artikel ini bermanfaat bagi Anda! Semoga beruntung