Hari ke 5 Pembelajaran JavaScript — Tonggak Pencapaian 1
Artikel ini ditulis sedikit berdasarkan tutorial Leanpub - Memahami ES6. Untuk penjelasan dan contoh lebih lanjut, silakan kunjungi situs webnya.
1. Block Bindings: Ganti IIFE dengan menggunakan 'let'
Kita dapat mengganti IIFE dan mendapatkan hasil yang sama dengan mendeklarasikan letdi dalam satu lingkaran. Dalam pengikatan blok, untuk kode yang lebih bersih, kita dapat menggunakan let daripada var,tidak seperti IIFE. Apa yang dilakukan IIFE adalah mendeklarasikan variabel loop sebagai var. Fungsi for di dalam loop dapat memperoleh & menahan pengikatan baru setiap kali, mendeklarasikan variabel loop letfor akan membuat pekerjaan lebih praktis dan mudah.
Contoh:
var angka = [];
for (misalkan i = 0; i ‹ 10; i++) {
angka .push(fungsi() {
konsol.log(i);
});
}
angka.forEach(fungsi(angka) {
nomor(); // menghasilkan 0, lalu 1, lalu 2, hingga 9
})
2. Deklarasi Tingkat Blok: Zona Mati Duniawi
Hoisting memungkinkan kita mengakses variabel sebelum dideklarasikan. Namun sayangnya, ini hanya tersedia untuk variabel yang dideklarasikan sebagai var. Untuk variabel yang dideklarasikan dengan let atau const,pengangkatan dilarang & akan menimbulkan kesalahan.
Karena mesin browser JS menempatkan deklarasi di Temporal Dead Zone atau TDZ (untuk let dan const). Jika kita ingin mengakses suatu variabel di TDZ maka akan terjadi error runtime. Kita dapat membenarkannya dengan operasi sederhana menggunakan typeOf().
Contoh:
if ( — -) {
console.log(jenis warna); // Kesalahan Referensi!
biarkan warna = “merah”;
}
3. Nilai Parameter Default ES6 Mempengaruhi argumen Objek
Meskipun di ES5 tidak mungkin mendapatkan hasil argumen yang diharapkan tanpa menggunakan mode ketat, namun ES6 memberikan solusi ajaib hanya dengan menggunakan parameter default dalam suatu fungsi. Parameter default memisahkan objek argumen dari parameter bernama.
Contoh:
tes fungsi(satu, dua= “b”) {
console.log(argumen.panjang); // 1
console.log(satu === argumen[0]); // BENAR
console.log(dua === argumen[1]); // salah, argumen[1] tidak terdefinisi
pertama = “c”;
kedua = “d”
console.log(pertama === argumen[0]); // PALSU
console.log(kedua === argumen[1]); // PALSU
}
tes("sebuah");
4. Fungsi: Mengganti apply() dengan Operator Spread
Saat kita perlu mencari nilai dari array yang terdiri dari beberapa elemen, cukup membingungkan untuk mencari melalui array di ES5. Salah satu solusinya adalah menggunakan metode apply(), namun hal ini membuat sintaksis tambahan & merusak esensi asli kode. Di ES6, kita dapat melakukan ini hanya dengan menggunakan operator spread (…).
Contoh-1 (ES5):
misalkan nilai = [170, 30, 23, 100];
console.log(Math.max.apply(Matematika, nilai)); // 170
Contoh-2 (ES6):
misalkan nilai = [170, 30, 23, 100];
console.log(Matematika.max(…nilai)); // 170
5. Fungsi Tingkat Blok ES6 dalam Mode Nonketat
ES6 juga mendukung pengibaran deklarasi. Namun dalam mode non-ketat, deklarasi akan diangkat ke lingkungan global, bukan di tingkat blok teratas.
Contoh:
jika benar) {
console.log(tes tipe); // "fungsi"
tes fungsi() {
// kode isi fungsi
}
tes();
}
console.log(tes tipe); // "fungsi"
6. Fungsi & Array Panah
ES6 menyediakan fitur canggih yang disebut fungsi Panah (=›). Ini menggantikan blok fungsi tradisional yang panjang dan membuat kode lebih bersih. Memproses elemen array [.., .., ..] dengan bantuan fungsi panah(=›) jauh lebih mudah daripada deklarasi fungsi tradisional.
Contoh-1 (fungsi tradisional):
misalkan nilai = [170, 30, 23, 100];
var hasil = nilai.sortir(fungsi(a, b) {
kembalikan a - b;
});
hasil // [23, 30, 100, 170]
Contoh-2 (fungsi panah):
misalkan nilai = [170, 30, 23, 100];
var hasil = nilai.sort((a, b) =› a - b);
hasil // [23, 30, 100, 170]
7. Destrukturisasi Penugasan, pertukaran nilai
Destrukturisasi adalah teknik memecah struktur data yang diperlukan. Menggunakan destruktur array, menukar nilai array jauh lebih mudah tanpa variabel ketiga. Kita dapat mendestrukturasi array dengan menggunakan tanda kurung []di sisi kiri operator penugasan (=), dan variabel array di sisi kanan.
Contoh-1 (menggunakan variabel ketiga - ES5):
misalkan a = 1, b = 2, suhu;
suhu = a;
a = b;
b = suhu;
konsol.log(a); // 2
konsol.log(b); // 1
Contoh-2 (menggunakan penghancuran array - ES6):
misalkan a = 1, b = 2;
[ a, b ] = [ b, a ];
konsol.log(a); // 2
konsol.log(b); // 1
8. '... item istirahat' membuat kloning array menjadi mudah
Sulit dipercaya bahwa mengkloning elemen array jauh lebih mudah daripada yang kita kira di ES6. Sebelum pengembang ES6 menggunakan metode concat()untuk mengkloning elemen array, namun tujuan awal dari fungsi concat(),jelas bukan untuk susunan klon. Inilah '... item istirahat'. Cukup dengan menugaskan larik ke variabel [… item lainnya], Anda akan mengkloning seluruh larik tanpa kesalahan apa pun.
Contoh:
biarkan buah= [ “mangga”, “jeruk”, “nanas” ];
biarkan [ …cloneFruits ] = buah-buahan;
console.log(Buah-buahan yang dikloning); // [“mangga”, “jeruk”, “nanas”]
9. Kelas: Warga Kelas Satu ES6
Warga Kelas Satu atau Fungsi Kelas Satu di ES6 menjadikan JavaScript unik dari bahasa lain. Fitur unik ini memberikan nilai yang diharapkan -
i) diteruskan ke suatu fungsi,
ii) dikembalikan dari suatu fungsi, dan
iii) ditugaskan ke suatu variabel.
Contoh:
tes fungsi(Kelas demo) {
kembalikan demoClass baru();
}
misalkan x = tes(kelas {
katakan sesuatu() {
console.log("Selamat Pagi!");
}
});
x.mengatakan Sesuatu();
10. Kelas: Properti Pengakses
Properti kelas harus selalu dibentuk di dalam konstruktor kelas tersebut. Di ES6, diperbolehkan untuk mendefinisikan properti pengakses dalam prototipe kelas. Kelas menggunakan metode pengambildan penyeteluntuk menyederhanakan akses properti.
Contoh:
Metode Object.getOwnPropertyDescriptor() mengembalikan deskriptor properti untuk properti sendiri (Referensi: MDN)
kelas CustomHTMLElement {
konstruktor(elemen) {
this.elemen = elemen;
}
dapatkan html() {
kembalikan this.element.innerHTML;
}
atur html(nilai) {
this.element.innerHTML = nilai;
}
}
var descriptor = Object.getOwnPropertyDescriptor(CustomHTMLElement.prototype, “html”);
console.log("dapatkan" di deskriptor); // BENAR
console.log("set" di deskriptor); // BENAR
console.log(deskriptor.enumerable); // PALSU
