Halo semuanya! Pada akhir September, aliran baru kursus
“Pengembang JavaScript Fullstack” akan dimulai di
OTUS . Untuk mengantisipasi dimulainya kelas, kami ingin berbagi dengan Anda artikel penulis yang disiapkan khusus untuk siswa kursus.
Penulis artikel: Pavel Yakupov
Pratinjau Saya ingin segera mencatat bahwa dalam artikel ini topik yang akrab dengan "ninja" diperiksa, dan artikel ini lebih ditujukan untuk membuat pemula lebih memahami beberapa nuansa bahasa, dan tidak hilang dalam tugas-tugas yang sering mereka berikan selama wawancara - setelah semua, seperti Tugas tidak ada hubungannya dengan pengembangan nyata, dan mereka yang memberikannya, paling sering dengan cara ini mencoba memahami seberapa baik Anda mengenal JavaScript.
Jenis memori referensi
Bagaimana tepatnya data disimpan dalam JavaScript? Banyak kursus pemrograman mulai menjelaskan dengan klasik: variabel adalah semacam "kotak" di mana kami menyimpan beberapa data. Yang mana, untuk bahasa dengan pengetikan dinamis, sepertinya itu tidak masalah: penerjemah itu sendiri “menelan” semua tipe data dan secara dinamis mengubah tipe jika perlu, dan Anda tidak boleh memikirkan jenis variabel dan bagaimana mereka diproses. Yang tentu saja salah, dan kami akan memulai diskusi hari ini dengan fitur yang sering hilang: bagaimana variabel disimpan dalam JavaScript - dalam bentuk primitif (salinan) atau dalam bentuk tautan.
Kami akan segera daftar jenis variabel yang dapat disimpan dalam bentuk primitif: ini adalah
boolean ,
null ,
undefined ,
Number ,
String ,
Symbol ,
BigInt . Ketika kita menjumpai variabel yang dideklarasikan secara terpisah dengan tipe data ini, kita harus ingat bahwa selama inisialisasi awal mereka membuat sel memori - dan bahwa mereka dapat ditugaskan, disalin, ditransfer dan dikembalikan berdasarkan nilai.
Sisa JavaScript bergantung pada area memori yang dirujuk. Mengapa mereka dibutuhkan? Para pembuat bahasa mencoba menciptakan bahasa di mana ingatan akan digunakan secara ekonomis mungkin (dan ini sama sekali bukan hal baru pada waktu itu). Sebagai ilustrasi, bayangkan Anda perlu mengingat nama tiga rekan kerja baru - nama yang sama sekali baru, dan untuk meningkatkan perbandingan, rekan baru Anda dari India atau Cina dengan nama yang tidak biasa untuk Anda. Sekarang bayangkan rekan kerja Anda dipanggil sama seperti Anda dan dua teman baik Anda di sekolah. Dalam situasi apa akan lebih mudah diingat? Di sini, memori seseorang dan komputer bekerja dengan cara yang sama. Berikut ini beberapa contoh spesifik:
let x = 15;
Dengan demikian, jika Anda menemukan tugas yang sama dalam sebuah wawancara, cobalah untuk segera memahami jenis data apa yang ada di depan Anda - dari mana asalnya dan bagaimana ia mendapatkan nilai, sebagai tipe primitif, atau sebagai referensi.
Konteks bekerja
Untuk memahami bagaimana konteksnya bekerja di JS, Anda perlu mempelajari beberapa poin:
- Tingkat visibilitas global / lokal.
- Perbedaan konteks ketika menginisialisasi variabel dalam lingkup global / lokal.
- Fungsi panah.
Sekali waktu, kembali di ES5, semuanya cukup sederhana: hanya ada deklarasi variabel menggunakan var, yang ketika dinyatakan dalam aliran program dianggap global (yang berarti bahwa variabel tersebut ditugaskan sebagai properti ke objek global, seperti
window atau
global ). Kemudian
let dan
const datang ke tempat kejadian, yang berperilaku agak berbeda: mereka tidak ditugaskan ke objek global, dan disimpan dalam memori berbeda, dengan fokus pada ruang lingkup blok. Sekarang var sudah dianggap usang, karena penggunaannya dapat menyebabkan tersumbatnya ruang lingkup global, dan di samping itu,
let terlihat jauh lebih mudah diprediksi.
1. Jadi, untuk memahami, ada baiknya untuk memahami dengan jelas apa ruang lingkup dalam JavaScript (ruang lingkup). Jika variabel dideklarasikan dalam lingkup global menggunakan direktif
let , maka itu tidak ditugaskan ke objek
window , tetapi disimpan secara global.
Mari kita beralih ke tugas-tugas yang paling sering pemula pada pertanyaan kontekstual di wawancara.
//: ? let x = 15; function foo(){ let x = 13; return x; } console.log(x)// 15 foo(); console.log(x)// x = foo(); console.log(x)// return ,
2. Pada saat yang sama, tidak semua pemula mengetahui bagaimana penerjemah JavaScript membaca kode: pada kenyataannya, itu membaca dua kali, pertama kali membaca kode fungsi yang dinyatakan sebagai Deklarasi Fungsi (dan siap untuk mengeksekusi mereka pada bacaan kedua, nyata dan eksekusi ) Trik kecil lainnya terkait dengan
var dan
let : pertama kali sebuah variabel dengan arahan
var dibaca, itu diatur ke
undefined . Tetapi dengan
let panggilan prematurnya tidak memungkinkan sama sekali:
console.log(x); console.log(y) var x = 42; let y = 38;
3. Fungsi panah yang muncul di ES6 dengan cepat mendapatkan popularitas - mereka sangat cepat diadopsi oleh programmer di
Node.js (karena pembaruan cepat mesin) dan
React (karena fitur perpustakaan dan penggunaan Babel yang tak terelakkan). Sehubungan dengan konteks, fungsi panah mematuhi aturan berikut: mereka tidak mengikat
this . Kami menggambarkan ini:
var x = 4; var y = 4; function mult(){ return this.x * this.y; } let foo = mult.bind(this); console.log(foo()); let muliply = ()=>x*y; console.log(muliply()); /* x y let, function declaration */
Jenis Data dan Apa yang Berlaku
Katakanlah segera: sebuah array pada dasarnya adalah sebuah objek, dan dalam JavaScript ini bukan variasi pertama dari objek - Peta, WeakSet, Set, dan koleksi mengonfirmasi hal ini.
Jadi, array adalah objek, dan perbedaannya dari objek biasa di JS terutama dalam kecepatan yang lebih besar karena pengoptimalan pengindeksan, dan yang kedua dalam pewarisan dari Array.prototype, yang menyediakan serangkaian metode yang lebih besar, itulah sebabnya Kakak Besar »
Object.prototype .
console.log(typeof({})) console.log(typeof([])) console.log(typeof(new Set)) console.log(typeof(new Map)) //
Selanjutnya dalam antrian keanehan dalam tipe data adalah
null . Jika Anda bertanya pada JavaScript jenis data apa yang null, kami mendapatkan jawaban yang cukup jelas. Namun, ini tidak akan dilakukan tanpa beberapa trik:
let x = null; console.log(typeof(x)); //! , null objet, ? console.log(x instanceof Object.prototype.constructor); //false // ! )
Perlu diingat bahwa
null adalah tipe data khusus - meskipun awal contoh sebelumnya menunjuk secara ketat ke yang lain. Untuk pemahaman yang lebih baik tentang mengapa jenis khusus ini ditambahkan ke bahasa, bagi saya tampaknya perlu mengeksplorasi dasar-dasar sintaks C ++ atau C #.
Dan tentu saja, dalam wawancara orang sering menemukan tugas seperti itu, yang kekhasannya terkait dengan pengetikan dinamis:
console.log(null==undefined);//true console.log(null===undefined);// false
Sejumlah besar trik dikaitkan dengan casting tipe ketika membandingkan di JS, kami secara fisik tidak dapat membawa semuanya ke sini. Kami merekomendasikan untuk merujuk pada
"What the hell JavaScript" .
Fitur tidak logis yang tersisa dalam bahasa selama proses pengembangan
Penambahan garis. Pada kenyataannya, penambahan string dengan angka tidak dapat dikaitkan dengan kesalahan dalam pengembangan bahasa, namun, dalam konteks JavaScript, ini mengarah pada contoh-contoh terkenal yang dianggap tidak cukup logis:
codepen.io/pen/?editors=0011 let x = 15; let y = "15"; console.log(x+y);// "" console.log(xy); //
Fakta bahwa plus hanya menambahkan garis dengan angka relatif tidak masuk akal, tetapi Anda hanya perlu mengingat ini. Ini mungkin sangat tidak biasa karena dua bahasa yang ditafsirkan lain yang populer dan banyak digunakan dalam pengembangan web - PHP dan Python - tidak membuang trik seperti itu dengan penambahan string dan angka dan berperilaku jauh lebih dapat diprediksi dalam operasi tersebut.
Contoh serupa kurang dikenal, misalnya, dengan NaN:
console.log(NaN == NaN); //false console.log(NaN > NaN); //false console.log(NaN < NaN); //false … ... , NaN? console.log(typeof(NaN)); // number
Seringkali NaN membawa kejutan yang tidak menyenangkan jika, misalnya, Anda salah mengatur pemeriksaan tipe.
Contoh dengan 0,1 +0.2 jauh lebih terkenal - karena kesalahan ini terkait dengan format IEEE 754, yang juga digunakan, misalnya, dalam Python "matematis".
Kami juga menyertakan bug yang kurang dikenal dengan nomor Epsilon, alasan yang terletak pada nada yang sama:
console.log(0.1+0.2)// 0.30000000000000004 console.log(Number.EPSILON);// 2.220446049250313e-16 console.log(Number.EPSILON + 2.1) // 2.1000000000000005
Dan pertanyaan yang sedikit lebih rumit:
Object.prototype.toString.call([])// ? // -> '[object Array]' Object.prototype.toString.call(new Date) // Date? // -> '[object Date]'
Tahapan Pemrosesan Acara
Banyak pemula yang tidak mengerti acara browser. Seringkali bahkan hal yang tidak dikenal adalah prinsip paling mendasar yang digunakan oleh acara browser - intersepsi, pendakian, dan acara default. Hal yang paling misterius dari sudut pandang seorang pemula adalah munculnya suatu peristiwa yang, tidak diragukan lagi, dibenarkan pada awalnya menimbulkan pertanyaan. Popup berfungsi sebagai berikut: ketika Anda mengklik pada elemen DOM bersarang, peristiwa tersebut tidak hanya terjadi di atasnya, tetapi juga pada induknya, jika pawang dengan kejadian seperti itu juga diinstal pada induknya.
Jika suatu acara muncul, kami mungkin perlu membatalkannya.
// , function MouseOn(e){ this.style.color = "red"; e.stopPropagation(); // }
Selain itu, untuk pemula seringkali merupakan masalah untuk membatalkan acara yang terjadi secara default. Ini sangat penting ketika mengembangkan formulir - karena validasi formulir, misalnya, perlu dilakukan baik di sisi klien maupun di sisi server:
codepen.io/isakura313/pen/GRKMdaR?editors=0010 document.querySelector(".button-form").addEventListener( 'click', function(e){ e.preventDefault(); console.log(' . , ') } )
Membatalkan permukaan acara juga dapat menimbulkan masalah: misalnya, Anda dapat membuat apa yang disebut "zona mati" di mana hal yang diperlukan tidak akan berfungsi - misalnya, peristiwa elemen yang “tidak beruntung” dekat.
Terima kasih atas perhatian Anda! Berikut ini beberapa tautan bermanfaat yang dapat digunakan untuk mengambil banyak informasi bermanfaat:
Itu saja. Kami menunggu Anda di
webinar gratis , yang akan diadakan pada 12 September.