JavaScript - ECMAScript 2019: Panduan untuk Pemula

Halo sana, bakat coding superstars masa depan! Saya sangat senang menjadi panduan Anda dalam perjalanan menarik ini ke dunia ECMAScript 2019. Sebagai seseorang yang telah mengajar pemrograman selama bertahun-tahun, saya tidak sabar untuk membagikan keajaiban bahasa ini kepada Anda. Jadi, ambil catatan virtual Anda, dan mari kita masuk ke dalam!

Pengenalan ke ECMAScript 2019

Sebelum kita mulai, mari kita bicarakan tentang apa itu ECMAScript. Bayangkan JavaScript seperti sebuah kue yang lezat, dan ECMAScript adalah resepnya. Setiap tahun, resep ini disembah dan diperbaiki, dan tahun 2019 tidak menjadi pengecualian. ECMAScript 2019 memberikan kita beberapa fitur baru yang membuat kue JavaScript kita menjadi lebih nikmat!

Fitur Baru yang Ditambahkan di ECMAScript 2019

ECMAScript 2019 memperkenalkan beberapa fitur menarik yang membuat hidup coding kita lebih mudah. Mari kita jelajahi mereka satu per satu, ya?

Metode JavaScript Array flat()

Apakah Anda pernah memiliki kamar yang kacau dengan kotak di dalam kotak? Itu seperti apa array bersarang di JavaScript. Metode flat() adalah seperti robot pembersihan ajaib yang membuka semua kotak dan menempatkan semuanya di satu tingkat rapi.

Lihatlah contohnya:

const kamarKacau = [1, 2, [3, 4, [5, 6]]];
const kamarRapi = kamarKacau.flat(2);
console.log(kamarRapi); // Output: [1, 2, 3, 4, 5, 6]

Dalam contoh ini, kamarKacau adalah array bersarang kita. Metode flat(2) pergi dua tingkat kedalam untuk meratakan array. Hasilnya adalah kamarRapi, di mana semua angka berada di tingkat yang sama. Bagus, kan?

Metode JavaScript Array flatMap()

Sekarang, bayangkan jika robot pembersihan kita tidak hanya bisa membersihkan tapi juga mengubah item saat itu. Itu apa yang flatMap() lakukan! Itu seperti map() dan flat() memiliki anak superkuat.

Ini adalah contoh menarik:

const hewan = ["anjing", "kucing", "ikan"];
const suaraHewan = hewan.flatMap(hewan => {
if (hewan === "anjing") return ["woof", "bark"];
if (hewan === "kucing") return ["meow"];
return [];
});
console.log(suaraHewan); // Output: ["woof", "bark", "meow"]

Dalam kode ini, kita mengambil array hewan dan membuat array baru dengan suara mereka. Perhatikan bagaimana anjing memiliki dua suara, tapi mereka akhirnya berada di array yang rata. Sayangnya ikan, meskipun - mereka terlalu tenang untuk masuk daftar!

Revisi Metode Array sort()

Metode sort() mendapat penampilan baru di ECMAScript 2019. Sekarang, ia menjamin bahwa array akan disusun secara stabil. Apa artinya itu? Jika dua item dianggap sama oleh fungsi pengurutan, mereka akan menjaga urutan asli mereka relatif terhadap satu sama lain.

Lihatlah contohnya:

const siswa = [
{name: "Alice", grade: "B"},
{name: "Bob", grade: "A"},
{name: "Charlie", grade: "B"},
{name: "David", grade: "A"}
];

siswa.sort((a, b) => a.grade.localeCompare(b.grade));
console.log(siswa);
/* Output:
[
{name: "Bob", grade: "A"},
{name: "David", grade: "A"},
{name: "Alice", grade: "B"},
{name: "Charlie", grade: "B"}
]
*/

Dalam contoh ini, kita mengurutkan siswa berdasarkan nilai mereka. Perhatikan bagaimana Bob dan David (keduanya dengan nilai A) menjaga urutan asli mereka, dan demikian juga Alice dan Charlie (keduanya dengan nilai B). Pengurutan stabil ini dapat sangat penting dalam banyak aplikasi!

Metode Object.fromEntries

Apakah Anda pernah berharap Anda bisa mengubah sejumlah pasangan kunci-nilai menjadi objek? Sekarang Anda bisa dengan Object.fromEntries()! Itu seperti magi, tapi lebih baik karena itu adalah JavaScript.

Periksalah ini:

const entries = [
['name', 'Alice'],
['age', 25],
['city', 'Wonderland']
];

const person = Object.fromEntries(entries);
console.log(person);
// Output: { name: 'Alice', age: 25, city: 'Wonderland' }

Dalam contoh ini, kita mulai dengan array pasangan kunci-nilai. Object.fromEntries() mengubah ini menjadi objek di mana setiap pasangan menjadi properti. Itu kebalikan dari Object.entries(), yang kita punya sebelumnya.

Penyambungan Optional di catch

