Saya kira Anda adalah seorang pengembang web. Semoga Anda baik-baik saja dan Anda memiliki pekerjaan yang hebat, bahkan mungkin Anda wiraswasta atau bekerja sebagai pekerja lepas. Masa depan lapangan terlihat bagus, seperti yang saya jelaskan di artikel terakhir saya. Mungkin Anda baru memulai sebagai pengembang web, mungkin Anda sudah bekerja sebagai programmer untuk waktu yang lama. Betapapun nyamannya Anda dengan JavaScript, itu selalu baik untuk mendapatkan penyegaran pada beberapa topik untuk dibaca atau membuatnya di radar di tempat pertama. Berikut adalah 10 hal yang harus Anda pelajari sebelum Anda dapat menyebut diri Anda master dalam JavaScript
1. Aliran Kontrol
Mungkin topik paling mendasar dalam daftar. Salah satu yang paling penting, mungkin yang paling penting. Jika Anda tidak tahu bagaimana melanjutkan dengan kode Anda, Anda akan mengalami kesulitan. Mengetahui seluk beluk aliran kontrol dasar jelas merupakan suatu keharusan
if else
— Jika Anda tidak tahu ini, bagaimana Anda menulis kode sebelumnya?switch
_ — pada dasarnyaif else
dengan cara yang lebih fasih, gunakan segera setelah Anda memiliki banyak kasus berbedafor
_ — Jangan ulangi, ini gunanya loop. Selain normalfor
_ -loop `untuk dari` danfor in
sangat berguna. Keuntungan besar darifor
_ -loops adalah mereka memblokir, jadi Anda dapat menggunakanasync await
di dalamnya- Persyaratan lanjutan — Menggunakan operator ternary dan logis dapat membuat hidup Anda jauh lebih mudah, terutama saat Anda mencoba melakukan hal-hal sebaris, artinya Anda tidak ingin menyimpan nilai untuk digunakan nanti. Contoh
// ternaryconsole.log[new Date[].getHours[] < 12 ? 'Good Morning!' : 'Time for a siesta']
// logical operatorsconst isJsMaster = prompt['Are you a JavaScript master?'] === 'true'
console.log[isJsMaster && 'proficient coder']
2. Penanganan kesalahan
Ini memakan waktu cukup lama bagi saya. Tidak masalah jika Anda bekerja di frontend atau backend, tahun pertama atau lebih, Anda mungkin akan default ke
const calcShape = [width, height, depth, color, angle] => {...}const calcShape = [{width, height, depth, color, angle}] => {...}0 atau mungkin
const calcShape = [width, height, depth, color, angle] => {...}const calcShape = [{width, height, depth, color, angle}] => {...}1 untuk kesalahan 'penanganan'. Untuk menulis aplikasi yang bagus, Anda pasti harus mengubahnya dan mengganti log malas Anda dengan kesalahan yang ditangani dengan baik. Anda mungkin ingin memeriksa cara membuat konstruktor Kesalahan Anda sendiri dan cara menangkapnya dengan benar, serta menunjukkan kepada pengguna apa masalah sebenarnya
MEMPERBARUI. Lihat artikel tentang cara menangani Kesalahan dengan anggun
3. Model Data
Mirip dengan bergerak melalui aplikasi Anda terus menerus, Anda harus memutuskan di mana mengelompokkan potongan informasi tertentu dan di mana memisahkannya. Ini tidak hanya berlaku untuk membangun model database, tetapi juga parameter fungsi dan objek atau variabel. Contoh
const calcShape = [width, height, depth, color, angle] => {...}const calcShape = [{width, height, depth, color, angle}] => {...}_
4. Asinkronitas
Ini adalah aspek yang sangat penting dari JavaScript, Entah Anda mengambil data dari backend atau memproses permintaan secara asinkron di backend itu sendiri. Di hampir semua kasus penggunaan, Anda akan menemukan asinkron dan peringatannya. Jika Anda tidak tahu apa itu, Anda mungkin akan mendapatkan kesalahan aneh, yang akan Anda coba perbaiki selama beberapa jam. Jika Anda tahu apa itu, tetapi Anda tidak benar-benar tahu apa yang harus dilakukan, Anda akan berakhir di callback-neraka. Pendekatan yang lebih baik adalah dengan menggunakan promise dan/atau async await
di aplikasi Anda
5. Manipulasi DOM
Ini adalah topik yang menarik. Biasanya itu agak ditinggalkan dalam kehidupan sehari-hari sebagai pengembang. Mungkin Anda mempelajari jQuery dan tidak pernah merasa perlu mengambil beberapa keterampilan manipulasi DOM asli, mungkin Anda hanya menggunakan kerangka kerja frontend, di mana manipulasi DOM khusus jarang diperlukan. Namun, menurut saya ini adalah bagian penting untuk memahami JavaScript, setidaknya di frontend. Mengetahui cara kerja DOM dan cara mengakses elemen memberi Anda pemahaman mendalam tentang cara kerja situs web. Selain itu, akan ada titik di mana Anda harus melakukan beberapa manipulasi DOM khusus, bahkan ketika Anda menggunakan kerangka kerja frontend modern, dan Anda pasti tidak ingin menempatkan jQuery di
const calcShape = [width, height, depth, color, angle] => {...}const calcShape = [{width, height, depth, color, angle}] => {...}3 Anda hanya untuk mengakses elemen
Foto oleh LinkedIn Sales Navigator di Unsplash
6. Node. js / Ekspres
Bahkan sebagai pengembang frontend, Anda harus mengetahui dasar-dasar node.js. js. Idealnya, Anda juga tahu cara menjalankan server ekspres sederhana dan menambahkan beberapa rute atau mengubah yang sudah ada. JavaScript sangat bagus untuk menulis skrip untuk membantu Anda mengotomatiskan banyak tugas. Oleh karena itu, mengetahui cara membaca file, bekerja dengan jalur file, atau buffer memberi Anda perangkat yang bagus untuk membuat apa saja
7. Pendekatan Fungsional
Ada perdebatan abadi tentang fungsional vs. pemrograman berorientasi objek. Anda mungkin dapat mencapai hal yang sama dengan kedua pendekatan tersebut. Dalam JavaScript, bahkan lebih mudah, Anda memiliki kedua pendekatan yang tersedia. Pustaka seperti lodash memberi Anda koleksi alat yang sangat bagus untuk membangun aplikasi dengan pendekatan fungsional. Saat ini, bahkan tidak perlu menggunakan perpustakaan eksternal lagi. Banyak fungsi terpenting telah diimplementasikan dalam spesifikasi JavaScript resmi. Anda pasti harus tahu cara menggunakan
const calcShape = [width, height, depth, color, angle] => {...}const calcShape = [{width, height, depth, color, angle}] => {...}_4 `reduce`
const calcShape = [width, height, depth, color, angle] => {...}const calcShape = [{width, height, depth, color, angle}] => {...}5 `forEach` dan `find`
8. Pendekatan Berorientasi Objek
Mirip dengan pendekatan fungsional, Anda juga harus terbiasa dengan JavaScript berorientasi objek, jika ingin menguasainya. Saya mengabaikan bagian itu untuk waktu yang lama dalam karir saya dan hanya menyelesaikannya dengan solusi, tetapi kadang-kadang lebih baik menggunakan objek/kelas dan contoh untuk mengimplementasikan fungsionalitas tertentu. Kelas banyak digunakan dalam React, MobX, atau konstruktor khusus
9. Kerangka Depan
Tiga besar adalah Bereaksi. js, Sudut dan Vue. js. Jika Anda sedang mencari pekerjaan saat ini, Anda hampir selalu memiliki salah satu dari yang terdaftar sebagai prasyarat. Bahkan jika mereka berubah cukup cepat, penting untuk memahami konsep umum dari mereka untuk memahami cara kerja aplikasi. Juga, lebih mudah untuk menulis aplikasi seperti itu. Jika Anda belum memutuskan kereta mana yang ingin Anda naiki, saran saya adalah Bereaksi. js. Saya telah mengerjakannya selama beberapa tahun terakhir dan tidak menyesali keputusan saya
10. Bundling / Transpilasi
Sayangnya, ini adalah bagian besar dari pengembangan web. Di satu sisi saya tidak boleh mengatakan malang, karena sangat bagus bisa menulis kode dengan semua fitur terbaru. Di sisi lain, alasan mengapa saya mengatakan itu adalah karena kami harus selalu ingat bahwa ada browser lama yang mungkin tidak mendukung fitur ini, oleh karena itu kami harus mengubah kode kami menjadi sesuatu yang lain yang dipahami oleh browser lama. Jika Anda bekerja dengan node. js, Anda mungkin akan memiliki lebih sedikit paparan untuk mengubah kode Anda. Standar de-facto untuk transpilasi adalah babel. js, jadi biasakanlah. Adapun untuk menggabungkan kode Anda dan menyatukan semuanya, Anda memiliki beberapa opsi. Webpack adalah pemain dominan untuk waktu yang lama. Beberapa waktu yang lalu, parsel muncul entah dari mana dan sekarang menjadi solusi pilihan saya, karena sangat berkinerja dan mudah dikonfigurasi, meskipun tidak sempurna
BONUS. Ekspresi Reguler
Ini tidak spesifik untuk JavaScript, tetapi sangat membantu dalam banyak kasus penggunaan. Sama membingungkannya juga. Mengenal sintaks Ekspresi Reguler pasti membutuhkan waktu dan mengingat semua opsi yang berbeda tidak mungkin
Memperbarui. Pengujian
Seperti yang ditunjukkan oleh Paul Kamma, pengujian adalah bagian yang sangat penting dari pengembangan perangkat lunak, tidak terkecuali JavaScript. Saat menulis kode, Anda [semoga] mengujinya sebelum Anda mendorong fitur tersebut, meskipun mungkin manual. Pendekatan yang lebih baik adalah menggunakan pengujian otomatis, jenis pengujian yang berbeda adalah pengujian unit, pengujian end-to-end, pengujian beban, pengujian keamanan, atau pengujian frontend [mis. g. apakah komponen terpasang atau tidak]. Ada banyak lingkungan pengujian yang berbeda, enzim, melati, moka, chai, dll. Solusi favorit saya saat ini adalah ava. js, jadi periksalah jika Anda tidak bekerja dengan tes otomatis sejauh ini
Semoga Anda sudah mengetahui semua topik yang tercantum di atas. Jika tidak, bekerjalah dan cobalah menjadi master dalam JavaScript. Ini Sangatlah Berarti. Ingatlah bahwa berlatih adalah segalanya dalam hal pengkodean, jadi meskipun Anda tidak terbiasa dengan konsep-konsep ini atau mengetahuinya tetapi Anda tidak benar-benar tahu cara menerapkannya, itu akan datang di masa mendatang.
Apa pendapat Anda tentang daftar itu?
tentang Penulis. Lukas Gisder-Dubé ikut mendirikan dan memimpin startup sebagai CTO selama 1 1/2 tahun, membangun tim teknologi dan arsitektur. Setelah keluar dari startup, dia mengajar coding sebagai Lead Instructor di Ironhack dan sekarang sedang membangun Startup Agency & Consultancy di Berlin. Lihat dube. io untuk mempelajari lebih lanjut