Javascript

JavaScript Versi ES6: Apa itu ? Contoh dan Codenya

Apa itu ECMAScript 6?

ECMAScript 6 juga dikenal sebagai ES6 dan ECMAScript 2015.

Beberapa orang menyebutnya JavaScript 6.

Bab ini akan memperkenalkan beberapa fitur baru di ES6.

  • JavaScript let
  • JavaScript const
  • JavaScript fungsi panah
  • JavaScript Kelas
  • Nilai Default parameter
  • Array.find()
  • Array.findIndex()
  • Eksponensial (**) (EcmaScript 2016)

Browser Support ES6 (ECMAScript 2015)

Safari 10 dan Edge 14 adalah browser pertama yang sepenuhnya mendukung ES6:

ChromeEdgeFirefoxSafariOpera
Chrome 58Edge 14Firefox 54Safari 10Opera 55
Jan 2017Aug 2016Mar 2017Jul 2016Aug 2018

JavaScript let

Pernyataan let memungkinkan untuk mendeklarasikan variabel dengan cakupan blok.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>Mendeklarasikan Variabel Menggunakan let</h2>
<p id="demo"></p>

<script>
var  x = 10;
// Here x is 10
{  
  let x = 2;
  // Here x is 2
}
// Here x is 10
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

JavaScript const

Pernyataan const memungkinkan untuk mendeklarasikan konstanta (variabel JavaScript dengan nilai konstan).

Konstanta mirip dengan variabel let, kecuali nilainya tidak dapat diubah.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>Mendeklarasikan Variabel Menggunakan const</h2>
<p id="demo"></p>

<script>
var  x = 10;
// Here x is 10
{  
  const x = 2;
  // Here x is 2
}
// Here x is 10
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Fungsi Panah

Fungsi panah memungkinkan sintaks lebih pendek untuk menulis ekspresi fungsi.

Kita tidak memerlukan kata kunci function, kata kunci return, dan tanda kurung kurawal.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Fungsi Panah</h2>

<p>Kita tidak memerlukan kata kunci function, kata kunci return, dan tanda kurung kurawal.</p>

<p>Fungsi panah tidak didukung di IE11 atau versi sebelumnya.</p>
<p id="demo"></p>

<script>
const x = (x, y) => x * y;
document.getElementById("demo").innerHTML = x(5, 5);
</script>

</body>
</html>

Fungsi panah tidak memiliki this. Mereka tidak cocok untuk mendefinisikan metode objek.

Fungsi panah tidak diangkat (hoisting). Mereka harus ditentukan sebelum digunakan.

Menggunakan const lebih aman daripada menggunakan var, karena ekspresi fungsi selalu berupa nilai konstan.

Anda hanya dapat menghilangkan kata kunci return dan tanda kurung kurawal jika fungsinya berupa pernyataan tunggal.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2> Fungsi Panah JavaScript </h2>

<p> Fungsi panah tidak didukung di IE11 atau versi sebelumnya. </p>
<p id="demo"></p>

<script>
const x = (x, y) => { return x * y };
document.getElementById("demo").innerHTML = x(5, 5);
</script>

</body>
</html>

Kelas

ES6 memperkenalkan kelas.

Kelas adalah jenis fungsi, tetapi alih-alih menggunakan kata kunci function untuk memulainya, justru menggunakan kata kunci class, dan properti ditetapkan di dalam metode constructor().

Gunakan kata kunci class untuk membuat kelas, dan selalu tambahkan metode constructor.

Metode constructor dipanggil setiap kali objek kelas diinisialisasi.

Contoh:
Definisi kelas sederhana untuk kelas bernama “Car”

class Car {
  constructor(brand) {
    this.carname = brand;
  }
}

Sekarang Anda dapat membuat objek menggunakan kelas Car:

Contoh
Buat objek bernama “myCar” berdasarkan kelas Car:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Class</h2>

<p> Dalam contoh ini kami mendemonstrasikan definisi kelas sederhana dan cara menggunakannya. </p>
<p id="demo"></p>

<script>
class Car {
  constructor(brand) {
    this.carname = brand;
  }
}

let myCar = new Car("Ford");

document.getElementById("demo").innerHTML = myCar.carname;
</script>

</body>
</html>

Nilai Parameter Default

ES6 memungkinkan parameter fungsi memiliki nilai default.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>Nilai Parameter Default</h2>

<p id="demo"></p>

<script>
function myFunction(x, y = 10) {
  // y is 10 if not passed or undefined
  return x + y;
}
document.getElementById("demo").innerHTML = myFunction(5);
</script>

</body>
</html>

Array.find()

Metode find() mengembalikan nilai elemen array pertama yang lolos fungsi pengujian.

Contoh ini menemukan (mengembalikan nilai) elemen pertama yang lebih besar dari 18:

Contoh

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.find()</h2>

<p id="demo"></p>

