Ada banyak browser di luar sana yang hadir dengan bahasa skrip berbeda. Salah satunya adalah JScript oleh Microsoft. Sebagai pengembang web, kita perlu memastikan bahwa skrip yang kita kembangkan dapat berjalan di browser tersebut. EcmaScript (biasa disingkat ES) dibuat untuk menjadikan standar bahasa bagi banyak bahasa skrip berbeda di luar sana, sehingga halaman web yang ditulis dalam ES dapat berjalan dengan baik di berbagai jenis browser yang ada.

ES adalah standar spesifikasi penulisan kode atau bahasa di Ecma-262 yang dibuat oleh Ecma International. Ecma International adalah organisasi yang mengembangkan standar sistem dan teknologi informasi dan komunikasi, sedangkan Ecma-262 dibuat khusus untuk bahasa skrip. ES terus diperbarui (hampir) setiap tahun. Versi EcmaScript pertama, ES1, dirilis pada tahun 1997 dan terus berkembang menjadi ES6 pada tahun 2015. Setelah ES6, penamaan versi ES diubah berdasarkan tahun peluncurannya. Jangan bingung jika Anda membaca 'ES6 atau ES2015' di internet karena mengacu pada versi ES yang sama. Saat ini, versi terbarunya adalah ES2021.

Setiap versi ES menghadirkan fitur kode baru dan juga peningkatan fitur yang sudah ada sebelumnya. Ini dapat membantu pengembang untuk menulis kode dengan lebih mudah dan efisien. Pada artikel ini, saya akan mencoba merangkum beberapa fitur bermanfaat yang dapat kita peroleh dari ES6 hingga ES2021. Semua fitur tersebut akan memungkinkan Anda bekerja lebih efektif. Terus gulirkan ibu jari Anda ke bawah untuk mengetahui lebih banyak tentang mereka!

A.EcmaScript 6

ES6 sejauh ini merupakan peningkatan terbesar pada JS sejak tahun 1996. Diperkenalkan pada tahun 2015. Ada banyak fitur dalam versi ini, seperti destrukturisasi, operator spread, parameter istirahat, parameter default, literal templat, fungsi panah, dan for…of loop .

1. … Operator

Kita dapat menggunakan operator … dengan dua cara:

a. Operator Penyebaran

Operator spread dapat digunakan untuk menyalin array atau objek baik dengan menggabungkannya atau mendestrukturkannya. Contoh di bawah ini menunjukkan cara menggabungkan dua array menggunakan operator spread.

const groupOne = ['Niragi', 'Chisiya', 'Arisu']
const groupTwo = ['Ann', 'Usagi', 'Kuina']

const combineGroup = [...groupOne, ...groupTwo]

Pada contoh di atas, kita dapat melihat array yang berisi beberapa nilai seperti 'Niragi', 'Chisiya', dan 'Arisu' dan satu lagi berisi nilai 'Ann', 'Usagi', dan 'Kuina'. Kami akan menggabungkan nilai di kedua array menjadi satu dengan menggunakan operator spread. Outputnya akan seperti ini:

Niragi, Chisiya, Arisu, Ann, Usagi, Kuina

Pada proses penyalinan array atau objek menggunakan operator spread, terdapat dua proses yang terjadi di latar belakang berdasarkan kondisi berikut:

1. Salinan dalam seluruh objek/array untuk objek/array yang tidak memiliki item bersarang.

2. Jika objek/array memiliki item yang disarangkan, objek/array tersebut akan menyalin item yang terluar terlebih dahulu, lalu "salinan dangkal"item yang disarangkan.

Kita juga dapat menggunakan operator spread untuk melakukan pengrusakan array. Pada contoh di bawah, kita memiliki array angka. Kami ingin menyalinnya dan mengubah struktur data '1' dan '2'… tapi biarkan sisanya. Kita bisa menggunakan nomor spread dan hasilnya akan seperti ini:

const numbers = [1, 2, 3, 4, 5, 6]
const [one, two, ...rest] = numbers

// output:
// one : 1
// two : 2
// rest : 3,4,5,6

b. Parameter Istirahat Fungsi

