Panduan Pemula untuk JavaScript - ECMAScript 2017

Hai sana, para pemrogram masa depan! Saya sangat gembira menjadi panduan Anda dalam perjalanan menarik ini ke dunia ECMAScript 2017. Sebagai seseorang yang telah mengajar ilmu komputer selama lebih dari satu dekade, saya dapat menjamin Anda bahwa belajar JavaScript adalah seperti membuka kekuatan super dalam zaman digital. Jadi, mari kita masuk dan jelajahi fitur fantastik yang diperkenalkan dalam ECMAScript 2017!

Fitur Baru yang Ditambahkan dalam ECMAScript 2017

ECMAScript 2017, juga dikenal sebagai ES8, membawa beberapa fitur game-changing ke JavaScript. Bayangkan itu seperti set baru alat yang ditambahkan ke kotak perkakas coding Anda. Fitur ini membuat kehidupan kita sebagai pengembang menjadi mudah dan kode kita menjadi lebih efisien. Mari kitauraikan mereka satu per satu!

String Padding: metode padStart() dan padEnd()

Apakah Anda pernah memerlukan menambahkan karakter ekstra di awal atau akhir string untuk membuatnya memiliki panjang tertentu? Well, ECMAScript 2017 telah menangani Anda dengan metode padStart() dan padEnd()!

padStart()

Metode padStart() memenuhi string saat ini dengan string lain sampai string yang dihasilkan mencapai panjang yang diberikan. Pemenuhan diterapkan dari awal string saat ini.

let str = '5';
console.log(str.padStart(3, '0')); // Output: '005'

Dalam contoh ini, kita memenuhi string '5' dengan nol sampai itu menjadi 3 karakter panjang. Itu seperti menambahkan nol awal ke sebuah nomor!

padEnd()

Secara mirip, padEnd() memenuhi string saat ini dari akhir.

let price = '99';
console.log(price.padEnd(5, '.00')); // Output: '99.00'

Di sini, kita menambahkan '.00' ke akhir '99' untuk membuatnya terlihat seperti harga dengan sen.

Metode ini sangat berguna saat Anda perlu memformat string untuk tampilan atau meratakan teks dalam cara tertentu.

Metode Object.entries()

Sekarang, mari bicarakan Object.entries(). Metode ini seperti seorang ahli sihir yang mengubah objek menjadi array pasangan [key, value] properti yang eigen. Itu sangat berguna saat Anda perlu mengulang properti objek.

let person = {
name: 'Alice',
age: 30,
city: 'New York'
};

console.log(Object.entries(person));
// Output: [['name', 'Alice'], ['age', 30], ['city', 'New York']]

Dalam contoh ini, Object.entries() mengubah objek person menjadi array di mana setiap elemen adalah array lain yang mengandung pasangan key-value. Itu seperti membuka suitase dan menata semua isinya!

Metode Object.values()

Object.values() adalah saudara Object.entries(). Daripada memberikan kita pasangan key-value, itu mengembalikan array hanya nilai properti dalam objek.

let fruits = {
apple: 5,
banana: 3,
orange: 2
};

console.log(Object.values(fruits)); // Output: [5, 3, 2]

Metode ini sangat cocok saat Anda hanya peduli tentang nilai dalam objek dan bukan tentang kunci mereka. Itu seperti mendapatkan daftar belanja tanpa harga!

JavaScript async dan await

Sekarang, kita memasuki realm JavaScript asinkron dengan async dan await. Kata kunci ini membuat bekerja dengan Promises (sebuah cara untuk menghandle operasi asinkron) menjadi lebih mudah dan dapat dibaca.

async function fetchUserData() {
try {
let response = await fetch('https://api.example.com/user');
let userData = await response.json();
console.log(userData);
} catch (error) {
console.error('Failed to fetch user data:', error);
}
}

fetchUserData();

Dalam contoh ini, async memberitahu JavaScript bahwa fungsi ini akan bekerja dengan kode asinkron. Kata kunci await menghentikan eksekusi fungsi sampai Promise terpenuhi. Itu seperti memberitahu JavaScript, "Tunggu di sini sampai tugas ini selesai sebelum melanjutkan."

Ini membuat kode asinkron terlihat dan berperilaku lebih seperti kode sinkron, yang jauh lebih mudah untuk dibaca dan dipahami!

Metode Object.getOwnPropertyDescriptors()

Metode ini mungkin terdengar menakutkan, tapi itu sebenarnya sangat berguna! Itu mengembalikan semua deskriptor properti milik objek yang diberikan.

let obj = {
name: 'John',
get age() { return 30; }
};

console.log(Object.getOwnPropertyDescriptors(obj));
/* Output:
{
name: {
value: 'John',
writable: true,
enumerable: true,
configurable: true
},
age: {
get: [Function: get age],
set: undefined,
enumerable: true,
configurable: true
}
}
*/

Metode ini sangat berguna saat Anda perlu menyalin properti dari satu objek ke objek lain, termasuk deskriptornya (seperti getters dan setters).

JavaScript Shared Memory dan Atomics

Akhirnya, mari kita bicarakan Shared Memory dan Atomics. Fitur ini memungkinkan thread yang berbeda dalam JavaScript untuk berbagi ruang memori yang sama dan melakukan operasi atomik.

// Buat buffer bersama
let sharedBuffer = new SharedArrayBuffer(4);
let sharedArray = new Int32Array(sharedBuffer);

// Lakukan operasi atomik
Atomics.store(sharedArray, 0, 42);
console.log(Atomics.load(sharedArray, 0)); // Output: 42

Ini adalah hal tingkat tinggi, biasanya digunakan dalam konteks di mana Anda memerlukan pengkomputan tingkat kinerja tinggi dalam JavaScript. Itu seperti beberapa chef yang bekerja di dapur yang sama, dapat berbagi bahan tanpa menghalangi satu sama lain!

Ringkasan Metode Baru

Berikut adalah tabel referensi singkat dari metode yang kita diskusikan:

Metode	Deskripsi
String.prototype.padStart()	Menyuap awal string saat ini dengan string lain
String.prototype.padEnd()	Menyuap akhir string saat ini dengan string lain
Object.entries()	Mengembalikan array pasangan [key, value] properti yang eigen objek
Object.values()	Mengembalikan array nilai properti yang eigen objek
Object.getOwnPropertyDescriptors()	Mengembalikan semua deskriptor properti milik objek
Atomics metode	Menyediakan operasi atomik sebagai metode statis di objek Atomics

Dan itu saja! Kita telah menelusuri fitur utama yang diperkenalkan dalam ECMAScript 2017. Ingat, belajar untuk mengoding adalah perjalanan, bukan tujuan. Teruslatih, terus jelajahi, dan terutama, bersenang-senang dengan itu! Selamat coding!

Credits: Image by storyset