Penanganan kesalahan menjadi lebih mulus dengan penyambungan optional di catch. Sebelumnya, kita selalu harus menentukan parameter kesalahan dalam klausa catch, bahkan jika kita tidak menggunakannya. Sekarang, kita bisa menghilangkan itu jika kita tidak memerlukannya.

Lihatlah bagaimana itu terlihat:

// Sebelum ECMAScript 2019
try {
// Some code that might throw an error
} catch (error) {
console.log("An error occurred");
}

// Dengan ECMAScript 2019
try {
// Some code that might throw an error
} catch {
console.log("An error occurred");
}

Lihat bagaimana kita menghapus bagian (error) di contoh kedua? Itu adalah penyambungan optional di catch dalam aksi.

Revisi JSON.stringify()

JSON.stringify() menjadi sedikit cerdas di ECMAScript 2019. Sekarang, ia menangani beberapa karakter Unicode lebih baik, memastikan bahwa JSON kita tetap valid.

Lihatlah contohnya:

const obj = { name: "Pikachu\uD800" };
console.log(JSON.stringify(obj));
// Output: {"name":"Pikachu�"}

Dalam kasus ini, \uD800 adalah pengganti surrogate yang tak terpasang, yang bisa menyebabkan masalah di beberapa parser JSON. JSON.stringify() baru mengganti itu dengan karakter pengganti Unicode (�) untuk menjaga JSON valid.

Revisi Metode toString() untuk Fungsi

Metode toString() untuk fungsi sekarang mengembalikan kode sumber tepat dari fungsi, termasuk whitespace dan komentar. Itu seperti mendapat fotokopi sempurna dari fungsi Anda!

Lihatlah contohnya:

function greet(name) {
// Ini adalah fungsi pengantar
console.log(`Hello, ${name}!`);
}

console.log(greet.toString());
/* Output:
function greet(name) {
// Ini adalah fungsi pengantar
console.log(`Hello, ${name}!`);
}
*/

Seperti yang Anda lihat, output termasuk komentar dan menjaga format asli. Ini bisa sangat membantu untuk debugging atau membuat dokumentasi!

Simbol Separator Diperbolehkan di String Literal

ECMAScript 2019 membawa perubahan kecil tapi berguna: Anda sekarang bisa menggunakan U+2028 (line separator) dan U+2029 (paragraph separator) di string literal tanpa mengescape mereka.

Lihatlah contohnya:

const text = "Line 1 separator→\u2028←Line 2";
console.log(text);
// Output:
// Line 1
// Line 2

Perubahan ini membuatnya mudah bekerja dengan teks yang mungkin mengandung separator ini, khususnya saat berurusan dengan data dari sumber lain.

Metode String.prototype.trimStart() dan String.prototype.trimEnd()

Terakhir tapi bukan paling kurang, kita mendapat dua metode string baru: trimStart() dan trimEnd(). Seperti trim(), tapi mereka hanya menghapus whitespace dari salah satu ujung string.

Lihatlah mereka dalam aksi:

const kotor = "   Hello, World!   ";
console.log(kotor.trimStart()); // Output: "Hello, World!   "
console.log(kotor.trimEnd());   // Output: "   Hello, World!"
console.log(kotor.trim());      // Output: "Hello, World!"

Metode ini bagus saat Anda hanya ingin membersihkan salah satu sisi string. Mereka adalah alias untuk metode trimLeft() dan trimRight() yang lebih tua, tapi dengan nama yang lebih clearly menjelaskan apa yang mereka lakukan.

Kesimpulan

Dan itu adalah semua, teman-teman! Kita telah berpergian melalui fitur baru menarik ECMAScript 2019. Dari meratakan array sampai membersihkan string, penambahan ini membuat JavaScript kita lebih kuat dan mudah digunakan.

Ingat, cara terbaik untuk belajar adalah dengan melakukan. Jadi, maju dan eksperimenkan fitur baru ini dalam kode Anda sendiri. Jangan takut untuk membuat kesalahan - itu adalah bagaimana kita belajar dan tumbuh sebagai pemrogrammer.

Selamat coding, dan semoga petualangan JavaScript Anda bebas dari bug dan penuh kebahagiaan!

Metode	Deskripsi
Array.prototype.flat()	Meratakan array bersarang ke tingkat yang ditentukan
Array.prototype.flatMap()	Peta setiap elemen menggunakan fungsi peta, kemudian ratakan hasilnya
Array.prototype.sort()	Susun elemen array di tempat (sekarang stabil)
Object.fromEntries()	Transformasikan daftar pasangan kunci-nilai menjadi objek
try...catch	Sekarang mendukung penyambungan optional
JSON.stringify()	Penanganan yang diperbaiki untuk karakter Unicode
Function.prototype.toString()	Sekarang mengembalikan kode sumber tepat fungsi
String.prototype.trimStart()	Menghapus whitespace dari awal string
String.prototype.trimEnd()	Menghapus whitespace dari akhir string

Credits: Image by storyset