Terkadang, membuat fungsi yang berbeda lalu menentukan setiap parameter secara manual dengan mengetikkannya satu per satu terasa sangat membosankan. Pernahkah Anda bertanya-tanya apakah Anda dapat bekerja lebih efektif dengan menggunakan fungsi parameter istirahat, yang merupakan fitur di ES6 dan yang lebih baru untuk membuat fungsi dengan jumlah parameter dinamis? Sintaks parameter istirahat memungkinkan suatu fungsi menerima argumen dalam jumlah tidak terbatas sebagai array dan menyediakan cara untuk merepresentasikan fungsi variadik di JS. Artinya Anda tidak perlu menulis ulang kode secara manual berulang kali.

Berikut adalah contoh seberapa efektif penggunaan parameter rest. Sebelum ES6, Anda perlu menulis beberapa fungsi untuk melakukan tugas yang sama seperti di bawah ini:

function firstFunc(param) {
    // do some task...
}
function secondFunc(param1, param2) {
    // do some task...
}
function thirdFunc(param1, param2, param3) {
    // do some task...
}

Ini membuang-buang waktu, terutama ketika Anda memiliki parameter dalam jumlah besar atau tidak terbatas, bukan? Dengan menggunakan ES6, Anda dapat menggunakan… operator untuk menyederhanakan pekerjaan Anda dengan mengkompilasi sejumlah besar parameter dalam suatu fungsi. Cukup tulis parameternya seperti ini:

function myDynamicFunction(...params) {
    console.log(params.length)
}

myDynamicFunction(100, 23, 97, 'Clinton', 0.5, 'Thomas')
// output: 6

2. Perulangan for-of

Perulangan For-of memungkinkan kita untuk melakukan iterasi pada struktur data yang dapat diubah seperti Array, String, Maps, NodeLists, dll.

Asumsikan kita memiliki struktur data yang dapat diubah (dalam bentuk array):

const names = ['Alexander', 'Trent', 'Arnold']

Mari kita ambil contoh, kita ingin mengubah array itu menjadi string. Tanpa menggunakan For-of Loop, kita akan menulis kodenya menggunakan For Loop biasa seperti ini:

let fullName = ''
for(let i = 0; i < names.length; i++) {
    fullName += names[i] + ' '
}

console.log(fullName)
// output : Alexander Trent Arnold

Dengan menggunakan For-of Loop akan lebih sederhana dan mudah dibaca:

let fullName = ''
for(let name of names) {
    fullName += name + ' '
}

console.log(fullName)
// output : Alexander Trent Arnold

3. termasuk() Metode

Metode includes() adalah metode baru di ES6 untuk mengetahui apakah suatu string berisi atau menyertakan nilai tertentu. Jika nilainya ditemukan, keluarannya akan benar, sedangkan jika tidak ditemukan, keluarannya adalah salah.

const sentence = "Some of popular Javascript frameworks are React, Vue, Angular, and Svelte"
console.log(sentence.includes('React'))

// output: true

Tidak hanya untuk string, metode includes() juga dapat digunakan pada array seperti ini:

const frameworks = ['React', 'Vue', 'Svelte', 'Angular']
console.log(frameworks.includes('React'))

// output: true

Catatan:

