Home » Javascript » JavaScript versi ES5 : Fitur dan Cara Menggunakannya

JavaScript versi ES5 : Fitur dan Cara Menggunakannya

by Catur Kurnia Sari
by Catur Kurnia Sari

Apa itu ECMAScript 5?

ECMAScript 5 juga dikenal sebagai ES5 dan ECMAScript 2009

Bab ini memperkenalkan beberapa fitur terpenting ES5.

Fitur ECMAScript 5

Berikut ini adalah fitur baru yang dirilis pada tahun 2009:

  • “use strict”
  • String.trim()
  • Array.isArray()
  • Array.forEach()
  • Array.map()
  • Array.filter()
  • Array.reduce()
  • Array.reduceRight()
  • Array.every()
  • Array.some()
  • Array.indexOf()
  • Array.lastIndexOf()
  • JSON.parse()
  • JSON.stringify()
  • Date.now()
  • Properti Getter dan Setter
  • Metode Properti Objek Baru

Perubahan Sintaks ECMAScript 5

  • Akses properti [ ] pada string
  • Koma dalam literal array dan objek
  • String litral multiline
  • Kata yang dipesan sebagai nama properti

Arahan “use strict”

“use strict” mendefinisikan bahwa kode JavaScript harus dijalankan dalam “mode strict”.

Dengan mode strict, , kita tidak dapat menggunakan variabel yang tidak dideklarasikan.

Kita dapat menggunakan mode strict di semua program. Hal ini membantu menulis kode yang lebih bersih, seperti mencegah menggunakan variabel yang tidak dideklarasikan.

“use strict” hanyalah ekspresi string. Browser lama tidak akan membuat kesalahan jika mereka tidak memahaminya.

String.trim()

String.trim() menghapus spasi dari kedua sisi string.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String.trim()</h2>

<p>Klik tombol untuk memperingatkan string dengan spasi kosong.</p>
<button onclick="myFunction()">Coba</button>

<p><strong>Catatan:</strong> Metode trim() tidak didukung di Internet Explorer 8 dan versi sebelumnya.</p>
<script>
function myFunction() {
  var str = "     Hello World!     ";
  alert(str.trim());
}
</script>

</body>
</html>

Array.isArray()

Metode isArray() memeriksa apakah suatu objek adalah array.

Contoh:

<!DOCTYPE html>
<html>
<body>

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

<p>Klik tombol untuk memeriksa apakah "fruits" adalah array.</p>
<button onclick="myFunction()">Coba</button>

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

<script>
function myFunction() {
  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  var x = document.getElementById("demo");
  x.innerHTML = Array.isArray(fruits);
}
</script>

</body>
</html>

Array.forEach()

Metode forEach() memanggil fungsi satu kali untuk setiap elemen array.

Contoh:

<!DOCTYPE html>
<html>
<body>

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

<p>Memanggil fungsi satu kali untuk setiap elemen array.</p>
<p id="demo"></p>

<script>
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;

function myFunction(value) {
  txt = txt + value + "<br>"; 
}
</script>

</body>
</html>

Array.map()

Contoh ini mengalikan setiap nilai array dengan 2:

<!DOCTYPE html>
<html>
<body>

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

<p> Membuat array baru dengan menjalankan fungsi pada setiap elemen array. </p>
<p id="demo"></p>

<script>
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);

document.getElementById("demo").innerHTML = numbers2;

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

</body>
</html>

Array.filter()

Contoh ini membuat array baru dari elemen dengan nilai lebih besar dari 18:

<!DOCTYPE html>
<html>
<body>

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

<p> Membuat array baru dengan semua elemen array yang lolos pengujian. </p>
<p id="demo"></p>

<script>
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);

document.getElementById("demo").innerHTML = over18;

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

</body>
</html>

Array.reduce()

Contoh ini menemukan jumlah semua angka dalam array.

Contoh:

<!DOCTYPE html>
<html>
<body>

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

<p> Contoh ini menemukan jumlah semua angka dalam array: </p>
<p id="demo"></p>

<script>
var numbers = [45, 4, 9, 16, 25];
var sum = numbers.reduce(myFunction);

