🔒 🧓🏼 🧓🏼 Teori bukannya heuristik: menjadi lebih baik sebagai pengembang frontend 🥪 👬 👨🏿‍🏭

Menjadi pengembang front-end yang lebih baik menggunakan fundamental daripada heuristik

Pengalaman kami menunjukkan bahwa pendidik non-teknis dan orang yang belajar sendiri sering kali tidak bergantung pada prinsip-prinsip teoritis, tetapi pada metode heuristik.

Heuristik - pola dan aturan terbukti yang telah dipelajari pengembang dari praktik. Mereka dapat bekerja secara tidak sempurna atau dengan cara terbatas, tetapi sampai batas tertentu, dan tidak memerlukan pemikiran serius. Berikut adalah beberapa contoh heuristik:

“Gunakan $(document).ready(function(){}) untuk menginisialisasi kode di situs jQuery”
“ var self = this konstruk ini diperlukan untuk memanggil metode dalam fungsi panggilan balik”
“Fungsi panah tidak memiliki return ”

Pada saat yang sama, prinsip teoretis dapat digunakan untuk menemukan solusi untuk masalah lain. Dia selalu setia dan sering menentukan perangkat dari satu atau elemen lainnya. Prinsip-prinsip teoretis meliputi, misalnya:

Harap dicatat: kami hanya mengutip contoh heuristik untuk menekankan sifat artifisial heuristik dibandingkan dengan kekakuan fondasi teoritis. Tidak ada contoh heuristik yang universal untuk semua kasus, tetapi mereka bekerja dalam situasi yang cukup sehingga pengembang yang menggunakannya menerima kode kerja tanpa pemahaman penuh tentang operasinya.

Argumen untuk Pendekatan Teoritis

Kami sering menemukan fakta bahwa pengembang tanpa pendidikan teknis tidak cenderung menyelesaikan masalah menggunakan prinsip-prinsip teoritis. Sebagai aturan, ini dijelaskan oleh fakta bahwa pada awal karir mereka, mereka tidak memiliki kesempatan untuk mempelajarinya, dan karena metode heuristik bekerja dengan memuaskan, mereka terus menggunakannya.

Namun, terlepas dari kerumitan yang tampak, belajar teori bisa sangat berguna. Mengapa Kemudian, teori itu akan membuat Anda merasa yakin bahwa solusi Anda berfungsi, serta secara mandiri menampilkan jawaban untuk pertanyaan baru, tanpa harus mencari solusi orang lain. Dalam jangka pendek, algoritma heuristik mungkin tampak seperti solusi sederhana dan cepat, tetapi mereka sering mengarah pada solusi yang tidak sempurna - jika memang ada.

Selain itu, dengan mengandalkan metode heuristik, Anda tidak akan pernah belajar bagaimana menyelesaikan masalah secara nyata. Anda mungkin sering berhasil menemukan solusi yang berfungsi, tetapi cepat atau lambat Anda akan terhenti, dari mana Anda tidak akan menemukan jalan keluar. Pemrogram C&P mengandalkan heuristik dalam pekerjaan mereka.

Kriteria Tingkat Keterampilan Pengembang

Saat mewawancarai pengembang frontend, kami menetapkan tugas pemrograman untuk mereka dan mengatakan bahwa mereka bebas menggunakan sumber apa pun, baik itu Google atau Stack Overflow. Dengan cara ini, mudah untuk menentukan apakah pengembang adalah penganut heuristik atau teori.

Yang pertama, tanpa kecuali, menyalin kode dari contoh yang kurang lebih cocok dengan Stack Overflow. Hanya ketika kode tidak berfungsi seperti yang direncanakan barulah mereka mulai menyempurnakannya sendiri. Seringkali mereka gagal.

Yang terakhir cenderung mencari jawaban dalam dokumentasi API. Di sana mereka menemukan informasi tentang berapa banyak parameter fungsi tertentu, atau sintaks spesifik dari bentuk diperluas dari properti CSS yang diinginkan.