<script>
var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);

document.getElementById("demo").innerHTML = "Angka pertama di atas 18 adalah " + first;

function myFunction(value, index, array) {
  return value > 18;
}
</script>

</body>
</html>

Perhatikan bahwa fungsi tersebut membutuhkan 3 argumen:

  • Nilai item
  • Indeks item
  • Array itu sendiri

Array.findIndex ()

Metode findIndex() mengembalikan indeks elemen array pertama yang lolos fungsi pengujian.

Contoh ini menemukan indeks elemen pertama yang lebih besar dari 18:

Contoh

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.findIndex()</h2>

<p id="demo"></p>

<script>
var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction);

document.getElementById("demo").innerHTML = "Angka pertama di atas 18 memiliki indeks " + first;

function myFunction(value, index, array) {
  return value > 18;
}
</script>

</body>
</html>

Perhatikan bahwa fungsi tersebut membutuhkan 3 argumen:

  • Nilai item
  • Indeks item
  • Array itu sendiri

Properti Angka Baru

ES6 menambahkan properti berikut ke objek Number:

  • EPSILON
  • MIN_SAFE_INTEGER
  • MAX_SAFE_INTEGER

Contoh

<!DOCTYPE html>
<html>
<body>

<h2>Number Object Properti</h2>

<p>EPSILON</p>

<p id="demo"></p>

<script>
var  x = Number.EPSILON;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<h2>Number Object Properti</h2>

<p>MIN_SAFE_INTEGER</p>

<p id="demo"></p>

<script>
var  x = Number.MIN_SAFE_INTEGER;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<h2>Number Object Properti</h2>

<p>MAX_SAFE_INTEGER</p>

<p id="demo"></p>

<script>
var  x = Number.MAX_SAFE_INTEGER;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Metode Angka Baru

ES6 menambahkan 2 metode baru ke objek Number:\

  • Number.isInteger()
  • Number.isSafeInteger()

Metode Number.isInteger()

Metode Number.isInteger() mengembalikan nilai true jika argumennya adalah integer.

Contoh

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Number Methods</h2>

<p> Metode isInteger() mengembalikan nilai true jika argumennya adalah integer. </p>
<p> Jika tidak, hasilnya adalah false. </p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
Number.isInteger(10) + "<br>" + Number.isInteger(10.5);
</script>

</body>
</html>

Metode Number.isSafeInteger()

Number.isSafeInteger() adalah bilangan bulat yang dapat direpresentasikan dengan tepat sebagai angka presisi ganda.

Metode Number.isSafeInteger () mengembalikan nilai true jika argumennya adalah integer yang aman.

Contoh

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Number Methods</h2>

<p> Metode isSafeInteger() mengembalikan nilai true jika argumennya adalah integer yang aman. </p>
<p> Jika tidak, hasilnya adalah false. </p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
Number.isSafeInteger(10) + "<br>" + Number.isSafeInteger(12345678901234567890);
</script>

</body>
</html>

Semua bilangan bulat aman adalah semua bilangan bulat dari – (253 – 1) hingga + (253 – 1).
Ini aman: 9007199254740991. Ini tidak aman: 9007199254740992.

Metode Global Baru

ES6 juga menambahkan 2 metode nomor global baru:

  • isFinite()
  • isNaN()

Metode isFinite ()

Metode global isFinite () mengembalikan false jika argumennya adalah Infinity atau NaN.

Jika tidak, itu mengembalikan true:

Contoh

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Number Methods</h2>

<p> Metode isFinite () menampilkan false jika argumennya adalah Infinity atau NaN. </p>
<p> Jika tidak, hasilnya akan benar. </p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
isFinite(10 / 0) + "<br>" + isFinite(10 / 1);
</script>

</body>
</html>

Metode isNaN ()

Metode isNaN () global mengembalikan nilai true jika argumennya adalah NaN. Jika tidak, itu mengembalikan salah:

Contoh

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Number Methods</h2>

<p> Metode isNan () mengembalikan nilai true jika argumennya adalah NaN. Jika tidak, hasilnya adalah false. </p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
isNaN("Hello") + "<br>" + isNaN("10");
</script>

</body>
</html>

Operator Eksponensial

Operator eksponen (**) menaikkan operan pertama ke pangkat operan kedua.

Contoh

<!DOCTYPE html>
<html>
<body>

<h2>Operator **</h2>

<p id="demo"></p>

<script>
var x = 5;
document.getElementById("demo").innerHTML = x ** 2;
</script>

</body>
</html>

x ** y menghasilkan hasil yang sama dengan Math.pow (x, y):

<!DOCTYPE html>
<html>
<body>

<h2>Math.pow()</h2>

<p id="demo"></p>

<script>
var x = 5;
document.getElementById("demo").innerHTML = Math.pow(x,2);
</script>

</body>
</html>

Catur Kurnia Sari

Share
Tags: javascript