Panduan Pemula untuk JavaScript Modern: ES6

Hai sana, para ahli JavaScript masa depan! Saya sangat gembira untuk menjadi panduanmu dalam perjalanan menarik ini ke dunia ES6, pembaruan game-changing bagi JavaScript yang mengubah cara kita menulis kode. Sebagai seseorang yang telah mengajar pemrograman lebih dari sepuluh tahun, saya tidak sabar untuk membagikan keajaiban ES6 kepada Anda. Jadi, ambil wicara (atau papan ketik), dan mari kita masuk!

Fitur Baru di ES6

ES6, juga dikenal sebagai ECMAScript 2015, membawa keajaiban baru bagi JavaScript. Itu seperti JavaScript pergi ke sekolah superhero dan kembali dengan keseluruhan set kekuatan baru! Mari kita jelajahi superkekuatan ini satu per satu.

Fungsi Arrow JavaScript

Fungsi Arrow adalah seperti sepupu yang keren dan modern dari fungsi biasa. Mereka lebih pendek, ramping, dan kadang-kadang bahkan lebih kuat. Mari kita lihat contoh:

// Cara lama
function sayHello(name) {
return "Hello, " + name + "!";
}

// Cara fungsi Arrow
const sayHello = (name) => `Hello, ${name}!`;

console.log(sayHello("Alice")); // Output: Hello, Alice!

Dalam contoh ini, kita telah mengubah fungsi biasa menjadi fungsi Arrow. Catat bagaimana kita menghapus kata function dan menambahkan => (panah ganda). Itu seperti fungsi kita pergi diet dan kembali terlihat bagus!

Metode find() Array JavaScript

Metode find() adalah seperti detektif untuk array Anda. Ia mencari melalui array dan mengembalikan elemen pertama yang lolos ujian. Berikut cara kerjanya:

const numbers = [1, 2, 3, 4, 5];
const firstEvenNumber = numbers.find(num => num % 2 === 0);

console.log(firstEvenNumber); // Output: 2

Dalam kasus ini, metode find() mencari nomor genap pertama. Ia memeriksa setiap nomor, dan segera setelah menemukan nomor yang dapat dibagi 2 tanpa sisa, ia mengembalikan nomor itu.

Metode findIndex() Array

findIndex() adalah sepupu find(). Sebaliknya dari mengembalikan elemen, ia mengembalikan indeks elemen pertama yang lolos ujian. Mari kita lihatnya dalam aksi:

const fruits = ["apple", "banana", "cherry", "date"];
const indexOfLongFruit = fruits.findIndex(fruit => fruit.length > 5);

console.log(indexOfLongFruit); // Output: 1

Di sini, kita mencari buah pertama yang memiliki lebih dari 5 huruf. "Banana" adalah yang pertama memenuhi kriteria ini, jadi indeksnya (1) dikembalikan.

Array.from()

Array.from() adalah seperti ahli magi yang dapat mengubah objek seperti array atau iterables menjadi array nyata. Ini sangat berguna saat bekerja dengan elemen DOM. Berikut contohnya:

const name = "Alice";
const nameArray = Array.from(name);

console.log(nameArray); // Output: ["A", "l", "i", "c", "e"]

Dalam kasus ini, kita telah mengubah string menjadi array karakter individual. Sangat keren, kan?

Metode keys() Array

Metode keys() mengembalikan Array Iterator objek dengan kunci array. Itu seperti mendapatkan pass VIP ke semua indeks array Anda. Mari kita lihat bagaimana itu bekerja:

const fruits = ["apple", "banana", "cherry"];
const keys = fruits.keys();

for (let key of keys) {
console.log(key);
}
// Output:
// 0
// 1
// 2

Metode ini memberikan kita akses ke indeks array, yang bisa sangat berguna dalam situasi tertentu.

Kelas JavaScript

Kelas di ES6 membawa pemrograman berorientasi objek ke JavaScript dalam cara yang lebih intuitif. Mereka seperti blueprint untuk membuat objek. Mari kita buat kelas sederhana:

class Dog {
constructor(name) {
this.name = name;
}

bark() {
return `${this.name} says woof!`;
}
}

const myDog = new Dog("Buddy");
console.log(myDog.bark()); // Output: Buddy says woof!

Dalam contoh ini, kita membuat kelas Dog dengan constructor dan metode. Kita kemudian dapat membuat objek Dog baru menggunakan kelas ini.

Kata kunci const

Kata kunci const adalah seperti lemari aman untuk variabel Anda. Setelah Anda memasukkan nilai, ia terkunci dan tidak dapat diubah. Ini sempurna untuk nilai yang tidak seharusnya diubah ulang. Berikut cara kerjanya:

const PI = 3.14159;
// PI = 3; // Ini akan menyebabkan kesalahan

console.log(PI); // Output: 3.14159

Dalam contoh ini, kita mendeklarasikan PI sebagai konstanta. Jika kita mencoba mengubahnya, JavaScript akan memberikan kesalahan.

Kata kunci let

let adalah seperti saudara yang lebih bertanggung jawab dari var. Itu menyediakan skoping blok, yang dapat membantu mencegah banyak kesalahan pemrograman. Berikut contohnya:

let x = 1;

if (true) {
let x = 2; // Ini adalah `x` yang berbeda
console.log(x); // Output: 2
}

console.log(x); // Output: 1

Dalam kasus ini, x di dalam blok if adalah variabel yang berbeda dari x di luar blok, terima kasih kepada let.

Parameter Default

Parameter default adalah seperti jaring keselamatan untuk fungsi Anda. Mereka menyediakan nilai default untuk parameter jika tidak ada argumen yang diberikan. Mari kita lihat bagaimana mereka bekerja:

function greet(name = "Guest") {
return `Hello, ${name}!`;
}

console.log(greet()); // Output: Hello, Guest!
console.log(greet("Alice")); // Output: Hello, Alice!

Dalam contoh ini, jika kita tidak memberikan nama, fungsi menggunakan "Guest" sebagai default.

Loop for...of

Loop for...of adalah cara baru, lebih ringkas, untuk mengulang objek yang dapat diulang seperti array. Itu seperti tur yang diterankan melalui data Anda. Berikut cara kerjanya:

const fruits = ["apple", "banana", "cherry"];

for (let fruit of fruits) {
console.log(fruit);
}
// Output:
// apple
// banana
// cherry

Loop ini secara otomatis mengulang setiap elemen array, membuat kode kita lebih bersih dan mudah dibaca.

Parameter Rest

Parameter rest adalah seperti jaring yang menangkap semua argumen ekstra yang diberikan ke fungsi. Itu diwakili oleh tiga titik (...) diikuti oleh nama. Berikut contohnya:

function sum(...numbers) {
return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4)); // Output: 10

Dalam kasus ini, ...numbers menangkap semua argumen dan memasukkannya ke dalam array, yang kemudian kita jumlahkan.

Modul JavaScript

Modul di ES6 adalah seperti blok LEGO untuk kode Anda. Mereka memungkinkan Anda membagi kode Anda menjadi berkas terpisah dan mengimpor/export fungsionalitas yang diperlukan. Berikut contoh sederhana:

// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// main.js
import { add, subtract } from './math.js';

console.log(add(5, 3)); // Output: 8
console.log(subtract(5, 3)); // Output: 2

Pendekatan ini membantu menjaga kode Anda terorganisir dan dapat digunakan kembali.

Objek Map

Objek Map adalah seperti objek super-powered. Mereka mengizinkan kunci jenis apa pun dan menjaga urutan entri. Berikut cara kerjanya:

const myMap = new Map();

myMap.set('name', 'Alice');
myMap.set(1, 'number one');

console.log(myMap.get('name')); // Output: Alice
console.log(myMap.get(1)); // Output: number one

Maps sangat berguna saat Anda memerlukan untuk menghubungkan data tambahan dengan objek.

Metode Global Baru

ES6 memperkenalkan beberapa metode global baru. Mari kita lihat salah satu di antaranya: isFinite().

console.log(Number.isFinite(10)); // Output: true
console.log(Number.isFinite(Infinity)); // Output: false
console.log(Number.isFinite("10")); // Output: false

Metode ini menentukan apakah nilai adalah sebuah bilangan terbatas, mengembalikan true atau false.

Metode Math Baru

ES6 juga membawa metode Math baru. Salah satu di antaranya adalah Math.trunc(), yang menghapus bagian desimal dari sebuah bilangan:

console.log(Math.trunc(4.9)); // Output: 4
console.log(Math.trunc(-4.2)); // Output: -4

Metode ini sangat berguna saat Anda memerlukan untuk bekerja dengan bilangan bulat.

Metode Number Baru

Metode Number baru juga diperkenalkan. Mari kita lihat Number.isInteger():

console.log(Number.isInteger(10)); // Output: true
console.log(Number.isInteger(10.5)); // Output: false

Metode ini menentukan apakah nilai adalah bilangan bulat.

Properti Number Baru

ES6 menambahkan properti Number baru. Berikut contoh dengan Number.EPSILON:

console.log(Number.EPSILON); // Output: 2.220446049250313e-16

EPSILON mewakili interval terkecil antara dua bilangan yang dapat direpresentasikan.

Promise JavaScript

Promise adalah seperti IOU di JavaScript. Mereka mewakili nilai yang mungkin belum tersedia, tetapi akan ada di suatu titik. Berikut contoh sederhana:

const myPromise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Success!");
}, 1000);
});

myPromise.then(result => console.log(result)); // Output setelah 1 detik: Success!

Promise sangat penting untuk mengelola operasi asinkron di JavaScript.

Objek Set

Objek Set adalah seperti koleksi nilai unik. Mereka seperti array, tapi tanpa duplikat. Berikut cara kerjanya:

const mySet = new Set([1, 2, 3, 3, 4]);

console.log(mySet); // Output: Set(4) {1, 2, 3, 4}

Sets secara otomatis menghapus nilai duplikat, yang bisa sangat berguna dalam situasi tertentu.

Metode String Baru

ES6 memperkenalkan beberapa metode String baru. Mari kita lihat startsWith():

const str = "Hello, world!";

console.log(str.startsWith("Hello")); // Output: true
console.log(str.startsWith("world")); // Output: false

Metode ini menentukan apakah string dimulai dengan karakter yang ditentukan.

Symbol JavaScript

Symbols adalah jenis primitif baru di ES6. Mereka unik dan tak dapat diubah, sering digunakan sebagai kunci properti di objek. Berikut contoh:

const mySymbol = Symbol("mySymbol");
const obj = {
[mySymbol]: "Hello, Symbol!"
};

console.log(obj[mySymbol]); // Output: Hello, Symbol!

Symbols berguna untuk membuat kunci properti non-string di objek.

Operator Spread

Operator spread (...) adalah seperti tongkat sihir yang dapat menyebar array menjadi elemen individual. Itu sangat multifungsi. Berikut contohnya:

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];

console.log(arr2); // Output: [1, 2, 3, 4, 5]

Operator spread telah menyebar arr1 menjadi elemen individual dalam arr2.

Kesimpulan

Wah! Kita telah melalui banyak hal, kan? ES6 membawa banyak fitur menarik ke JavaScript, dan kita hanya menyentuh permukaannya. Ingat, kunci untuk menguasai konsep ini adalah latihan. Jadi, maju dan kode! Coba-coba fitur baru ini, perbaiki mereka, dan bersenang-senang dalam proses. Sebelum Anda tahu, Anda akan menulis JavaScript modern seperti seorang pro!

Berikut adalah tabel yang menggabungkan semua metode yang kita diskusikan:

Metode	Deskripsi
Arrow Functions	Sintaks pendek untuk menulis fungsi ekspresi
Array.find()	Mengembalikan nilai elemen pertama dalam array yang memenuhi ujian
Array.findIndex()	Mengembalikan indeks elemen pertama dalam array yang memenuhi ujian
Array.from()	Membuat instance array baru dari objek seperti array atau iterables
Array.keys()	Mengembalikan Array Iterator objek dengan kunci array
Class	Template untuk membuat objek, menyediakan sintaks yang bersih untuk pemrograman berorientasi objek
const	Mendeklarasikan konstanta blok-scoped, immutable
let	Mendeklarasikan variabel blok-scoped, lokal
Default Parameters	Mengizinkan parameter named untuk diinisialisasi dengan nilai default jika argumen tidak diberikan
for...of	Membuat loop yang mengulang objek yang dapat diulang
Rest Parameter	Mengizinkan fungsi untuk menerima jumlah tak tentu argumen sebagai array
Modules	Memungkinkan Anda membagi kode Anda menjadi berkas terpisah dan mengimpor/export fungsionalitas yang diperlukan
Map	Koleksi data keyed, mirip dengan Object, tetapi mengizinkan kunci jenis apa pun
Number.isFinite()	Menentukan apakah nilai adalah bilangan terbatas
Math.trunc()	Menghapus bagian desimal dari sebuah bilangan
Number.isInteger()	Menentukan apakah nilai adalah bilangan bulat
Number.EPSILON	Representasi interval terkecil antara dua bilangan yang dapat direpresentasikan
Promise	Mewakili nilai yang mungkin belum tersedia, tetapi akan ada di suatu titik
Set	Koleksi nilai unik
String.startsWith()	Menentukan apakah string dimulai dengan karakter yang ditentukan
Symbol	Jenis primitif unik dan tak dapat diubah
Spread Operator	Menyebar array menjadi elemen individual

Happy coding, dan may the ES6 be with you!

Credits: Image by storyset