Let, Const, dan Arrow Functions

Let dan Const

ES6 memperkenalkan dua cara baru untuk mendeklarasikan variabel: let dan const, yang mengatasi masalah dengan var.

Perbedaan var, let, dan const

Fitur	var	let	const
Scope	Function	Block	Block
Hoisting	Ya (undefined)	Ya (TDZ)	Ya (TDZ)
Re-declaration	Ya	Tidak	Tidak
Re-assignment	Ya	Ya	Tidak

Temporal Dead Zone (TDZ)

TDZ adalah periode antara masuknya scope dan deklarasi variabel, di mana variabel tidak dapat diakses. Ini membantu menangkap error lebih awal.

Implementasi di app.js

Buat file baru js/app.js dan tambahkan kode berikut:

js/app.js

// JavaScript Next Gen Demo Code

// ----------------------------
// Let dan Const
// ----------------------------
export function demoVariables() {
  // Menggunakan var (cara lama)
  var oldVar = "Old variable";
  {
    var oldVar = "Changed inside block";
  }

  // Menggunakan let (ES6)
  let newLet = "New let variable";
  {
    let newLet = "Different variable inside block";
    console.log("newLet inside block:", newLet);
  }

  // Menggunakan const (ES6)
  const PI = 3.14159;
  const user = { name: "John", age: 30 };
  // PI = 3.15; // Error! Tidak bisa mengubah nilai const
  user.age = 31; // Ini valid! Konten objek const dapat diubah

  return {
    oldVar,
    newLet,
    PI,
    user
  };
}

Const untuk Objek

const membuat referensi immutable, bukan nilai. Untuk objek dan array,Kaliantidak bisa me-reassign variabel, tetapiKalianbisa memodifikasi isinya.

Best Practices

Gunakan const secara default - Gunakan const kecualiKaliantahu nilai akan berubah
Gunakan let untuk nilai yang berubah - Hanya gunakan let jika re-assignment diperlukan
Hindari var - Tidak ada alasan baik menggunakan var di kode modern

Arrow Functions

Arrow functions menyediakan sintaks yang lebih ringkas untuk menulis fungsi dan menangani this dengan cara yang berbeda.

Sintaks Arrow Functions

// Regular function
function sum(a, b) {
  return a + b;
}

// Arrow function
const sum = (a, b) => {
  return a + b;
};

// Tanpa kurung kurawal, return otomatis
const sum = (a, b) => a + b;

// Dengan objek literal, butuh parentheses
const createUser = (name, age) => ({ name, age });

// Satu parameter, kurung opsional
const square = x => x * x;
const double = x => x * 2;

// Tanpa parameter, kurung wajib
const sayHello = () => "Hello World!";
const getRandom = () => Math.random();

Implementasi Arrow Functions

Tambahkan ke js/app.js:

js/app.js

// ----------------------------
// Arrow Functions
// ----------------------------
export function demoArrowFunctions() {
  // Fungsi reguler
  function regularSum(a, b) {
    return a + b;
  }

  // Arrow function dasar
  const arrowSum = (a, b) => {
    return a + b;
  };

  // Arrow function dengan implicit return
  const shortArrowSum = (a, b) => a + b;

  // Arrow function tanpa parameter
  const sayHello = () => "Hello World!";

  // Arrow function dengan satu parameter (kurung opsional)
  const square = x => x * x;

  return {
    regularSum: regularSum(5, 3),
    arrowSum: arrowSum(5, 3),
    shortArrowSum: shortArrowSum(5, 3),
    sayHello: sayHello(),
    square: square(4)
  };
}

Perbedaan dengan Regular Functions

Aspek	Regular Function	Arrow Function
Sintaks	`function name() {}`	`const name = () => {}`
`this` binding	Dynamic	Lexical
`arguments` object	Ada	Tidak ada
Dapat digunakan sebagai constructor	Ya	Tidak

Lexical this

Arrow functions tidak memiliki this sendiri. Mereka mewarisi this dari scope di mana mereka didefinisikan. Ini sangat berguna dalam callback dan method chaining.

Template Literals

Template literals menyediakan cara yang lebih baik untuk membuat string dengan interpolasi variabel dan multi-line.

Sintaks Dasar

// Old way
const name = "John";
const greeting = "Hello, " + name + "!";

// Template literals
const greeting = `Hello, ${name}!`;

Implementasi Template Literals

Tambahkan ke js/app.js:

js/app.js

// ----------------------------
// Template Literals
// ----------------------------
export function demoTemplateLiterals() {
  const name = "John";
  const age = 30;

  // String concatenation cara lama
  const oldWay = "Nama saya " + name + " dan umur saya " + age + " tahun.";

  // Template literals (ES6)
  const newWay = `Nama saya ${name} dan umur saya ${age} tahun.`;

  // Template literals multi-baris
  const multiLine = `
    Ini adalah string multi-baris.
    Sangat berguna untuk HTML template.
    Nama: ${name}
    Umur: ${age}
  `;

  // Template literals dengan ekspresi
  const expression = `Tahun lahir: ${new Date().getFullYear() - age}`;

  return {
    oldWay,
    newWay,
    multiLine,
    expression
  };
}

Keuntungan Template Literals

Interpolasi variabel dengan ${}
Multi-line strings tanpa escape character
Expression evaluation di dalam string
Tagged templates untuk pemrosesan string lanjutan

Update main.js

Update js/main.js untuk mengimpor dan menjalankan demo:

js/main.js

// Import demo functions
import { demoVariables, demoArrowFunctions, demoTemplateLiterals } from './app.js';

// Fungsi utama untuk menjalankan semua demo
function runAllDemos() {
  // Demo Let dan Const
  const varResults = demoVariables();
  addOutput(
    "1. Let dan Const",
    "var vs let/const dan block scope",
    `var (function scope): ${varResults.oldVar}
let (block scope): ${varResults.newLet}
const (immutable): ${varResults.PI}
const object (mutable content): ${JSON.stringify(varResults.user)}`
  );

  // Demo Arrow Functions
  const arrowResults = demoArrowFunctions();
  addOutput(
    "2. Arrow Functions",
    "Perbandingan fungsi reguler dan arrow functions",
    `Regular function: ${arrowResults.regularSum}
Arrow function: ${arrowResults.arrowSum}
Short arrow: ${arrowResults.shortArrowSum}
No params: ${arrowResults.sayHello}
Single param: ${arrowResults.square}`
  );

  // Demo Template Literals
  const templateResults = demoTemplateLiterals();
  addOutput(
    "3. Template Literals",
    "String concatenation vs template literals",
    `Old way: ${templateResults.oldWay}
New way: ${templateResults.newWay}
With expression: ${templateResults.expression}
Multi-line: ${templateResults.multiLine}`
  );
}

Testing

Buka index.html di browser dan klik tombol "Run Demo".Kalianseharusnya melihat output dari ketiga demo yang menunjukkan perbedaan antara cara lama dan cara baru menulis JavaScript.

Latihan

Coba ubah nilai const dan lihat error yang muncul
Bandingkan behavior var di dalam dan luar block
Buat arrow function dengan berbagai sintaks
Gunakan template literals untuk membuat HTML string

On this page