Dasar-dasar JavaScript untuk Pemula

Bahan, terjemahan yang kami terbitkan hari ini, didedikasikan untuk dasar-dasar JavaScript dan ditujukan untuk programmer pemula. Ini dapat dianggap sebagai referensi kecil untuk konstruksi dasar JS. Di sini, khususnya, kita akan berbicara tentang sistem tipe data, tentang variabel, tentang array, tentang fungsi, tentang prototipe objek, dan tentang beberapa fitur lain dari bahasa.

Tipe Data Primitif

Tipe data primitif berikut tersedia dalam JavaScript: number , boolean , string , undefined , null . Harus segera dicatat bahwa, ketika bekerja dengan tipe data primitif, misalnya, dengan literal string, kami, bahkan tanpa melakukan konversi eksplisit, akan dapat mengakses metode dan properti mereka. Intinya di sini adalah bahwa ketika mencoba melakukan operasi seperti itu, literal secara otomatis dilengkapi dengan pembungkus objek yang sesuai.

▍ Angka

JavaScript hanya memiliki satu jenis angka - ini adalah angka floating point presisi ganda. Ini mengarah pada fakta bahwa hasil perhitungan beberapa ekspresi secara aritmatika salah. Anda mungkin sudah tahu bahwa di JS nilai ekspresi 0.1 + 0.2 bukan 0.3 . Pada saat yang sama, ketika bekerja dengan bilangan bulat masalah tersebut tidak diamati, yaitu, 1 + 2 === 3 .

JavaScript memiliki objek Number , yang merupakan pembungkus objek untuk nilai numerik. Objek bertipe Number dapat dibuat baik menggunakan perintah dari form var a = new Number(10) , atau Anda dapat mengandalkan perilaku otomatis sistem yang dijelaskan di atas. Ini, khususnya, memungkinkan Anda untuk memanggil metode yang disimpan dalam Number.prototype sebagaimana diterapkan pada literal numerik:

 (123).toString();  //"123" (1.23).toFixed(1); //"1.2" 

Ada fungsi global yang dirancang untuk mengonversi nilai tipe lain ke tipe numerik. Ini adalah parseInt() , parseFloat() dan konstruksi Number() , yang dalam kasus ini bertindak sebagai fungsi normal yang melakukan konversi jenis:

 parseInt("1")       //1 parseInt("text")    //NaN parseFloat("1.234") //1.234 Number("1")         //1 Number("1.234")     //1.234 

Jika selama operasi dengan angka diperoleh sesuatu yang bukan angka (selama beberapa perhitungan, atau ketika mencoba mengubah sesuatu menjadi angka), JavaScript tidak akan melempar kesalahan, tetapi akan menyajikan hasil operasi seperti itu sebagai nilai NaN (Bukan-a-Number, bukan angka). Untuk memeriksa apakah nilai tertentu adalah NaN , Anda dapat menggunakan fungsi isNaN() .

Operasi aritmatika JS bekerja dengan cara yang cukup akrab, tetapi Anda perlu memperhatikan fakta bahwa operator + dapat melakukan penambahan angka dan rangkaian string.

 1 + 1      //2 "1" + "1"  //"11" 1 + "1"    //"11" 

▍Strings

String JavaScript adalah string karakter Unicode. Literal string dibuat dengan melampirkan teks yang akan diapit dengan tanda kutip ganda ( "" ) atau tunggal ( '' ). Seperti yang telah disebutkan, ketika bekerja dengan string literal, kita dapat mengandalkan pembungkus objek yang sesuai, prototipe yang memiliki banyak metode yang berguna, di antaranya adalah substring() , indexOf() , concat() .

 "text".substring(1,3) //ex "text".indexOf('x')   //2 "text".concat(" end") //text end 

String, seperti nilai-nilai primitif lainnya, tidak dapat diubah. Misalnya, metode concat() tidak mengubah string yang ada, tetapi membuat yang baru.

▍ Nilai logis

