• Tentang Kami
  • Portofolio
  • Paket Web
  • Promo
    • Hosting Terbaik Unlimited
  • Tutorial Website
  • GRATISAN
  • Lokasi
  • Artikel

data@sundakreatif.com

0878 231 791 22

Jasa Pembuatan WebsiteJasa Pembuatan WebsiteJasa Pembuatan Website
Menu
  • Tentang Kami
  • Portofolio
  • Paket Web
  • Promo
    • Hosting Terbaik Unlimited
  • Tutorial Website
  • GRATISAN
  • Lokasi
  • Artikel

6 Fitur JavaScript ES12

  • Home
  • Blog
  • 6 Fitur JavaScript ES12
6 Fitur JavaScript ES12

6 Fitur JavaScript ES12

CategoriesArtikel / tutorial website

Yudith Hentreisa

May 15, 2022

0 0

Share this post

6 Fitur JavaScript ES12 -Kembali pada tahun 2015, ES6 yang revolusioner diperkenalkan dengan berbagai fitur yang umum digunakan dalam pengembangan web modern.

6 Fitur JavaScript ES12

Sejak itu, ECMAScript telah berkembang secara signifikan hingga ES12, yang secara resmi dikenal sebagai ECMAScript 2021. ES12 tiba pada Juni 2021 dengan kemampuan baru, peningkatan, dan beberapa perubahan sintaks.

Setiap pengembang JavaScript yang ingin melakukan yang terbaik harus mempelajari fitur terbaru ES12. Di blog ini, kita akan melihat 6 Fitur JavaScript ES12 teratas dengan contoh.

1. Promise.any()

Promise.any() mengambil objek Promise yang dapat diubah dan diselesaikan jika salah satu dari janji tersebut diselesaikan. Ini berguna ketika kita hanya membutuhkan satu janji untuk dipenuhi terlepas dari apa yang terjadi pada orang lain.

Promise.all() adalah metode serupa yang sudah ada di ES, tetapi diselesaikan hanya jika semua janji diselesaikan. Demikian pula, Promise.race() digunakan untuk mengembalikan janji pertama untuk menyelesaikan apakah itu diselesaikan atau ditolak.

const err = new Promise((resolve, reject) => {
  reject(new Error('Error'));
});
const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
   resolve('First Promise');
  }, 200);
});
const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
   resolve('Second Promise');
  }, 500);
});
Promise.any(\\\[err, p1, p2\\\]).then((res) => {
  console.log(res);
})
// output: First Promise

Kelas AggregateError baru membantu kita menangkap pengecualian dari metode Promise.any(). Misalnya, Jika semua janji yang diteruskan ke Promise.any() ditolak, objek AggregateError akan dilempar.

const e1 = new Promise((resolve, reject) => {
  reject(new Error('Error 1'));
});
const e2 = new Promise((resolve, reject) => {
  reject(new Error('Error 2'));
});
Promise.any(\\\[e1, e2\\\])
.then((res) => {
  console.log(res);
})
.catch((err) => {
  console.log(err);
});
// output: "AggregateError: All promises were rejected"

Penggunaan Promise.any() dalam pengembangan cukup mudah. Misalnya, kami dapat mengirim beberapa panggilan API yang identik ke server atau database dan mengembalikan data apa pun yang lebih dulu.

2. WeakRef

Seperti namanya, WeakRef adalah referensi yang lemah ke objek lain. Objek yang direferensikan secara lemah tidak akan disimpan dalam memori selama objek tersebut tidak direferensikan dengan kuat.

JavaScript menggunakan algoritme pengumpulan sampahnya untuk menghapus objek dalam memori yang tidak lagi dirujuk oleh objek lain. Jadi, ketika kita membuat objek WeakRef, itu bisa menjadi sampah yang dikumpulkan kapan saja.

const student = {
    name: 'John Doe',
    age: 20,
    address: {
      number: 365,
      street: 'Flower street'
    }
  }
const ref = new WeakRef(student);
ref.deref().age;
//output: 20

Kita dapat menggunakan metode deref() untuk mengakses referensi yang lemah jika masih tersedia di memori.

Meskipun WeakRef berguna untuk menghemat beberapa memori, penulis WeakRef menyarankan untuk menghindarinya setiap saat jika memungkinkan, alasannya adalah perilaku rumit dari pengumpul sampah di mesin JavaScript yang berbeda.

