Panduan Belajar JavaScript Modern

ES6 dan Fitur Baru

ES6 (ECMAScript 2015) adalah versi JavaScript yang membawa banyak fitur baru untuk meningkatkan produktivitas developer dan membuat kode lebih clean serta mudah dibaca. Dengan ES6, JavaScript menjadi lebih powerful dan modern, terutama untuk pengembangan aplikasi web skala besar.

Arrow Function

Arrow function adalah cara singkat untuk menulis function di JavaScript. Selain lebih ringkas, arrow function juga tidak memiliki binding 'this' sendiri sehingga cocok digunakan dalam callback.

// Function biasa
function sum(a, b) {
  return a + b
}

// Arrow function
const sum = (a, b) => a + b

Let dan Const

ES6 memperkenalkan 'let' dan 'const' untuk deklarasi variabel. Keduanya memiliki block scope, berbeda dengan 'var' yang menggunakan function scope.

let count = 10
const PI = 3.14

// const tidak bisa diubah
// PI = 4 // error

Template Literals

Template literals memungkinkan penulisan string dengan backtick (`) dan mendukung interpolasi variabel serta multi-line string.

const name = "Rama"
const message = `Hello, ${name}!`

Destructuring

Destructuring memudahkan pengambilan nilai dari object atau array ke dalam variabel secara langsung.

// Object destructuring
const user = { name: "Rama", age: 20 }
const { name, age } = user

// Array destructuring
const numbers = [1, 2, 3]
const [a, b, c] = numbers

Spread dan Rest Operator

Spread operator (...) digunakan untuk menyebarkan nilai array atau object, sedangkan rest digunakan untuk mengumpulkan sisa parameter.

// Spread
const arr1 = [1, 2]
const arr2 = [...arr1, 3, 4]

// Rest
function sum(...numbers) {
  return numbers.reduce((a, b) => a + b, 0)
}

Default Parameter

Default parameter memungkinkan kita memberikan nilai default pada parameter function jika tidak diberikan.

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

Modules (Import & Export)

ES6 memperkenalkan sistem module untuk memisahkan kode menjadi file terpisah dan lebih terstruktur.

// export
export const name = "Rama"

// import
import { name } from "./file.js"

Promises

Promises digunakan untuk menangani operasi asynchronous dengan lebih rapi dibanding callback.

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve("Success"), 1000)
  })
}

fetchData().then(res => console.log(res))

Class

ES6 memperkenalkan class sebagai syntactic sugar dari prototype untuk membuat object-oriented programming lebih mudah dipahami.

class User {
  constructor(name) {
    this.name = name
  }

  greet() {
    return `Hello ${this.name}`
  }
}

const user = new User("Rama")

Kesimpulan

ES6 membawa banyak peningkatan signifikan pada JavaScript yang membuat kode lebih modern, modular, dan mudah dibaca. Dengan memahami fitur-fitur seperti arrow function, destructuring, dan modules, developer dapat menulis kode yang lebih efisien dan scalable.