Tipe data logis dalam JS diwakili oleh dua nilai - true dan false . Bahasa dapat secara otomatis mengonversi berbagai nilai ke tipe data logis. Jadi, false, selain nilai logis false , adalah nilai null , undefined , '' (string kosong), 0 dan NaN . Segala sesuatu yang lain, termasuk objek apa pun, mewakili makna yang sebenarnya. Dalam operasi logis, segala sesuatu yang dianggap benar dikonversi menjadi true , dan segala sesuatu yang dianggap salah dikonversi menjadi false . Lihatlah contoh berikut. Sesuai dengan prinsip-prinsip di atas, string kosong akan dikonversi menjadi false dan sebagai hasil dari eksekusi kode ini, string This is false akan sampai ke konsol.

 let text = ''; if(text) { console.log("This is true"); } else { console.log("This is false"); } 

Benda-benda

Objek adalah struktur dinamis yang terdiri dari pasangan kunci-nilai. Nilai dapat memiliki tipe data primitif, bisa berupa objek atau fungsi.

Objek paling mudah dibuat menggunakan sintaks literal objek:

 let obj = { message : "A message", doSomething : function() {} } 

Properti suatu objek dapat dibaca, ditambahkan, diedit, dan dihapus kapan saja. Inilah cara melakukannya:

• Properti membaca: object.name, object[expression] .
• Menulis data ke properti (jika properti yang diakses tidak ada, properti baru dengan kunci yang ditentukan ditambahkan): object.name = value , object[expression] = value .
• Menghapus properti: delete object.name , delete object[expression] .

Berikut ini beberapa contohnya:

 let obj = {}; //    obj.message = "A message"; //    obj.message = "A new message"; //   delete object.message; //   

Objek dalam bahasa diimplementasikan sebagai tabel hash. Tabel hash sederhana dapat dibuat menggunakan perintah Object.create(null) :

 let french = Object.create(null); french["yes"] = "oui"; french["no"]  = "non"; french["yes"];//"oui" 

Jika objek harus dibuat tidak berubah, Anda dapat menggunakan perintah Object.freeze() .

