JavaScript - ECMAScript 2021: Panduan Pemula

Hai sana, super bintang pengkomputeran masa depan! Saya begitu gembira untuk menjadi panduanmu dalam perjalanan menarik ini ke dunia ECMAScript 2021. Sebagai guru sains komputer dengan tahun-tahun pengalaman, saya telah menyaksikan banyak murid berubah dari pemula sepenuhnya menjadi pengrogram yang percaya diri. Hari ini, kita akan menjelajahi fitur terbaru JavaScript, dan saya berjanji untuk membuatnya sebanyak mungkin menyenangkan dan mudah dipahami. Jadi, ambil minumannya yang favorit, betahkan dirimu, dan mari kita masuk ke dalam!

Apa Itu ECMAScript 2021?

Sebelum kita melompat ke fitur baru, mari kita cerita singkat tentang apa itu ECMAScript. Pemikirkan ECMAScript sebagai buku resep untuk JavaScript. Setiap tahun, para koki ( alias pengembang bahasa) menambahkan resep baru (fitur) untuk membuat hidup coding kita lebih mudah dan lebih nikmat. ECMAScript 2021, juga dikenal sebagai ES12, adalah edisi terbaru buku resep ini.

Fitur Baru Ditambahkan dalam ECMAScript 2021

ECMAScript 2021 memberikan kita beberapa alat baru untuk main-main. Itu seperti mendapat set LEGO baru berkilauan untuk ditambahkan ke koleksi kita. Mari kita jelajahi setiap fitur baru ini satu per satu.

Pemisah Numerik (_)

Apakah Anda pernah mencoba membaca angka yang sangat panjang, seperti 1000000000? Itu agak menyakitkan kepala, kan? Pemisah numerik disini untuk menyelamatkan hari!

// Tanpa pemisah numerik
const billion = 1000000000;

// Dengan pemisah numerik
const billionReadable = 1_000_000_000;

console.log(billion === billionReadable); // Output: true

Garis bawah (_) di 1_000_000_000 tidak mengubah nilai angka. Itu hanya ada untuk membuatnya lebih mudah bagi kita manusia untuk membaca. Itu menarik, kan? Itu seperti menambahkan spasi di kalimat panjang untuk membuatnya lebih mudah dibaca.

Metode Promise any()

Janji di JavaScript seperti membuat banyak panggilan telepon sekaligus dan menunggu seseorang menjawab. Metode Promise.any() adalah cara baru untuk menghandle janji ganda.

const promise1 = new Promise((resolve, reject) => setTimeout(reject, 100, 'promise1'));
const promise2 = new Promise((resolve, reject) => setTimeout(resolve, 200, 'promise2'));
const promise3 = new Promise((resolve, reject) => setTimeout(resolve, 300, 'promise3'));

Promise.any([promise1, promise2, promise3])
.then((value) => console.log(value))
.catch((error) => console.log(error));

// Output: promise2

Dalam contoh ini, Promise.any() selesai segera setelah salah satu janji dalam array terpenuhi. Itu seperti sebuah lomba dimana kita hanya peduli dengan orang pertama yang melintasi garis finish, tanpa peduli siapa yang datang kedua atau ketiga.

Metode String replaceAll()

Apakah Anda pernah bermain permainan penggantian kata? Metode replaceAll() seperti itu, tapi untuk string di JavaScript.

const sentence = "I love cats. Cats are great pets.";
const newSentence = sentence.replaceAll("cats", "dogs");

console.log(newSentence); // Output: "I love dogs. Dogs are great pets."

Sebelum replaceAll(), kita harus menggunakan ekspresi reguler atau loop untuk mengganti semua kemunculan substring. Sekarang, itu begitu mudah seperti memanggil metode tunggal!

Operator Atribusi Logika

ECMAScript 2021 memperkenalkan tiga operator atribusi logika baru. Ini seperti penyingkatan cara menulis pola umum di JavaScript. Mari kita lihat setiap satunya:

Operator Atribusi Logika AND (&&=)

let x = 1;
let y = 2;

x &&= y;

console.log(x); // Output: 2

// Ini setara dengan:
// x && (x = y);

Operator &&= menetapkan nilai kanan hanya jika nilai kiri benar. Itu seperti mengatakan, "Jika x benar, maka buatnya sama dengan y."

Operator Atribusi Logika OR (||=)

let a = null;
let b = 'default value';

a ||= b;

console.log(a); // Output: "default value"

// Ini setara dengan:
// a || (a = b);

Operator ||= menetapkan nilai kanan hanya jika nilai kiri salah. Itu sempurna untuk menetapkan nilai default!

Operator Atribusi Nullish Coalescing (??=)

let foo = null;
let bar = 'baz';

foo ??= bar;

console.log(foo); // Output: "baz"

// Ini setara dengan:
// foo ?? (foo = bar);

Operator ??= menetapkan nilai kanan hanya jika nilai kiri null atau undefined. Itu mirip dengan ||=, tapi lebih spesifik tentang apa yang dianggap "kosong".

Ringkasan Metode

Berikut adalah tabel praktis yang meringkaskan metode baru yang kita pelajari:

Metode	Deskripsi	Contoh
Pemisah Numerik	Membuat angka besar lebih mudah dibaca	1_000_000_000
Promise.any()	Selesai saat janji manapun dalam array terpenuhi	Promise.any([promise1, promise2, promise3])
String.replaceAll()	Mengganti semua kemunculan substring	"hello hello".replaceAll("hello", "hi")
&&=	Menetapkan jika kiri benar	x &&= y
||=	Menetapkan jika kiri salah	x \|\|= y
??=	Menetapkan jika kiri null atau undefined	x ??= y

Danitu, teman-teman! Kita telah menjelajahi fitur menarik ECMAScript 2021. Ingat, cara terbaik untuk belajar programming adalah dengan melakukan. Jadi, saya mendorong Anda untuk bermain dengan fitur baru ini, eksperimen, dan terutama, bersenang-senang!

Seperti yang kata gurunya saat itu, "Coding seperti memasak. Anda mungkin membakar beberapa piringan pertama, tapi dengan latihan, Anda akan membuat kreasikan masterpieces dalam waktu singkat!" Jadi, jangan takut membuat kesalahan - mereka semua bagian dari proses belajar.

Tetap coding, tetap curiga, dan selamat belajar!

Credits: Image by storyset