Panduan Pemula untuk JavaScript - ECMAScript 2019

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

Pengenalan ke ECMAScript 2019

Sebelum kita mulai, mari kita berbicara singkat tentang apa itu ECMAScript. Bayangkan JavaScript sebagai kue yang lezat, dan ECMAScript sebagai resepnya. Setiap tahun, resep ini disembah dan diperbaiki, dan tahun 2019 tidak menjadi pengecualian. ECMAScript 2019 memberikan kita beberapa fitur baru yang membuat hidup pemrograman kita lebih mudah!

Fitur Baru yang Ditambahkan di ECMAScript 2019

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

Metode Array.prototype.flat()

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

mari kita lihat 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 ratakan array. Hasilnya adalah kamarRapi, di mana semua angka berada di tingkat yang sama. Cantik, kan?

Metode Array.prototype.flatMap()

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

Ini adalah contoh yang menyenangkan:

const hewan = ["anjing", "kucing", "ikan"];
const suaraHewan = hewan.flatMap(hewan => {
if (hewan === "anjing") return ["woof", "gonggong"];
if (hewan === "kucing") return ["meow"];
return [];
});
console.log(suaraHewan); // Output: ["woof", "gonggong", "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 rata. Anjing, meskipun - mereka terlalu diam untuk masuk daftar!

Revisi Array.prototype.sort()

Metode sort() mendapat sedikit perubahan di ECMAScript 2019. Sekarang, ia menjamin bahwa array akan diurutkan dengan cara yang stabil. Apa artinya itu? Jika dua item dianggap sama oleh fungsi pengurutan, mereka akan menjaga urutan asli mereka relatif terhadap satu sama lain.

mari kita lihat 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!

Object.fromEntries()

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

Lihat 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 sebaliknya dari Object.entries(), yang kita punya sebelumnya.

Penanganan opsional catch

Penanganan kesalahan menjadi sedikit lebih mulus dengan penanganan opsional catch. Sebelumnya, kita selalu harus menentukan parameter kesalahan dalam klausa catch, bahkan jika kita tidak menggunakannya. Sekarang, kita dapat mengabaikannya jika kita tidak memerlukannya.

mari lihat 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 penanganan opsional catch dalam aksi. Itu adalah perubahan kecil, tapi itu dapat membuat kode kita lebih bersih saat kita tidak memerlukan objek kesalahan.

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.

mari lihat contohnya:

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

Dalam kasus ini, \uD800 adalah pengganti surrogate yang tak dipasangkan, yang dapat menyebabkan masalah dalam beberapa parser JSON. JSON.stringify() baru menggantinya dengan karakter pengganti Unicode (�) untuk menjaga JSON valid.

Revisi Function.prototype.toString()

Metode toString() untuk fungsi sekarang mengembalikan kode sumber eksak fungsi, termasuk semua spasi dan komentar. Itu seperti mendapatkan salinan sempurna dari fungsi Anda!

mari lihat contohnya:

function greet(name) {
// This is a greeting function
console.log(`Hello, ${name}!`);
}

console.log(greet.toString());
/* Output:
function greet(name) {
// This is a greeting function
console.log(`Hello, ${name}!`);
}
*/

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

Simbol pemisah di literal string

ECMAScript 2019 membawa perubahan kecil tapi berguna: Anda sekarang dapat menggunakan U+2028 (pemisah baris) dan U+2029 (pemisah paragraf) dalam literal string tanpa mengescapednya.

mari lihat contohnya:

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

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

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

Terakhir tetapi bukan kurang penting, kita mendapat dua metode string baru: trimStart() dan trimEnd(). Ini seperti trim(), tapi mereka hanya menghapus spasi dari salah satu ujung string.

mari lihat 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 sangat baik 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 jelas mengenai apa yang mereka lakukan.

Kesimpulan

Dan itu adalah yang anda lihat, teman-teman! Kita telah melakukan perjalanan melalui fitur baru menarik ECMAScript 2019. Dari meratakan array hingga membersihkan string, penambahan ini membuat JavaScript kita lebih kuat dan mudah digunakan.

Ingat, cara terbaik untuk belajar adalah dengan melakukan. Jadi, pergi 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 bug dan penuh kegembiraan!

Credits: Image by storyset