3. Private class methods

Sejak pengenalan kelas untuk JavaScript di ES6, metode dan properti telah menjadi publik secara default. Meskipun pengembang menggunakan awalan garis bawah (_) saat mendeklarasikan metode dan properti pribadi, itu hanyalah sebuah konvensi.

Itu tidak menghentikan siapa pun untuk mengakses properti pribadi dari luar kelas. Tetapi dengan ES12, JavaScript telah mengaktifkan pembuatan metode dan properti pribadi secara asli. Untuk membuatnya, kita harus mengawali pengenal dengan hash (#).

class Auth {
  #getToken() {
   return "12345678";
  }
  isAuth() {
   return this.#getToken();
  }
}
const auth = new Auth();
auth.getToken(); //output: auth.getToken is not a function
auth.isAuth(); //output: 12345678

Mirip dengan metode dan properti pribadi, kita dapat mendefinisikan pengakses pribadi (pengambil dan penyetel) menggunakan sintaks yang sama.

class Auth {
   get #getToken() {
    return localStorage.getItem('token');
   }
   set #setToken(token) {
    localStorage.setItem('token', token);
   }
   set login(token) {
    this.#setToken = token;
   }
   get isAuth() {
    return this.#getToken;
   }
}
let token = '12345678';
const auth = new Auth();
auth.login = token;
auth.isAuth; //output: 12345678

4. Logical assignment operators

JavaScript sudah mendukung operator penugasan aritmatika dan bitwise. Dari ES12 dan seterusnya, ia telah memperluas dukungan ke operator penugasan logis.

Ada tiga operator penugasan logis baru:

  • Logical Nullish Assignment (??=)
  • Logical AND Assignment (&&=)
  • Logical OR Assignment (||=)

Meskipun sintaks terlihat mirip dengan operator penugasan aritmatika (+=), operator penugasan logis tidak akan selalu melakukan penugasan. Sebaliknya, penugasan hanya akan terjadi jika kondisi yang ditentukan oleh operator logika terpenuhi.

4.1 Logical nullish assignment

Operator penugasan nullish logis (??=) akan menetapkan nilai operan kanan ke operan kiri hanya jika operan kiri nol atau tidak terdefinisi (nullish).

Sepintas, operator ??= mungkin terlihat sedikit membingungkan karena bentuk perluasan dari operator ini setara dengan x ?? (x = y).

const person = { name: 'John' };
person.name ??= 'User 1';
console.log(person.name);
// output: John
person.age ??= 18;
console.log(person.age);
// output: 18

Jika kita menggunakan versi ES yang lebih lama, kode di atas akan terlihat seperti ini:

const person = { name: 'John' };
if(person.name === undefined || person.name === null) {
    person.name = 'User 1';
}
console.log(person.name);
if(person.age === undefined || person.age === null) {
    person.age = 18;
}
console.log(person.age);

4.2 Logical AND assignment

Operator logika AND penugasan (&&=) akan melakukan penugasan jika operan kiri benar. Karena kita baru saja membahas penugasan nullish, penggunaan operator logika AND penugasan sudah cukup jelas.

const product = { stocks: 10 };
product.stocks &&= 20;
console.log(product.stocks);
// output: 20
product.exp &&= '12/31/2021';
console.log(product.exp);
// output: undefined

4.3 Logical OR assignment

Operator penugasan logika OR (||=) mirip dengan penugasan nullish, tetapi operan kiri harus salah agar penugasan terjadi. Suatu nilai dianggap salah jika itu nol, tidak terdefinisi, salah, 0, atau NaN.

const product = {
  stocks: 0,
  exp: '12/31/2021'
};
product.stocks ||= 10;
console.log(product.stocks);
// output: 10
product.exp ||= '01/31/2022';
console.log(product.exp);
// output: 12/31/2021

5. String.replaceAll()

Tujuan dari metode replaceAll() adalah untuk mengganti semua substring di dalam string. Di versi ES sebelumnya, jika kita ingin melakukan ini, kita harus menggunakan metode replace().

Dalam metode replace() , hanya kemunculan pertama yang akan diganti jika Anda menggunakan string sebagai argumen pertama. Oleh karena itu, kami akan menetapkan argumen pertama sebagai ekspresi reguler untuk menggantikan semua kemunculan.