document.getElementById("demo").innerHTML = "The sum is " + sum;

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

</body>
</html>

Array.reduceRight()

Contoh ini juga menemukan jumlah semua angka dalam array:

<!DOCTYPE html>
<html>
<body>

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

<p> Contoh ini menemukan jumlah semua angka dalam array: </p>
<p id="demo"></p>

<script>
var numbers = [45, 4, 9, 16, 25];
var sum = numbers.reduceRight(myFunction);

document.getElementById("demo").innerHTML = "The sum is " + sum;

function myFunction(total, value) {
  return total + value;
}
</script>

</body>
</html>

Array.every ()
Contoh ini memeriksa apakah semua nilai di atas 18:

<!DOCTYPE html>
<html>
<body>

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

<p> Metode every () memeriksa apakah semua nilai array melewati pengujian. </p>
<p id="demo"></p>

<script>
var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);

document.getElementById("demo").innerHTML = "All over 18 is " + allOver18;

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

</body>
</html>

Array.some()

Contoh ini memeriksa apakah beberapa nilai di atas 18:

Contoh

<!DOCTYPE html>
<html>
<body>

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

<p> Metode some () memeriksa apakah beberapa nilai array lolos pengujian. </p>
<p id="demo"></p>

<script>
var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.some(myFunction);

document.getElementById("demo").innerHTML = "Some over 18 is " + allOver18;

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

</body>
</html>

Array.indexOf()

Cari array untuk nilai elemen dan kembalikan posisinya.

Contoh

<!DOCTYPE html>
<html>
<body>

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


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

<script>
var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");
document.getElementById("demo").innerHTML = "Apple is found in position " + a;
</script>

<p> indexOf () tidak berfungsi di Internet Explorer 8 dan versi sebelumnya. </p>
</body>
</html>

Array.lastIndexOf()

Array.lastIndexOf() sama dengan Array.indexOf(), tetapi mencari dari akhir array.

Contoh

<!DOCTYPE html>
<html>
<body>

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


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

<script>
var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");
document.getElementById("demo").innerHTML = "Apple is found in position " + (a + 1);
</script>

<p> indexlastOf() tidak berfungsi di Internet Explorer 8 dan versi sebelumnya. </p>
</body>
</html>

JSON.parse()

Penggunaan umum JSON adalah menerima data dari server web.

Anggap kita menerima string teks ini dari server web:

'{"name": "John", "age": 30, "city": "New York"}'

Fungsi JavaScript JSON.parse() digunakan untuk mengubah teks menjadi objek JavaScript:

<!DOCTYPE html>
<html>
<body>

<h2> Buat Objek dari JSON String </h2>
<p id="demo"></p>

<script>
var txt = '{"name":"John", "age":30, "city":"New York"}'
var obj = JSON.parse(txt);
document.getElementById("demo").innerHTML = obj.name + ", " + obj.age;
</script>

</body>
</html>

JSON.stringify()

Penggunaan umum JSON adalah mengirim data ke server web.

Saat mengirim data ke server web, data harus berupa string.

Anggap kita memiliki objek ini di JavaScript:

var obj = {name:"John", age:30, city:"New York"};

Gunakan fungsi JavaScript JSON.stringify () untuk mengubahnya menjadi string.

var myJSON = JSON.stringify (obj);

Hasilnya adalah string yang mengikuti notasi JSON.

myJSON sekarang menjadi string, dan siap dikirim ke server:

Contoh

<!DOCTYPE html>
<html>
<body>

<h2> Buat Objek dari JSON String </h2>
<p id="demo"></p>

<script>
var obj = { name: "John", age: 30, city: "New York" };
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
</script>

</body>
</html>

Date.now()

Date.now() mengembalikan jumlah milidetik sejak tanggal nol (1 Januari 1970 00:00:00 UTC).

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Date.now()</h2>

<p> Date.now() baru di ECMAScript 5 (2009): </p>
<p id="demo1"></p>
<p id="demo2"></p>

<script>
document.getElementById("demo1").innerHTML = Date.now();
var d = new Date();
document.getElementById("demo2").innerHTML = d.getTime();
</script>
</body>
</html>

Property Getter dan Setter

