JavaScript - ES6: Panduan Pemula ke JavaScript Modern

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

Fitur Baru di ES6

ES6, juga dikenal sebagai ECMAScript 2015, membawa keajaiban baru dalam bentuk fitur baru ke JavaScript. Seperti JavaScript pergi ke sekolah superhero dan kembali dengan sejumlah besar kekuatan baru! Mari kita jelajahi kekuatan super ini satu per satu.

Fungsi Arrow JavaScript

Fungsi arrow adalah seperti sepupu yang keren dan modis 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. Perhatikan bagaimana kita menghapus kata function dan menambahkan => (panah ganda). Seperti fungsi kita melakukan diet dan kembali terlihat menakjubkan!

Metode find() Array JavaScript

Metode find() adalah seperti detektif untuk array Anda. Itu mencari melalui array dan mengembalikan elemen pertama yang lolos ujian. Ini 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. Itu memeriksa setiap nomor, dan segera mengembalikan nomor yang dapat dibagi habis dengan 2 tanpa sisa, yaitu 2.

Metode findIndex() Array

findIndex() adalah sepupu find(). Daripada mengembalikan elemen, itu mengembalikan indeks elemen pertama yang lolos ujian. Mari kita lihat nya 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 dengan lebih dari 5 huruf. "Banana" adalah yang pertama yang memenuhi kriteria ini, jadi indeksnya (1) dikembalikan.

Array.from()

Array.from() adalah seperti seorang magus yang dapat mengubah objek array-like atau iterables menjadi array sebenarnya. Hal ini sangat berguna saat bekerja dengan elemen DOM. Ini contohnya:

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

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

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

Metode keys() Array

Metode keys() mengembalikan objek Array Iterator dengan kunci array. Itu seperti mendapat 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, itu terkunci dan tidak dapat diubah. Hal ini sempurna untuk nilai yang tidak seharusnya diubah ulang. Ini 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 melempar kesalahan.

Kata kunci let

let adalah seperti saudara yang lebih bertanggung jawab dari var. Itu menyediakan skop blok, yang dapat membantu mencegah banyak kesalahan pemrograman. Ini 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 bagi 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 menyediakan nama, fungsi menggunakan "Guest" sebagai default.

Loop for...of

Loop for...of adalah cara yang baru dan lebih ringkas untuk mengulang objek iterables seperti array. Itu seperti tur panduan melalui data Anda. Ini 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 direpresentasikan oleh tiga titik (...) diikuti oleh nama. Ini 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 mengubahnya menjadi array, yang kemudian kita jumlahkan.

Modul JavaScript

Modul di ES6 adalah seperti blok LEGO bagi kode Anda. Mereka memungkinkan Anda membagi kode Anda menjadi berkas terpisah dan mengimpor/export fungsionalitas sesuai kebutuhan. Ini contohnya:

// 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 mempertahankan urutan entri. Ini 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 asociasi 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 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. Ini contohnya 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 pada suatu waktu. Ini contohnya:

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 penanganan operasi asinkron di JavaScript.

Objek Set

Objek Set adalah seperti koleksi nilai unik. Mereka seperti array, tetapi tanpa duplikat. Ini 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. Ini contohnya:

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 mengembangkan array menjadi elemen individual. Itu sangat fleksibel. Ini contohnya:

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

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

Operator spread telah mengembangkan 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! Eksperimenkan dengan fitur baru ini, ruskannya, perbaikinya, 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	Syntax lebih pendek untuk menulis fungsi ekspresi
Array.find()	Mengembalikan nilai elemen pertama dalam array yang memenuhi ujian yang ditentukan
Array.findIndex()	Mengembalikan indeks elemen pertama dalam array yang memenuhi ujian yang ditentukan
Array.from()	Membuat instance array baru dari objek array-like atau iterables
Array.keys()	Mengembalikan Array Iterator yang berisi kunci indeks array
Class	Templat untuk membuat objek, menyediakan syntax yang bersih untuk pemrograman berorientasi objek
const	Mendeklarasikan konstanta blok-scoped, immutable
let	Mendeklarasikan variabel blok-scoped, lokal
Default Parameters	Mengizinkan parameter dinamis untuk diinisialisasi dengan nilai default jika argumen tidak diberikan
for...of	Membuat loop yang mengulang objek iterables
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 sesuai kebutuhan
Map	Koleksi data yang menentukan kunci jenis apa pun dan mempertahankan urutan entri
Number.isFinite()	Menentukan apakah nilai adalah bilangan terbatas
Math.trunc()	Menghapus bagian desimal dari bilangan
Number.isInteger()	Menentukan apakah nilai adalah bilangan bulat
Promise	Mewakili nilai yang mungkin belum tersedia, tetapi akan ada pada suatu waktu
Set	Koleksi nilai unik
String.startsWith()	Menentukan apakah string dimulai dengan karakter yang ditentukan
Symbol	Jenis primitif unik dan tak dapat diubah
Spread Operator	Mengembangkan array menjadi elemen individual

Happy coding, dan may the ES6 be with you!

Credits: Image by storyset