Untuk beralih ke semua properti objek, Anda dapat menggunakan perintah Object.keys() :

 function logProperty(name){ console.log(name); //  console.log(obj[name]); //   } Object.keys(obj).forEach(logProperty); 

▍ Perbandingan nilai tipe dan objek primitif

Dalam pekerjaan praktis dengan nilai-nilai primitif, Anda dapat, sebagaimana telah disebutkan, melihatnya sebagai objek yang memiliki properti dan metode, meskipun mereka bukan objek. Nilai-nilai primitif tidak dapat diubah, struktur internal objek dapat berubah.

Variabel

Dalam JavaScript, variabel dapat dideklarasikan menggunakan kata kunci var , let dan const .

Menggunakan kata kunci var , Anda dapat mendeklarasikan variabel, dan jika perlu, inisialisasi dengan nilai tertentu. Jika variabel tidak diinisialisasi, nilainya tidak undefined . Variabel yang dideklarasikan menggunakan kata kunci var memiliki cakupan fungsional.

Kata kunci let sangat mirip dengan var , perbedaannya adalah variabel yang dideklarasikan dengan kata kunci let memiliki ruang lingkup blok.

Variabel yang dideklarasikan menggunakan kata kunci const juga memiliki lingkup blok, yang, mengingat fakta bahwa nilai-nilai variabel tersebut tidak dapat diubah, akan lebih tepat disebut "konstanta". Kata kunci const , yang “membekukan” nilai variabel yang dideklarasikan menggunakannya, dapat dibandingkan dengan metode Object.freeze() , yang “membeku” objek.

Jika variabel dinyatakan di luar fungsi, cakupannya adalah global.

Array

Array dalam JavaScript diimplementasikan menggunakan objek. Akibatnya, ketika berbicara tentang array, kami, pada kenyataannya, mendiskusikan objek yang mirip dengan array. Anda bisa bekerja dengan elemen array menggunakan indeksnya. Indeks numerik dikonversi ke string dan digunakan sebagai nama untuk mengakses nilai elemen array. Misalnya, konstruk form arr[1] mirip dengan konstruk form arr['1'] , dan keduanya akan memberikan akses ke nilai yang sama: arr[1] === arr['1'] . Sesuai dengan di atas, array sederhana dideklarasikan oleh perintah let arr = ['A', 'B', 'C'] diwakili sebagai objek dari bentuk berikut:

 { '0': 'A', '1': 'B', '2': 'C' } 

Menghapus elemen array menggunakan perintah delete meninggalkan lubang di dalamnya. Untuk menghindari masalah ini, Anda dapat menggunakan perintah splice() , tetapi bekerja lambat, karena, setelah menghapus suatu elemen, ia memindahkan elemen-elemen yang tersisa dari array, sebenarnya memindahkannya ke awal array, ke kiri.

 let arr = ['A', 'B', 'C']; delete arr[1]; console.log(arr); // ['A', empty, 'C'] console.log(arr.length); // 3 

Metode array memudahkan untuk menerapkan struktur data seperti tumpukan dan antrian:

 //  let stack = []; stack.push(1);           // [1] stack.push(2);           // [1, 2] let last = stack.pop();  // [1] console.log(last);       // 2 //  let queue = []; queue.push(1);           // [1] queue.push(2);           // [1, 2] let first = queue.shift();//[2] console.log(first);      // 1 

Fungsi

Fungsi dalam JavaScript adalah objek. Fungsi dapat ditugaskan ke variabel, disimpan dalam objek atau array, diteruskan sebagai argumen ke fungsi lain, dan dikembalikan dari fungsi lainnya.

Ada tiga cara untuk mendeklarasikan fungsi:

• Deklarasi fungsi klasik (Deklarasi Fungsi atau Pernyataan Fungsi).
• Penggunaan ekspresi fungsional (Function Expression), yang juga disebut literal fungsional (Function Literal).
• Menggunakan sintaks fungsi panah (Arrow Function).

▍ Deklarasi fungsi klasik

Dengan pendekatan ini untuk mendeklarasikan fungsi, aturan berikut ini berlaku:

• Kata kunci pertama dalam garis deklarasi function adalah function .
• Fungsi harus diberi nama.
• Fungsi dapat digunakan dalam kode sebelum deklarasi karena mekanisme menaikkan deklarasi fungsi ke bagian atas lingkup di mana ia dinyatakan.

Berikut ini deklarasi fungsi klasik:

 function doSomething(){} 

▍ Ekspresi fungsional

Saat menggunakan ekspresi fungsional, berikut ini harus dipertimbangkan:

• Kata kunci function tidak lagi menjadi kata pertama dalam baris deklarasi fungsi.
• Nama fungsi adalah opsional. Dimungkinkan untuk menggunakan ekspresi fungsional anonim dan bernama.
• Perintah untuk menjalankan fungsi tersebut harus mengikuti perintah untuk deklarasi mereka.
• Fungsi seperti itu dapat diluncurkan segera setelah deklarasi menggunakan sintaksis IIFE (Ekspresi Fungsi yang Segera Diminta - langsung disebut ekspresi fungsi).

Ekspresi fungsional terlihat seperti ini:

 let doSomething = function() {} 

▍ Fungsi panah

Fungsi panah, pada kenyataannya, dapat dianggap "gula sintaksis" untuk membuat ekspresi fungsional anonim. Perlu dicatat bahwa fungsi-fungsi tersebut tidak memiliki entitas this sendiri dan arguments . Deklarasi fungsi panah terlihat seperti ini:

 let doSomething = () = > {}; 

▍ Cara untuk memanggil fungsi

Fungsinya dapat dipanggil dengan berbagai cara.

Panggilan fungsi normal

 doSomething(arguments) 

Panggilan fungsi dalam bentuk metode objek

 theObject.doSomething(arguments) theObject["doSomething"](arguments) 

Panggilan fungsi konstruktor

 new doSomething(arguments) 

Memanggil fungsi menggunakan metode apply ()

 doSomething.apply(theObject, [arguments]) doSomething.call(theObject, arguments) 

Memanggil fungsi menggunakan metode bind ()

 let doSomethingWithObject = doSomething.bind(theObject); doSomethingWithObject(); 

Fungsi dapat dipanggil dengan argumen lebih atau lebih sedikit daripada jumlah parameter yang ditentukan saat dideklarasikan. Selama fungsi berfungsi, argumen "ekstra" akan diabaikan begitu saja (meskipun fungsi akan memiliki akses ke sana), parameter yang hilang akan mendapatkan nilai yang undefined .

Fungsinya memiliki dua parameter semu: this dan arguments .

▍ Kata kunci ini

Kata this mewakili konteks suatu fungsi. Nilai yang ditunjukkan tergantung pada bagaimana fungsi dipanggil. Berikut adalah arti dari kata kunci this tergantung pada bagaimana fungsinya dipanggil (dijelaskan di atas dengan contoh kode, konstruksi yang digunakan di sini):

• Panggilan fungsi yang biasa adalah window / undefined .
• Panggilan fungsi dalam bentuk metode objek adalah theObject .
• Panggilan fungsi dalam bentuk konstruktor adalah objek baru.
• Memanggil fungsi menggunakan metode apply() - theObject .
• Memanggil fungsi menggunakan metode bind() - theObject .

▍ Argumen kata kunci

Kata kunci arguments adalah pseudo-parameter yang memberikan akses ke semua argumen yang digunakan untuk memanggil fungsi. Itu terlihat seperti sebuah array, tetapi bukan sebuah array. Secara khusus, ia tidak memiliki metode array.

 function reduceToSum(total, value){ return total + value; } function sum(){ let args = Array.prototype.slice.call(arguments); return args.reduce(reduceToSum, 0); } sum(1,2,3); 

Alternatif kata kunci arguments adalah sintaks baru untuk parameter yang tersisa. Dalam contoh berikut, args adalah array yang berisi segala sesuatu yang diteruskan ke fungsi saat dipanggil.

 function sum(...args){ return args.reduce(reduceToSum, 0); } 

ReturnOperator kembali

Fungsi yang tidak memiliki return pengembalian akan kembali undefined . Menggunakan kata kunci return , perhatikan bagaimana mekanisme penyisipan titik koma otomatis bekerja. Misalnya, fungsi berikut tidak akan mengembalikan objek kosong, tetapi nilai yang undefined :

 function getObject(){ return { } } getObject() 

Untuk menghindari masalah yang sama, braket keriting pembuka harus ditempatkan pada baris yang sama dengan return :

 function getObject(){ return { } } 

Pengetikan dinamis

JavaScript adalah bahasa pengetikan yang dinamis. Ini berarti bahwa nilai spesifik memiliki tipe, tetapi variabel tidak. Selama eksekusi program, nilai dari tipe yang berbeda dapat ditulis ke variabel yang sama. Berikut adalah contoh fungsi yang bekerja dengan nilai dari berbagai jenis:

 function log(value){ console.log(value); } log(1); log("text"); log({message : "text"}); 

Untuk mengetahui tipe data yang disimpan dalam variabel, Anda dapat menggunakan operator typeof() :

 let n = 1; typeof(n);   //number let s = "text"; typeof(s);   //string let fn = function() {}; typeof(fn);  //function 

Model eksekusi single-threaded

JavaScript runtime adalah single-threaded. Ini, khususnya, dinyatakan dalam ketidakmungkinan mengeksekusi dua fungsi secara bersamaan (jika Anda tidak memperhitungkan kemungkinan eksekusi kode asinkron, yang tidak kami sentuh di sini). Runtime memiliki yang disebut Peristiwa Antrian, yang menyimpan daftar tugas yang perlu diproses. Akibatnya, masalah kunci sumber daya bersama tidak khas untuk skema eksekusi JS tunggal, oleh karena itu, mekanisme kunci tidak diperlukan di sini. Namun, kode yang termasuk dalam antrian acara harus dijalankan dengan cepat. Jika Anda kelebihan beban dengan pekerjaan berat, di aplikasi browser, utas utama, halaman aplikasi tidak akan menanggapi tindakan pengguna dan browser akan menawarkan untuk menutup halaman ini.

Penanganan pengecualian

JavaScript memiliki mekanisme untuk menangani pengecualian. Ini bekerja sesuai dengan prinsip yang cukup umum untuk mekanisme seperti itu: kode yang dapat menyebabkan kesalahan dieksekusi menggunakan try/catch konstruk. Kode itu sendiri ada di blok try , kesalahan diproses di catch .

Sangat menarik untuk dicatat bahwa kadang-kadang JavaScript, dalam keadaan darurat, tidak menghasilkan pesan kesalahan. Hal ini disebabkan oleh fakta bahwa JS tidak melakukan kesalahan hingga adopsi standar ECMAScript 3.

Misalnya, dalam fragmen kode berikut, upaya untuk mengubah objek "beku" akan gagal, tetapi pengecualian tidak akan dibuang.

 let obj = Object.freeze({}); obj.message = "text"; 

Beberapa kesalahan JS "sunyi" muncul dalam mode ketat, Anda dapat mengaktifkannya menggunakan konstruksi "use strict"; .

Sistem prototipe

Dasar dari mekanisme JS seperti fungsi konstruktor, perintah Object.create() , kata kunci class , didasarkan pada sistem prototipe.
Perhatikan contoh berikut:

 let service = { doSomething : function() {} } let specializedService = Object.create(service); console.log(specializedService.__proto__ === service); //true 

Di sini, untuk membuat objek Object.create() , prototipe di antaranya adalah untuk membuat objek service , perintah Object.create() digunakan. Akibatnya, ternyata metode doSomething() dapat dipanggil dengan mengakses objek specialService. Selain itu, ini berarti bahwa properti __proto__ dari objek __proto__ menunjuk ke objek service .

Sekarang buat objek serupa menggunakan kata kunci class :

 class Service { doSomething(){} } class SpecializedService extends Service { } let specializedService = new SpecializedService(); console.log(specializedService.__proto__ === SpecializedService.prototype); 

Metode yang dideklarasikan di kelas Service akan ditambahkan ke objek Service.prototype . Contoh kelas Service akan memiliki prototipe yang sama ( Service.prototype ). Semua contoh akan mendelegasikan panggilan metode ke objek Service.prototype . Akibatnya, ternyata metode hanya dideklarasikan sekali saja, di Service.prototype , setelah itu mereka "diwarisi" oleh semua instance kelas.

▍ Rantai Prototipe

Objek bisa menjadi "pewaris" objek lain. Setiap objek memiliki prototipe, metode yang tersedia untuknya. Jika Anda mencoba mengakses properti yang tidak ada dalam objek itu sendiri, JavaScript akan mulai mencarinya di rantai prototipe. Proses ini akan berlanjut sampai properti ditemukan, atau sampai pencarian mencapai akhir rantai.

Tentang pemrograman fungsional dalam JavaScript

Dalam JavaScript, fungsi adalah objek kelas satu, bahasa mendukung mekanisme penutupan. Ini membuka jalan untuk menerapkan teknik pemrograman fungsional di JS. Secara khusus, kita berbicara tentang kemungkinan menggunakan fungsi tingkat tinggi.

Penutupan adalah fungsi internal yang memiliki akses ke variabel yang dideklarasikan di dalam fungsi induk, bahkan setelah fungsi induk dijalankan.

Fungsi tingkat tinggi adalah fungsi yang dapat mengambil fungsi lain sebagai argumen, mengembalikan fungsi, atau melakukan keduanya.

Pemrograman fungsional dalam JS dicakup dalam banyak publikasi. Jika Anda tertarik, berikut adalah beberapa bahan pada topik ini yang ditujukan untuk fungsi , komposisi , dekorator , penutup, dan keterbacaan kode kelas satu yang ditulis dalam gaya fungsional.

Ringkasan

Kekuatan JavaScript terletak pada kesederhanaannya. Memahami mekanisme dasar bahasa memungkinkan pemrogram menggunakan JS untuk lebih efektif menerapkan mekanisme ini dan meletakkan dasar untuk pertumbuhan profesionalnya.

Pembaca yang budiman! Menurut Anda, fitur apa yang dimiliki sebagian besar pemula?