ES5 memungkinkan menentukan metode objek dengan sintaks yang terlihat seperti getter atau setter properti.

Contoh ini membuat getter untuk properti bernama fullName.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2> Getter dan Setter JavaScript </h2>

<p> Getter dan setter memungkinkan  mendapatkan dan menyetel properti melalui metode. </p>

<p> Contoh ini membuat getter untuk properti bernama fullName. </p>

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

<script>
// Create an object:
var person = {
  firstName: "John",
  lastName : "Doe",
  get fullName() {
    return this.firstName + " " + this.lastName;
  }
};
// Display data from the object using a getter:
document.getElementById("demo").innerHTML = person.fullName;
</script>

</body>
</html>

Contoh ini membuat setter dan getter untuk properti bahasa:

<!DOCTYPE html>
<html>
<body>

<h2> Getter dan Setter JavaScript </h2>

<p> Getter dan setter memungkinkan  mendapatkan dan menyetel properti melalui metode. </p>

<p> Contoh ini membuat getter untuk properti bernama fullName. </p>

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

<script>
// Create an object:
var person = {
  firstName: "John",
  lastName : "Doe",
  language : "NO",
  get lang() {
    return this.language;
  },
  set lang(value) {
    this.language = value;
  }
};
// Set an object property using a setter:
person.lang = "en";
// Display data from the object using a getter:
document.getElementById("demo").innerHTML = person.lang;
</script>

</body>
</html>

Contoh ini menggunakan setter untuk mengamankan pembaruan bahasa dalam huruf besar:

<!DOCTYPE html>
<html>
<body>

<h2> Getter dan Setter JavaScript </h2>

<p> Getter dan setter memungkinkan mendapatkan dan menyetel properti melalui metode. </p>

<p> Contoh ini memiliki setter  yang dimodifikasi untuk mengamankan pembaruan bahasa huruf besar. </p>
<p id="demo"></p>

<script>
// Create an object:
var person = {
  firstName: "John",
  lastName : "Doe",
  language : "",
  set lang(value) {
     this.language = value.toUpperCase();
  }
};
// Set an object property using a setter:
person.lang = "en";
// Display data from the object:
document.getElementById("demo").innerHTML = person.language;
</script>

</body>
</html>

Metode Properti Objek Baru

Object.defineProperty() adalah metode Object baru di ES5.

Ini memungkinkan untuk menentukan properti objek dan / atau mengubah nilai dan / atau metadata properti.

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=iso-8859-2" http-equiv="Content-Type">
</head>

<body>

<h2>JavaScript defineProperty()</h2>

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