Sudah dalam lima menit pertama wawancara Anda dapat menentukan dengan tepat apa jenis program yang dimiliki kandidat.

Contoh

Ambil Bill sebagai contoh. Dia menyelesaikan beberapa kursus pelatihan, menyelesaikan sejumlah tugas dalam JavaScript dan menulis situs web di waktu luangnya, tetapi dia tidak benar-benar belajar JavaScript.

Begitu Bill menemukan sebuah objek seperti ini:

 const usersById = { "5": { "id": "5", "name": "Adam", "registered": true }, "27": { "id": "27", "name": "Bobby", "registered": true }, "32": { "id": "32", "name": "Clarence", "registered": false }, "39": { "id": "39", "name": "Danielle", "registered": true }, "42": { "id": "42", "name": "Ekaterina", "registered": false } }

Objek semacam itu dapat menampilkan daftar pengguna dan apakah mereka telah mendaftar untuk acara tertentu.

Misalkan Bill perlu mengambil daftar pengguna terdaftar. Dengan kata lain, saringlah. Dia menemukan kode di mana metode .filter() digunakan untuk menyaring daftar. Jadi dia mencoba sesuatu seperti:

 const attendees = usersById.filter(user => user.registered);

Dan inilah yang didapatnya:

 TypeError: usersById.filter is not a function

"Sesuatu yang tidak masuk akal," pikir Bill, karena dia melihat kode di mana .filter() bekerja sebagai filter.

Masalahnya adalah bahwa Bill mengandalkan metode heuristik. Dia tidak mengerti bahwa filter adalah metode yang didefinisikan pada array, sedangkan usersById adalah objek reguler yang tidak memiliki metode filter .

Tagihan bingung Google " filter javascript ". Dia menemukan banyak referensi untuk array dan menyadari bahwa dia perlu mengubah usersById menjadi sebuah array. Kemudian, dengan meminta " javascript untuk mengubah objek menjadi array ", ia menemukan contoh menggunakan Object.keys() di Stack Overflow. Setelah itu, ia mencoba:

 const attendees = Object.keys(usersById).filter(user => user.registered);

Kali ini kesalahan tidak ditampilkan, tetapi, yang mengejutkan Bill, bidang attendees tetap kosong.

Faktanya adalah Object.keys() mengembalikan kunci objek, tetapi tidak nilainya. Bahkan, nama variabel user mudah menyesatkan, karena itu bukan objek user , tetapi pengidentifikasi, yaitu string. Karena atribut registered tidak didefinisikan untuk string, filter memperlakukan setiap entri sebagai false dan array kosong.

Bill melihat lebih dekat jawaban Stack Overflow dan membuat perubahan berikut:

 const attendees = Object.keys(usersById).filter(id => usersById[id].registered);

Kali ini hasilnya lebih baik: ["5", "27", "39"] . Tetapi Bill ingin mendapatkan objek pengunjung, bukan ID mereka.

Untuk memahami cara memfilter pengunjung, Bill yang kesal mencari " filter objek javascript ", memeriksa hasil pencarian untuk Stack Overflow dan menemukan jawaban ini dengan kode berikut:

 Object.filter = (obj, predicate) => Object.keys(obj) .filter( key => predicate(obj[key]) ) .reduce( (res, key) => (res[key] = obj[key], res), {} );

Bill menyalin baris-baris ini dan mencoba:

 const attendees = Object.filter(usersById, user => user.registered);

Semuanya berfungsi - meskipun tidak jelas mengapa. Bill tidak mengerti mengapa reduce dibutuhkan dan bagaimana reduce itu digunakan. Selain itu, Bill tidak mengerti bahwa dia baru saja mendefinisikan metode non-standar baru untuk Object global.

Tapi Bill tidak peduli - itu berhasil! Konsekuensinya belum menarik baginya.

Apa yang salah dari Bill?

Bill mencoba metode heuristik untuk menyelesaikan masalah dan mengalami masalah berikut:

Menggunakan .filter() pada variabel, Bill mendapat TypeError . Dia tidak mengerti bahwa filter tidak didefinisikan pada objek biasa.
Dia menggunakan Object.keys() untuk "mengubah objek menjadi array", tetapi ini saja tidak membawa hasil apa pun. Dia perlu membuat array nilai objek.
Bahkan setelah menerima nilai-nilai dan menggunakannya sebagai syarat untuk penyaringan, ia hanya menerima pengidentifikasi dan bukan objek pengguna yang terkait dengan pengidentifikasi ini. Ini karena array yang difilter berisi ID, bukan objek pengguna.
Seiring waktu, Bill meninggalkan pendekatan ini dan menemukan solusi yang berfungsi di Internet. Namun demikian, dia masih tidak mengerti cara kerjanya - dan tidak akan membuang waktu untuk memilahnya, karena dia memiliki hal lain yang harus dilakukan.

Ini adalah contoh buatan, tetapi kami telah menemukan banyak pengembang yang memecahkan masalah dengan cara yang sama. Untuk menyelesaikannya secara efektif, Anda perlu menjauh dari metode heuristik dan mempelajari teorinya.

Mari kita beralih ke dasar-dasar

Jika Bill adalah pendukung pendekatan teoretis, prosesnya akan terlihat seperti ini:

Untuk mengidentifikasi data input yang diberikan dan untuk menentukan output yang diinginkan - dalam arti propertinya: “Saya memiliki objek yang kuncinya adalah string yang mewakili ID, dan nilai adalah objek yang mewakili pengguna. Saya ingin mendapatkan array yang nilainya akan menjadi objek pengguna - tetapi hanya objek pengguna terdaftar ”
Untuk memahami cara mencari di dalam objek: "Saya tahu bahwa saya bisa mendapatkan larik kunci di objek dengan memanggil Object.keys() . Saya ingin mendapatkan array karena array mendukung pencacahan . "
Untuk menyadari bahwa metode ini membantu untuk mendapatkan kunci, dan Anda perlu mengubah kunci menjadi nilai, dan ingat tentang map - metode yang jelas untuk membuat array baru dengan mengubah nilai-nilai array lain:
```
 Object.keys(usersById).map(id => usersById[id]) 
```
Untuk melihat bahwa Anda sekarang memiliki array objek pengguna yang bisa difilter dan yang berisi nilai nyata yang ingin Anda filter:
```
 Object.keys(usersById).map(id => usersById[id]).filter(user => user.registered) 
```

Pergi Bill dengan cara ini, dia bisa bekerja untuk kita.

Mengapa orang tidak lebih sering menggunakan teori?

Terkadang mereka tidak mengenalnya. Paling sering, mereka terlalu sibuk dan tidak dapat menemukan waktu untuk belajar cara memecahkan masalah ini - mereka hanya perlu segalanya untuk bekerja. Mereka berisiko mengubah pendekatan ini menjadi kebiasaan yang akan menjadi hambatan bagi pengembangan keterampilan mereka.

Untuk menghindari kesalahan seperti itu, selalu mulai dengan teori. Pada setiap tahap proses, pikirkan tentang jenis data apa yang Anda hadapi. Alih-alih mengandalkan pola yang sudah dikenal sepanjang waktu, pertimbangkan tipe data primitif: array, objek, string, dll. Saat menggunakan fungsi atau metode, lihat dokumentasi untuk mengetahui dengan tepat tipe data apa yang mendukungnya, argumen apa yang mereka ambil, dan apa hasilnya.

Dengan pendekatan ini, Anda dapat menemukan solusi yang berfungsi pada percobaan pertama. Anda dapat memastikan kebenarannya, karena Anda secara khusus memilih tindakan Anda berdasarkan input yang diberikan dan output yang diinginkan. Masuk jauh ke dasar-dasar setiap operasi (tipe data dan nilai pengembalian), daripada formulasi bisnis fuzzy (seperti "pengguna terdaftar").