let str = 'hotdog dog'.replace(new RegExp('dog','g'), 'cat');
console.log(str) //output: hotcat cat

Dengan ES12, kita bisa langsung menggunakan metode replaceAll() tanpa menggunakan ekspresi reguler. Cara ini sangat sederhana dan aman.

let str = 'hotdog dog'.replaceAll('dog', 'cat');
console.log(str) //output: hotcat cat

6. Numeric separators

This is a simple yet useful feature that was already available in browsers thanks to the V8 engine, but now it comes integrated with ES12. Numeric separators are underscores (_) that help us to separate large numbers.

let billion = 1_000_000_000;
console.log(billion); //output: 1000000000

Browser akan mengabaikan garis bawah. Pemisah numerik membuat hidup pengembang lebih mudah saat bekerja dengan jumlah besar.

Kesimpulan

ECMAScript terus berkembang dengan pengenalan fitur baru yang keren setiap tahun. ES edisi ke-12 telah menyederhanakan fungsionalitas pengkodean penting dengan fitur-fiturnya yang disempurnakan.

Dalam artikel ini, kami menjelajahi 6 fitur teratas ES12 yang harus Anda pelajari sebagai pengembang JavaScript. Saya harap Anda memanfaatkan fitur ini untuk proyek pengembangan Anda.

Terima kasih telah membaca artikel 6 Fitur JavaScript ES12 !

Syncfusion Essential JS 2 adalah satu-satunya suite yang Anda perlukan untuk membangun aplikasi. Ini berisi lebih dari 65 komponen UI berkinerja tinggi, ringan, modular, dan responsif dalam satu paket. Unduh uji coba gratis untuk mengevaluasi kontrol hari ini.

Jika Anda memiliki pertanyaan atau komentar, Anda dapat menghubungi kami melalui forum dukungan, portal dukungan, atau portal umpan balik kami. Kami selalu senang membantu Anda!

Tags: belajar javascript, fitur javascript, js ES12, tutorial javascript

Related Post

JUNE 5, 2022

Cara Memasarkan Bisnis Kecil

Cara Memasarkan Bisnis Kecil – Dengan begitu banyak pilihan pemasaran, dari mana...

00

JUNE 3, 2022

4 Ekstensi Google Chrome yang...

4 Ekstensi Google Chrome yang Meningkatkan Pekerjaan Coding Saya – Jika Anda...

00

MAY 28, 2022

Konsep Javascript Yang Semua...

Konsep Javascript Yang Semua Programmer Harus Ketahui! – Ketahui konsep JavaScript...

00

MAY 25, 2022

6 Tips Mengembangkan Logika...

6 Tips Mengembangkan Logika dalam Coding – Kiat akhir pekan ini adalah tentang cara...

00

MAY 21, 2022

Code Editor Untuk Javascript

Code Editor Untuk Javascript – Editor kode adalah tempat di mana programmer...

00

MAY 21, 2022

Tailwind CSS Alternatif...

Tailwind CSS Alternatif Pengganti Bootstrap – Baru-baru ini, tim pengembang kami...

00

Recent Posts

  • Jasa Input data ke google spreadsheet dari web php codeigniter atau laravel

    July 13, 2022
  • Cara Memasarkan Bisnis Kecil

    June 5, 2022
  • 4 Ekstensi Google Chrome yang Meningkatkan Pekerjaan Coding Saya

    June 3, 2022
  • Konsep Javascript Yang Semua Programmer Harus Ketahui!

    May 28, 2022
  • 6 Tips Mengembangkan Logika dalam Coding

    May 25, 2022
Sundakreatif.com merupakan Jasa pembuatan website yang sudah dimulai sejak tahun 2009 (Sebelumnya bernama hentreiza-web.com). Sudah berpengalaman membuat lebih dari 400+ website.Berkreasi untuk mewujudkan keinginan Anda dalam membangun website sesuai dengan kebutuhan Anda.

LIVE CHAT (Klik Gambar)


Hubungi Kami

Sundakreatif.com

Lokasi : Bandung / Cimahi
SMS/WA : +6287823179122
LINE : Hentreiza
EMAIL : HENTREIZA @ GMAIL.COM
Comodo SSL

© 2016 Jasa Pembuatan Website, All Rights Reserved.