<script>
// Create an Object:
var person = {
  firstName: "John",
  lastName : "Doe",
  language : "NO", 
};
// Change a Property:
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable : true,
  configurable : true
});
// Enumerate Properties
txt = "";
for (var x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;
</script>

</body>
</html>

Contoh selanjutnya adalah kode yang sama, kecuali kode ini menyembunyikan properti bahasa dari pencacahan:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript defineProperty()</h2>

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

<script>
// Create an Object:
var person = {
  firstName: "John",
  lastName : "Doe",
  language : "NO", 
};
// Change a Property:
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable : false,
  configurable : true
});
// Enumerate Properties
txt = "";
for (var x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;
</script>

</body>
</html>

Contoh ini membuat setter dan getter untuk mengamankan pembaruan bahasa huruf besar:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript defineProperty()</h2>

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

<script>
// Create an Object:
var person = {
  firstName: "John",
  lastName : "Doe",
  language : "NO"
};
// Change a Property:
Object.defineProperty(person, "language", {
  get : function() { return language },
  set : function(value) { language = value.toUpperCase()}
});
// Change language
person.language = "en";
// Display language
document.getElementById("demo").innerHTML = person.language;
</script>

</body>
</html>

ECMAScript 5 menambahkan banyak Metode Objek baru ke JavaScript:

// Menambah atau mengubah properti objek
Object.defineProperty(object, property, descriptor)

// Menambah atau mengubah banyak properti objek
Object.defineProperties(object, descriptors)

// Mengakses Properti
Object.getOwnPropertyDescriptor(object, property)

// Mengembalikan semua properti sebagai array
Object.getOwnPropertyNames(object)

// Mengembalikan properti enumerable sebagai array
Object.keys(object)

// Mengakses prototipe
Object.getPrototypeOf(object)

// Mencegah penambahan properti ke objek
Object.preventExtensions(object)
// Mengembalikan nilai true jika properti dapat ditambahkan ke objek
Object.isExtensible(object)

// Mencegah perubahan properti objek (bukan nilai)
Object.seal(object)
// Mengembalikan nilai true jika objek disegel
Object.isSealed(object)

// Mencegah perubahan apa pun pada objek
Object.freeze(object)
// Mengembalikan nilai true jika objek dibekukan
Object.isFrozen(object)

Akses Properti di String

Metode charAt() mengembalikan karakter pada indeks (posisi) yang ditentukan dalam string:

Contoh

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Method</h2>

<p>Metode charAt() mengembalikan karakter pada indeks (posisi) yang ditentukan dalam string:</p>

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

<script>
var str = "HELLO WORLD";
document.getElementById("demo").innerHTML = str.charAt(0);
</script>
</body>
</html>

ECMAScript 5 memungkinkan akses properti pada string:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Methods</h2>

<p>ECMAScript 5 memungkinkan akses properti pada string</p>

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

<script>
var str = "HELLO WORLD";
document.getElementById("demo").innerHTML = str[0];
</script>
</body>
</html>

Akses properti pada string mungkin sedikit tidak dapat diprediksi.

Trailing Comma

ECMAScript 5 memungkinkan tanda koma dalam definisi objek dan array:

Contoh Objek

person = {
  firstName: "John",
  lastName: " Doe",
  age: 46,
}

Contoh Array

points = [
  1,
  5,
  10,
  25,
  40,
  100,
];

PERINGATAN !!!

Internet Explorer 8 akan mengalami crash.

JSON tidak mengizinkan tanda koma.

JSON Objects:

// Allowed:
var person = '{"firstName":"John", "lastName":"Doe", "age":46}'
JSON.parse(person)

// Not allowed:
var person = '{"firstName":"John", "lastName":"Doe", "age":46,}'
JSON.parse(person)

JSON Arrays:

// Allowed:
points = [40, 100, 1, 5, 25, 10]

// Not allowed:
points = [40, 100, 1, 5, 25, 10,]

String Over Multiple Lines

ECMAScript 5 memungkinkan literal string melewati beberapa baris jika lolos dengan backslash.
Contoh

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Strings</h2>

<p>
Anda dapat memecah baris kode dalam string teks dengan backslash.</p>

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

<script>
document.getElementById("demo").innerHTML = "Hello \
Dolly!";
</script>

</body>
</html>

Metode mungkin tidak memiliki dukungan universal.
Browser lama mungkin memperlakukan spasi di sekitar backslash secara berbeda.
Beberapa browser lama tidak mengizinkan spasi di belakang karakter .

Cara yang lebih aman untuk memecah string literal, adalah dengan menggunakan penambahan string.

Contoh

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Strings</h2>

<p> Cara paling aman untuk memecah baris kode dalam sebuah string menggunakan penambahan string. </p>
<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello " +
"Dolly!";
</script>

</body>
</html>

Kata yang Dicadangkan sebagai Nama Properti

ECMAScript 5 mengizinkan kata yang dicadangkan sebagai nama properti.

Contoh Object

<!DOCTYPE html>
<html>
<body>

<h2>ECMAScript 5</h2>

<p>ECMAScript 5 mengizinkan kata yang dicadangkan sebagai nama properti.</p>
<p id="demo"></p>

<script>
var obj = {name: "John", new: "yes"};
document.getElementById("demo").innerHTML = obj.new;
</script>

</body>
</html>


Browser Support ES5 (ECMAScript 5)

Chrome 23, IE 10, dan Safari 6 adalah browser pertama yang sepenuhnya mendukung ECMAScript 5:

ChromeEdgeFirefoxSafariOpera
Chrome 23IE10 / EdgeFirefox 21Safari 6Opera 15
Sep 2012Sep 2012Apr 2013Jul 2012Jul 2013

You may also like