Fitur ES6+ yang Wajib Dikuasai Sebelum Belajar React.js

Fitur ES6+ yang Wajib Dikuasai Sebelum Belajar React.js
Photo by Nathan da Silva / Unsplash

Sebelum kamu masuk ke dunia React.js, ada baiknya jika kamu menguasai beberapa fitur dari JavaScript yang diperkenalkan di ES6 (ECMAScript 2015) dan versi-versi setelahnya (ES7, ES8, dan seterusnya). React.js dibangun di atas JavaScript, dan banyak fitur yang digunakan di dalam React yang berasal dari ES6+. Kalau kamu belum familiar dengan fitur-fitur ini, belajar mereka akan membuat kamu lebih nyaman dan cepat menguasai React.

Nah, apa saja sih fitur ES6+ yang wajib dikuasai sebelum mulai belajar React? Yuk, simak penjelasan berikut!

1. Let dan Const

Salah satu perubahan paling dasar dan penting dari ES6 adalah pengenalan let dan const sebagai pengganti var. Dengan let dan const, kamu bisa mendeklarasikan variabel dengan cara yang lebih aman dan terstruktur.

  • let digunakan untuk mendeklarasikan variabel yang nilainya bisa berubah.
  • const digunakan untuk mendeklarasikan variabel yang nilainya tidak bisa diubah setelah ditetapkan.

Contoh:

let nama = "Angga"; // bisa diubah
nama = "Janned";

const usia = 25; // tidak bisa diubah
// usia = 26; // Error

Di React, kamu akan sering bekerja dengan data yang bisa berubah, jadi penggunaan let dan const sangat penting!

2. Arrow Function

Arrow function membuat penulisan fungsi menjadi lebih singkat dan jelas. Fitur ini juga mengubah cara penanganan this, yang sangat berguna saat kamu bekerja dengan React, terutama dalam event handler.

Contoh:

// Fungsi biasa
function salam() {
  console.log("Halo, dunia!");
}

// Arrow function
const salam = () => {
  console.log("Halo, dunia!");
};

Penggunaan arrow function akan sangat sering kamu temui di React, terutama dalam komponen-komponen fungsional dan event handling.

3. Template Literals

Template literals adalah cara yang lebih nyaman untuk menggabungkan string dan variabel tanpa harus menggunakan operator +. Kamu bisa langsung menyisipkan variabel di dalam string menggunakan tanda backtick (`).

Contoh:

const nama = "Angga";
const sapaan = `Halo, ${nama}! Apa kabar?`;
console.log(sapaan);

Di React, kamu pasti akan sering menggabungkan string dengan data state atau props, jadi fitur ini sangat membantu.

4. Destructuring Assignment

Destructuring memungkinkan kamu untuk memecah objek atau array menjadi variabel yang lebih mudah digunakan. Fitur ini sering banget digunakan di React, terutama ketika mengakses props atau state.

Contoh objek:

const user = {
  nama: "Angga",
  usia: 25,
};

// Tanpa destructuring
const nama = user.nama;
const usia = user.usia;

// Dengan destructuring
const { nama, usia } = user;

Contoh array:

const warna = ["merah", "biru", "hijau"];
const [warna1, warna2] = warna; // "merah", "biru"

Di React, kamu akan sering menggunakan destructuring untuk mengambil nilai dari props atau state, jadi penguasaan fitur ini sangat penting!

5. Spread Operator

Spread operator (...) memungkinkan kamu untuk menyalin nilai array atau objek ke dalam array atau objek baru. Ini sangat berguna dalam React untuk memperbarui state secara imutabilitas (tanpa merubah state langsung).

Contoh objek:

const user = { nama: "Angga", usia: 25 };
const updateUser = { ...user, usia: 26 }; // menyalin semua properti dan mengubah usia

Contoh array:

const angka = [1, 2, 3];
const angkaBaru = [...angka, 4]; // menambahkan angka 4 ke array baru

Di React, kamu sering menggunakan spread operator saat memperbarui state atau props, terutama saat bekerja dengan useState.

6. Default Parameters

Dengan ES6, kamu bisa memberikan nilai default untuk parameter fungsi. Fitur ini membantu kamu menghindari error jika parameter tidak diberikan saat memanggil fungsi.

Contoh:

function greeting(nama = "Teman") {
  console.log(`Halo, ${nama}!`);
}

greeting(); // "Halo, Teman!"
greeting("Angga"); // "Halo, Angga!"

Saat menulis fungsi atau komponen di React, kamu bisa memanfaatkan default parameters untuk memberikan nilai default pada props atau parameter lain.

7. Modules (import/export)

Dengan ES6, JavaScript kini mendukung penggunaan modules, yang memungkinkan kamu untuk membagi kode menjadi file-file terpisah dan mengimpor/mengekspor bagian-bagian tersebut.

Contoh ekspor dan impor:

// file: hello.js
export const hello = "Halo";

// file: main.js
import { hello } from './hello';
console.log(hello); // "Halo"

Di React, kamu akan sering mengimpor dan mengekspor komponen, sehingga pemahaman tentang modules ini sangat krusial.

8. Promises dan Async/Await

Promises digunakan untuk menangani operasi asynchronous, seperti mengambil data dari API. Dengan ES8, kita memiliki async/await yang membuat penulisan kode asynchronous jadi lebih mudah dibaca.

Contoh dengan Promise:

fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

Contoh dengan async/await:

async function getData() {
  try {
    const response = await fetch("https://api.example.com/data");
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

getData();

Di React, kamu akan sering berinteraksi dengan API, jadi menguasai async/await akan membuat kamu lebih efektif dalam menangani data dari server.

9. Array Methods (map, filter, reduce)

Untuk mengelola array, JavaScript memiliki berbagai method keren seperti map, filter, dan reduce. Fitur ini sangat berguna di React saat kamu bekerja dengan list data dan ingin merender elemen-elemen dalam array.

Contoh map:

const angka = [1, 2, 3];
const angkaDikaliDua = angka.map(num => num * 2);

Contoh filter:

const angka = [1, 2, 3, 4, 5];
const angkaGenap = angka.filter(num => num % 2 === 0);

Contoh reduce:

const angka = [1, 2, 3];
const jumlah = angka.reduce((total, num) => total + num, 0);

Di React, kamu akan sering menggunakan map untuk merender list item, jadi fitur ini wajib dikuasai!

Kesimpulan

Fitur-fitur ES6+ di atas adalah dasar yang sangat penting sebelum kamu melangkah lebih jauh ke React.js. Dengan menguasai fitur-fitur ini, kamu tidak hanya akan lebih mudah dalam belajar React, tetapi juga akan mengembangkan pemahaman JavaScript yang lebih mendalam. Jadi, pastikan kamu sudah familiar dengan semuanya, ya! Selamat belajar dan semoga sukses! 🚀