Metode includes() `peka huruf besar-kecil'. Jadi jika kita menulis 'react' dan bukan 'React' di kodenya, hasilnya akan menjadi false.

4. Metode pencarian array()

Metode array find() adalah metode baru lainnya di ES6. Kita dapat menggunakannya untuk menemukan item pertama dalam array yang cocok dengan kondisi tertentu. Metode ini hanya menerima fungsi sebagai parameter. Pada contoh di bawah ini, kita ingin mencari beberapa item dalam array yang nilainya lebih besar dari 30. Ada dua nilai yang ditemukan, yaitu 37 dan 98. Namun kita hanya mengambil item pertama saja.

const numbers = [10, 25, 37, 4, 98]
let first = numbers.find((value, index) => {
    return value > 30
})

console.log(first);
// output : 37

5. Metode array findIndex()

Berbeda dengan metode find(), metode findIndex() hanya akan mengembalikan nomor indeks item dalam array, bukan nilainya. Lihatlah contoh kode di bawah ini. Kami memiliki parameter untuk nilai kurang dari ‹10. Hanya satu nilai yang ditemukan, yaitu '4'. Outputnya akan menampilkan nomor indeks.

const numbers = [10, 25, 37, 4, 98]
let getIndex = numbers.findIndex((value, index) => {
    return value < 10
})

console.log(getIndex);
// output : 3

Ingatlah bahwa bahasa pemrograman menghitung semuanya mulai dari 0, sehingga menghasilkan 3 pada contoh di atas.

B.EcmaScript 2017

6. Objek.entri()

Fitur Object.entries() hanya akan membuat salinan objek iterable (objek non-nested) dan mengubahnya menjadi array JS dua dimensi. Setiap sub-array dari array JS dua dimensi berisi kunci dan pasangan nilai objek. Ini adalah contoh objek iterable yang ingin kita ubah menjadi array JS dua dimensi. Dalam hal ini, kami ingin menyalin kunci “nama” dan pasangan nilai “Lionel Messi” ke dalam array baru menggunakan metode Object.entries().

const player = {
  name: 'Lionel Messi',
  nationality: 'Argentina',
  club: 'Paris Saint Germain',
  backNumber: 30
}

let playerArr = Object.entries(player)

Outputnya akan seperti ini:

[
    [
        "name",
        "Lionel Messi"
    ],
    [
        "nationality",
        "Argentina"
    ],
    [
        "club",
        "Paris Saint Germain"
    ],
    [
        "backNumber",
        30
    ]
]

C.EcmaScript 2019

7. Objek.dariEntries()

Jika Object.entries() mengubah Object menjadi array dua dimensi, Object.fromEntries() akan melakukan sebaliknya. Ini mengubah array dua dimensi menjadi objek. Lihatlah kode di bawah ini. Ini adalah contoh array dua dimensi yang ingin kita ubah menjadi objek dengan meletakkan Object.fromEntries().

const cars = [
  ["ferrari", 5600],
  ["audi", 7200],
  ["bugatti", 9800]
]

let carsObj = Object.fromEntries(cars)

Output dari carsObj adalah:

{ferrari: 5600, audi: 7200, bugatti: 9800}

Mudah sekali, bukan? Mulai sekarang, kita tidak perlu membuat fungsi secara manual hanya untuk mengubah array menjadi objek.

​Tips profesional:Anda dapat menggunakan fitur ini untuk mencetak isi formData.

8. Susunan datar()

Saya dapat mengatakan bahwa metode flat() akan mengubah array dua dimensi menjadi array satu dimensi. Prosesnya seperti ‘meratakan’ susunannya. Oleh karena itu metode ini dinamakan metode flat(). Pada dasarnya, ini dapat digunakan untuk menggabungkan beberapa kelompok data menjadi satu kelompok yang lebih besar. Pada contoh di bawah, kita memiliki tiga kelompok data. Kami menggunakan metode flat() untuk menggabungkan data dalam array.

const myArr = [[1,2],[3,4],[5,6]];
const newArr = myArr.flat();
// output : [1, 2, 3, 4, 5, 6]

D.EcmaScript 2020

9. Operator Penggabungan Nullish (??)

Pernahkah Anda mencoba (atau setidaknya mendengar) tentang Javascript Ternary Operator? Jika belum, bacalah artikel di sini sebelum melanjutkan membaca.

Dengan membaca artikel tersebut, sekarang Anda sudah mengetahui bahwa penggunaan operator ternary telah menghemat waktu Anda dan mengurangi beberapa baris kode. Tapi, bagaimana jika kita memenuhi syarat ini?

let someVar = obj['a_long_object_key_name'] ? obj['a_long_object_key_name'] : 'Default Value'

Meskipun kita sudah menggunakan operator ternary, namun penulisan kode disini kurang efisien dan kurang terbaca. Kita bisa menggunakan operator ?? untuk mempermudahnya. Secara teoritis, ini seperti operator ternary tetapi akan langsung mengembalikan argumen pertama jika tidak null (suatu kondisi ketika variabel memiliki nilai tidak terdefinisi atau nol). Saya akan memberi Anda sebuah contoh untuk melihat bagaimana Anda akan menggunakannya.

let someVar = obj['a_long_object_key_name'] ?? 'Default Value'

Di sini dengan menggunakan operator penggabungan nullish, kita menghindari penulisan kunci objek “panjang” yang sama dua kali. Secara teknis, ini akan melakukan hal yang sama seperti contoh sebelumnya tetapi dengan cara yang lebih mudah dibaca. Itu keren, bukan?

10. Operator Rangkaian Opsional (?.)

Terkadang kita menemui masalah ketika variabel dinamis mengembalikan nilai null. Akibatnya, variabel tersebut terdeteksi sebagai kesalahan dan program berhenti berjalan. Operator rangkaian opsional (?.) mengembalikan kesalahan sebagai tidak terdefinisi. Pada contoh di bawah ini, kita akan mendapatkan kolom masukan, tetapi asumsikan elemen masukan tersebut tidak ada.

// assume the input element doesn't exist, so it will be undefined
const inputNotes = $('#imaginary_input');
const inputLength = inputNotes.val().length

Di sini kita menggunakan metode chaining untuk mendapatkan nilai dari variabel 'inputNotes' terlebih dahulu. Setelah itu kita hitung panjang nilai masukannya. Namun dalam proses pengambilan datanya, kita tidak dapat menemukan inputnya atau inputnya tidak ada. Akibatnya terjadi error karena kita tidak bisa mendapatkan nilai dari elemen input yang tidak ada dan eksekusi kode terhenti. Di sini, kita dapat menggunakan operator ?. setelah nama variabel (atau kunci objek) untuk memeriksa apakah nilainya null atau tidak.

Dengan menggunakan operator rangkaian opsional, operator rangkaian metode tidak akan melanjutkan saat variabel bernilai null. Alih-alih menimbulkan kesalahan, ia akan langsung menetapkannya ke 'tidak terdefinisi' ke variabel inputLength dan eksekusi kode akan terus berjalan (tidak berhenti). Lihatlah gambar di bawah ini untuk tampilan yang lebih jelas:

E.EcmaScript 2021

11. String gantiSemua()

Sebelumnya Javascript sudah memiliki fungsi replace(). Sayangnya, ini tidak dapat digunakan untuk beberapa nilai yang sama. Ini hanya menggantikan nilai pertama yang cocok, jadi kita perlu menggunakannya berulang kali untuk mengganti beberapa kata yang sama (satu per satu).

Lihatlah contoh di bawah ini:

Kabar baiknya adalah ES2021 memberi Anda solusi dengan menambahkan fitur replaceAll(). Dengan menggunakan fungsi ini, kita dapat mengganti setiap nilai yang cocok sekaligus.

Mengganti barang kini lebih cepat dan mudah, bukan?

12. Pemisah Numerik

Fitur terakhir yang kita bahas pada artikel kali ini adalah Numeric Separators. Fitur ini akan memberikan keuntungan bagi manusia untuk membaca angka yang panjang dan besar dalam kode Anda. Sebelumnya kita harus menulis bilangan panjang tanpa pemisahan seperti ini:

const reallyBigNumber = 10000000000

Tanpa koma atau titik, pengembang akan kesulitan membaca nilainya. Di ES2021 terdapat fitur dimana kita bisa menggunakan tanda garis bawah (_) untuk memisahkan angka. Kita bisa menempatkannya di dalam sehingga lebih mudah dibaca manusia.

Contoh:

const reallyBigNumber = 10_000_000_000

Javascript memperlakukan garis bawah ini sebagai angka biasa saat Anda menggunakannya atau mencetaknya.

Kesimpulan

Setiap peningkatan versi EcmaScript selalu menghadirkan fitur-fitur baru yang keren dan bermanfaat untuk membuat pengembang bekerja dengan kode dan memproses data lebih mudah dan efisien. Penting untuk diingat bahwa kita harus terus menyegarkan pengetahuan dan informasi kita terhadap apa yang terjadi di luar sana. Teruslah belajar, terus berlatih, dan jadilah pengembang yang lebih baik setiap hari.