Di JavaScript modern, ada tiga cara utama untuk mendeklarasikan variabel: menggunakan `var`, `let`, dan `const`. Masing-masing memiliki karakteristik dan perilaku yang berbeda, terutama terkait dengan **scope (cakupan)** dan **hoisting**.
Tips untuk penamaan variable
questionsAsked bentuk camel.
QuestionsAsked bentuk Pascal.
questions_asked bentuk snake.
QUESTIONS_ASKED bentuk screaming snake biasa juga di gunakan pada varibel const.
`var` adalah cara tradisional untuk mendeklarasikan variabel di JavaScript. Meskipun masih berfungsi, penggunaannya kini tidak terlalu disarankan untuk kode baru karena memiliki beberapa kelemahan dibandingkan `let` dan `const`.
Sintaks:
var namaVariabel;
var namaVariabel = nilaiAwal;
Function Scope : Variabel yang dideklarasikan dengan `var` memiliki cakupan fungsi. Artinya, mereka hanya dapat diakses di dalam fungsi tempat mereka dideklarasikan. Jika dideklarasikan di luar fungsi mana pun, mereka menjadi variabel global.
function contohVarScope() {
var pesan = "Halo dari fungsi!";
console.log(pesan); // Output: Halo dari fungsi!
}
contohVarScope();
// console.log(pesan); // ReferenceError: pesan is not defined
Hoisting : Deklarasi `var` di-hoist ke bagian atas cakupan mereka, dan diinisialisasi dengan `undefined`. Ini berarti Anda bisa mengakses variabel `var` sebelum deklarasinya, tetapi nilainya akan `undefined` sampai baris inisialisasi yang sebenarnya dieksekusi.
console.log(mobil); // Output: undefined
var mobil = "Toyota";
console.log(mobil); // Output: Toyota
Dapat Dideklarasikan Ulang dan Diperbarui : Anda bisa mendeklarasikan ulang variabel `var` dengan nama yang sama dalam cakupan yang sama, dan juga mengubah nilainya kapan saja.
var x = 10;
var x = 20; // Deklarasi ulang diperbolehkan
console.log(x); // Output: 20
x = 30; // Perbarui nilai
console.log(x); // Output: 30
Kelemahan `var`:
Karena sifat `function scope` dan `hoisting` yang kadang membingungkan, `var` bisa menyebabkan bug yang sulit dilacak, terutama dalam blok kode seperti loop `for` atau `if` statement.
`let` diperkenalkan di ES6 (ECMAScript 2015) sebagai alternatif yang lebih baik daripada `var`. Ini mengatasi banyak kelemahan `var`.
Sintaks :
let namaVariabel;
let namaVariabel = nilaiAwal;
Block Scope : Variabel yang dideklarasikan dengan `let` memiliki cakupan blok. Artinya, mereka hanya dapat diakses di dalam blok kode (`{}`) tempat mereka dideklarasikan. Ini termasuk `if` statement, `for` loop, `while` loop, atau bahkan blok kosong.
if (true) {
let angka = 100;
console.log(angka); // Output: 100
}
// console.log(angka); // ReferenceError: angka is not defined
Hoisting (dengan Temporal Dead Zone - TDZ) : Deklarasi `let` juga di-hoist, tetapi tidak diinisialisasi dengan `undefined`. Sebaliknya, mereka ditempatkan dalam "Temporal Dead Zone" (TDZ) dari awal cakupan hingga baris di mana mereka dideklarasikan. Mengakses variabel `let` sebelum deklarasinya akan menghasilkan `ReferenceError`. Ini adalah perilaku yang disengaja untuk membantu mencegah bug.
// console.log(kota); // ReferenceError: Cannot access 'kota' before initialization
let kota = "Jakarta";
console.log(kota); // Output: Jakarta
Tidak Dapat Dideklarasikan Ulang, Dapat Diperbarui : Anda tidak bisa mendeklarasikan ulang variabel `let` dengan nama yang sama dalam cakupan yang sama. Namun, Anda bisa mengubah nilainya kapan saja.
let harga = 50;
// let harga = 60; // SyntaxError: Identifier 'harga' has already been declared
console.log(harga); // Output: 50
harga = 75; // Perbarui nilai
console.log(harga); // Output: 75
`const` juga diperkenalkan di ES6 dan digunakan untuk mendeklarasikan konstanta, yaitu nilai yang tidak boleh berubah setelah ditetapkan.
Sintaks :
const NAMA_KONSTANTA = nilaiAwal; // Penting: Harus langsung diinisialisasi
Block Scope : Sama seperti `let`, `const` memiliki cakupan blok.
function hitungLuasLingkaran(radius) {
const PI = 3.14; // Block scope
let luas = PI * radius * radius;
console.log(luas);
}
hitungLuasLingkaran(5);
// console.log(PI); // ReferenceError: PI is not defined
Hoisting (dengan Temporal Dead Zone - TDZ) : Sama seperti `let`, `const` juga di-hoist dan berada dalam TDZ. Mengaksesnya sebelum deklarasi akan menghasilkan `ReferenceError`.
// console.log(MAX_LIMIT); // ReferenceError: Cannot access 'MAX_LIMIT' before initialization
const MAX_LIMIT = 1000;
console.log(MAX_LIMIT); // Output: 1000
Harus Diinisialisasi Saat Deklarasi:** Anda harus memberikan nilai awal kepada `const` saat mendeklarasikannya. Anda tidak bisa mendeklarasikan `const` tanpa nilai awal.
// const MY_CONSTANT; // SyntaxError: Missing initializer in const declaration
const MY_CONSTANT = "nilai";
Tidak Dapat Dideklarasikan Ulang, Tidak Dapat Diperbarui : Ini adalah karakteristik utama `const`. Setelah nilai ditetapkan, Anda tidak bisa mengubahnya atau mendeklarasikan ulang variabel `const` tersebut.
const NAMA = "Alice";
// NAMA = "Bob"; // TypeError: Assignment to constant variable.
// const NAMA = "Charlie"; // SyntaxError: Identifier 'NAMA' has already been declared
Penting untuk Objek/Array:** Perlu diperhatikan bahwa `const` **tidak membuat nilai yang tidak bisa diubah (immutable)** untuk objek atau array. Ini hanya berarti bahwa **referensi** ke objek/array tidak bisa diubah. Anda masih bisa memodifikasi properti objek atau elemen array.
const user = { name: "Budi", age: 30 };
user.age = 31; // Ini diizinkan (memodifikasi properti objek)
console.log(user); // Output: { name: 'Budi', age: 31 }
// user = { name: "Andi" }; // Ini TIDAK diizinkan (mengubah referensi objek)
**Rekomendasi Terbaik untuk Kode Modern:**
Gunakan `const` secara default.** Jika Anda yakin bahwa nilai variabel tidak akan berubah selama masa pakainya, gunakan `const`. Ini meningkatkan keterbacaan kode dan membantu mencegah bug yang tidak disengaja.
Gunakan `let` jika Anda tahu nilainya akan berubah.** Jika variabel Anda memang perlu diubah (misalnya, penghitung dalam loop, nilai yang diperbarui berdasarkan input pengguna), gunakan `let`.
Hindari `var`.** Kecuali jika Anda bekerja dengan kode lama yang tidak bisa diubah, sebisa mungkin hindari penggunaan `var` untuk kode JavaScript baru.
Scope pada JavaScript adalah **area di mana variabel dan fungsi dapat diakses dan di mana mereka didefinisikan**. Ini menentukan visibilitas variabel dan fungsi dalam kode Anda. 🌐
---
## Tipe-tipe Scope pada JavaScript
JavaScript memiliki beberapa tipe scope utama:
### 1. Global Scope (Cakupan Global)
**Variabel atau fungsi yang dideklarasikan di luar fungsi apa pun atau blok kode disebut berada dalam global scope.** Ini berarti mereka dapat diakses dari mana saja dalam program JavaScript, baik di dalam fungsi, di dalam blok, atau langsung di tingkat teratas skrip.
**Contoh:**
```javascript
const globalVar = "Saya adalah variabel global"; // Variabel global
function greet() {
console.log(globalVar); // Bisa diakses dari dalam fungsi
}
greet(); // Output: Saya adalah variabel global
console.log(globalVar); // Output: Saya adalah variabel global
```
### 2. Local Scope (Cakupan Lokal)
Local scope dapat dibagi lagi menjadi dua jenis:
#### a. Function Scope (Cakupan Fungsi)
**Setiap kali Anda mendeklarasikan variabel dengan `var` di dalam sebuah fungsi, variabel tersebut akan memiliki function scope.** Ini berarti variabel tersebut hanya dapat diakses dari dalam fungsi tersebut. Variabel yang dideklarasikan di dalam satu fungsi tidak akan dapat diakses dari luar fungsi tersebut atau dari fungsi lain.
**Contoh:**
```javascript
function myFunction() {
var functionVar = "Saya berada dalam function scope";
console.log(functionVar); // Bisa diakses di sini
}
myFunction(); // Output: Saya berada dalam function scope
// console.log(functionVar); // ReferenceError: functionVar is not defined (tidak bisa diakses di luar fungsi)
```
[Image of function scope diagram]
#### b. Block Scope (Cakupan Blok)
**Diperkenalkan dengan ES6 (ECMAScript 2015), `let` dan `const` memperkenalkan block scope.** Ini berarti variabel yang dideklarasikan dengan `let` atau `const` di dalam sebuah blok kode (yaitu, di dalam `{}`) hanya dapat diakses di dalam blok tersebut. Blok kode bisa berupa `if` statement, `for` loop, `while` loop, atau sekadar sepasang kurung kurawal `{}`.
**Contoh:**
```javascript
if (true) {
let blockLet = "Saya berada dalam block scope (let)";
const blockConst = "Saya juga dalam block scope (const)";
console.log(blockLet); // Output: Saya berada dalam block scope (let)
console.log(blockConst); // Output: Saya juga dalam block scope (const)
}
// console.log(blockLet); // ReferenceError: blockLet is not defined
// console.log(blockConst); // ReferenceError: blockConst is not defined
```
[Image of block scope diagram]
---
## Nested Scope (Cakupan Bertingkat) dan Scope Chain
Ketika Anda memiliki fungsi di dalam fungsi lain, atau blok di dalam blok lain, Anda menciptakan **nested scope**. JavaScript mencari variabel dalam "scope chain" (rantai scope).
**Bagaimana Scope Chain Bekerja:**
Ketika JavaScript perlu mencari nilai suatu variabel, ia akan mencarinya mulai dari scope terdekat (scope lokal tempat variabel digunakan). Jika tidak ditemukan, ia akan naik satu tingkat ke scope induk (parent scope), dan seterusnya, hingga mencapai global scope. Jika variabel tidak ditemukan bahkan di global scope, maka akan terjadi `ReferenceError`.
**Contoh:**
```javascript
const globalMsg = "Halo"; // Global scope
function outerFunction() {
const outerMsg = "Dunia"; // Function scope (outer)
function innerFunction() {
const innerMsg = "!"; // Function scope (inner)
console.log(globalMsg + " " + outerMsg + innerMsg); // Mengakses variabel dari scope global, outer, dan inner
}
innerFunction();
}
outerFunction(); // Output: Halo Dunia!
```
Dalam contoh di atas, `innerFunction` dapat mengakses `innerMsg` (dari scop-nya sendiri), `outerMsg` (dari scope induknya), dan `globalMsg` (dari global scope).
---
## Pentingnya Memahami Scope
Memahami scope sangat penting untuk:
* **Menghindari Konflik Nama:** Scope membantu mencegah variabel dengan nama yang sama saling bertabrakan dan menimpa nilai satu sama lain.
* **Keamanan Data:** Ini membantu menjaga data tetap privat dan hanya dapat diakses oleh bagian-bagian kode yang membutuhkannya, mengurangi risiko bug.
* **Manajemen Memori:** Variabel di luar scope akan dibersihkan dari memori (garbage collected), membantu mengoptimalkan penggunaan memori aplikasi Anda.
* **Kode yang Lebih Terorganisir:** Dengan memahami scope, Anda dapat menulis kode yang lebih rapi, modular, dan mudah dipelihara.
Secara umum, dalam pengembangan JavaScript modern, **sangat disarankan untuk menggunakan `let` dan `const` daripada `var`** untuk memanfaatkan block scope dan menghindari masalah yang terkait dengan hoisting dan cakupan variabel `var` yang lebih luas.
Hoisting adalah **perilaku di JavaScript di mana deklarasi variabel dan fungsi dipindahkan secara konseptual ke bagian atas (top) dari cakupan (scope) mereka sebelum kode dieksekusi**. Ini berarti Anda bisa menggunakan variabel atau memanggil fungsi sebelum Anda benar-benar mendeklarasikannya di dalam kode Anda. 😮
Namun, penting untuk dipahami bahwa **hanya deklarasi yang di-hoist, bukan inisialisasi**.
### Bagaimana Hoisting Bekerja?
Untuk memahami hoisting, bayangkan JavaScript melakukan dua "pass" saat mengeksekusi kode Anda:
1. **Pass Kompilasi/Parsing:** Pada tahap ini, JavaScript memindai kode Anda dan menemukan semua deklarasi variabel (`var`, `let`, `const`) dan deklarasi fungsi. Deklarasi ini kemudian "dipindahkan" ke bagian atas cakupan mereka.
2. **Pass Eksekusi:** Setelah semua deklarasi di-hoist, barulah kode dieksekusi baris demi baris.
### Perbedaan Hoisting untuk `var`, `let`, `const`, dan Fungsi
Hoisting bekerja secara berbeda tergantung pada bagaimana Anda mendeklarasikan sesuatu:
---
### Hoisting dengan `var`
Variabel yang dideklarasikan dengan `var` akan di-hoist, dan **diinisialisasi dengan `undefined` secara otomatis**. Ini berarti Anda bisa mengakses variabel sebelum deklarasinya, tetapi nilainya akan `undefined` sampai baris inisialisasi yang sebenarnya dieksekusi.
**Contoh:**
```javascript
console.log(nama); // Output: undefined
var nama = "Budi";
console.log(nama); // Output: Budi
```
**Bagaimana JavaScript melihatnya setelah hoisting:**
```javascript
var nama; // Deklarasi di-hoist dan diinisialisasi dengan undefined
console.log(nama); // Output: undefined
nama = "Budi"; // Inisialisasi tetap di tempat aslinya
console.log(nama); // Output: Budi
```
---
### Hoisting dengan `let` dan `const`
Variabel yang dideklarasikan dengan `let` dan `const` juga di-hoist, tetapi **mereka tidak diinisialisasi dengan `undefined`**. Sebaliknya, mereka ditempatkan dalam "Temporal Dead Zone" (TDZ) dari awal cakupan hingga baris di mana mereka dideklarasikan. Mengakses variabel `let` atau `const` sebelum deklarasinya akan menghasilkan `ReferenceError`. 😵
**Contoh `let`:**
```javascript
console.log(usia); // ReferenceError: Cannot access 'usia' before initialization
let usia = 25;
console.log(usia);
```
**Contoh `const`:**
```javascript
console.log(PI); // ReferenceError: Cannot access 'PI' before initialization
const PI = 3.14;
console.log(PI);
```
**Mengapa ini terjadi?** Ini adalah desain yang disengaja untuk membantu pengembang menulis kode yang lebih jelas dan menghindari bug yang sulit ditemukan yang dapat terjadi dengan `var`. TDZ memastikan bahwa Anda tidak secara tidak sengaja menggunakan variabel sebelum nilainya ditetapkan.
---
### Hoisting Fungsi
**Deklarasi fungsi** (function declarations) di-hoist sepenuhnya, yang berarti Anda dapat memanggil fungsi sebelum Anda mendeklarasikannya di dalam kode Anda.
**Contoh:**
```javascript
sayHello(); // Output: Halo dunia!
function sayHello() {
console.log("Halo dunia!");
}
```
**Bagaimana JavaScript melihatnya setelah hoisting:**
```javascript
function sayHello() { // Deklarasi fungsi di-hoist sepenuhnya
console.log("Halo dunia!");
}
sayHello(); // Output: Halo dunia!
```
Namun, **ekspresi fungsi** (function expressions) **tidak di-hoist sepenuhnya**. Hanya variabel tempat ekspresi fungsi disimpan yang di-hoist (seperti `var`, `let`, atau `const`).
**Contoh dengan ekspresi fungsi (`var`):**
```javascript
greet(); // TypeError: greet is not a function (karena greet adalah undefined saat ini)
var greet = function() {
console.log("Salam!");
};
greet(); // Output: Salam!
```
### 1. Menambah (Mengubah) Nilai Variabel Primitif (Angka, String, Boolean)
Untuk tipe data primitif seperti angka, string, atau boolean, "menambah isi" berarti **mengubah nilai variabel tersebut**.
**a. Untuk Angka (Numbers):**
Anda bisa menggunakan operator aritmatika seperti `+`, `-`, `*`, `/`, `%`, atau operator penugasan gabungan (`+=`, `-=`, dll.).
```javascript
let jumlah = 10;
console.log("Nilai awal:", jumlah); // Output: Nilai awal: 10
// Menambah nilai (mengubah)
jumlah = jumlah + 5;
console.log("Setelah ditambah 5:", jumlah); // Output: Setelah ditambah 5: 15
// Menggunakan operator penugasan gabungan (shorthand)
jumlah += 3; // Sama dengan: jumlah = jumlah + 3;
console.log("Setelah ditambah 3 lagi:", jumlah); // Output: Setelah ditambah 3 lagi: 18
// Increment (menambah 1)
jumlah++; // Sama dengan: jumlah = jumlah + 1;
console.log("Setelah increment:", jumlah); // Output: Setelah increment: 19
// Atau bisa juga
jumlah--; // Decrement (mengurangi 1)
console.log("Setelah decrement:", jumlah); // Output: Setelah decrement: 18
```
**b. Untuk String:**
Untuk string, "menambah isi" biasanya berarti **menggabungkan (concatenating)** string baru ke string yang sudah ada. Anda bisa menggunakan operator `+` atau `+=`.
```javascript
let kalimat = "Halo";
console.log("Kalimat awal:", kalimat); // Output: Kalimat awal: Halo
// Menggabungkan string
kalimat = kalimat + " dunia!";
console.log("Setelah digabung:", kalimat); // Output: Setelah digabung: Halo dunia!
// Menggunakan operator penugasan gabungan
kalimat += " Selamat pagi."; // Sama dengan: kalimat = kalimat + " Selamat pagi.";
console.log("Setelah digabung lagi:", kalimat); // Output: Setelah digabung lagi: Halo dunia! Selamat pagi.
```
**c. Untuk Boolean:**
Nilai boolean hanya bisa `true` atau `false`. Anda tidak "menambah isi" boolean, melainkan **mengubahnya** dari satu nilai ke nilai lain.
```javascript
let isAktif = true;
console.log("Status awal:", isAktif); // Output: Status awal: true
// Mengubah nilai
isAktif = false;
console.log("Status setelah diubah:", isAktif); // Output: Status setelah diubah: false
```
---
### 2. Menambah Isi Variabel Non-Primitif (Objek dan Array)
Untuk objek dan array, "menambah isi" berarti **memodifikasi struktur atau konten dari objek/array tersebut**, karena variabelnya sendiri sebenarnya menyimpan referensi ke lokasi memori, bukan nilainya secara langsung.
**a. Untuk Array:**
Anda bisa menambah elemen baru ke dalam array menggunakan berbagai metode:
* **`push()`:** Menambah satu atau lebih elemen di akhir array.
```javascript
let daftarBuah = ["Apel", "Pisang"];
console.log("Awal:", daftarBuah); // Output: Awal: [ 'Apel', 'Pisang' ]
daftarBuah.push("Mangga");
console.log("Setelah push 'Mangga':", daftarBuah); // Output: Setelah push 'Mangga': [ 'Apel', 'Pisang', 'Mangga' ]
daftarBuah.push("Jeruk", "Anggur");
console.log("Setelah push 'Jeruk', 'Anggur':", daftarBuah); // Output: Setelah push 'Jeruk', 'Anggur': [ 'Apel', 'Pisang', 'Mangga', 'Jeruk', 'Anggur' ]
```
* **`unshift()`:** Menambah satu atau lebih elemen di awal array.
```javascript
let daftarAngka = [2, 3];
console.log("Awal:", daftarAngka); // Output: Awal: [ 2, 3 ]
daftarAngka.unshift(1);
console.log("Setelah unshift 1:", daftarAngka); // Output: Setelah unshift 1: [ 1, 2, 3 ]
```
* **Operator Spread (`...`)** atau **`concat()`:** Membuat array baru dengan menambahkan elemen. Ini tidak memodifikasi array asli.
```javascript
let arr1 = [1, 2];
let arr2 = [3, 4];
// Menggunakan spread operator
let arrBaru = [...arr1, ...arr2, 5];
console.log("Array baru dengan spread:", arrBaru); // Output: Array baru dengan spread: [ 1, 2, 3, 4, 5 ]
// Menggunakan concat()
let arrConcat = arr1.concat(arr2, 5);
console.log("Array baru dengan concat():", arrConcat); // Output: Array baru dengan concat(): [ 1, 2, 3, 4, 5 ]
```
* **Menggunakan Indeks:** Menambah elemen pada indeks tertentu (atau memperbarui jika indeks sudah ada).
```javascript
let warna = ["Merah", "Biru"];
warna[2] = "Hijau"; // Menambah di indeks 2
console.log("Setelah menambah dengan indeks:", warna); // Output: Setelah menambah dengan indeks: [ 'Merah', 'Biru', 'Hijau' ]
```
**b. Untuk Objek:**
Anda bisa menambah properti (key-value pair) baru ke objek yang sudah ada:
* **Penugasan langsung (Dot Notation atau Bracket Notation):**
```javascript
let user = {
nama: "Budi",
umur: 30
};
console.log("Objek awal:", user); // Output: Objek awal: { nama: 'Budi', umur: 30 }
// Menambah properti baru menggunakan dot notation
user.kota = "Jakarta";
console.log("Setelah menambah 'kota':", user); // Output: Setelah menambah 'kota': { nama: 'Budi', umur: 30, kota: 'Jakarta' }
// Menambah properti baru menggunakan bracket notation (berguna jika nama properti dinamis atau ada spasi)
user["pekerjaan"] = "Programmer";
console.log("Setelah menambah 'pekerjaan':", user); // Output: Setelah menambah 'pekerjaan': { nama: 'Budi', umur: 30, kota: 'Jakarta', pekerjaan: 'Programmer' }
```
* **Operator Spread (`...`):** Membuat objek baru dengan properti tambahan (tidak memodifikasi objek asli).
```javascript
let produk = {
nama: "Laptop",
harga: 12000000
};
let produkBaru = { ...produk,
stok: 50,
kategori: "Elektronik"
};
console.log("Objek baru dengan spread:", produkBaru);
// Output: { nama: 'Laptop', harga: 12000000, stok: 50, kategori: 'Elektronik' }
```
[Image of JavaScript object spread operator]
---
### Penting: Perilaku `const` dengan Objek dan Array
Ingatlah bahwa ketika Anda mendeklarasikan variabel dengan `const` untuk objek atau array, Anda **tidak dapat menetapkan nilai baru** ke variabel itu sendiri. Namun, Anda **masih bisa memodifikasi properti objek atau elemen array** yang direferensikan oleh variabel `const` tersebut.
```javascript
const daftarBelanja = ["Susu", "Roti"];
// daftarBelanja = ["Telur"]; // TypeError: Assignment to constant variable. (TIDAK BOLEH)
daftarBelanja.push("Kopi"); // Ini BOLEH (memodifikasi isi array)
console.log(daftarBelanja); // Output: [ 'Susu', 'Roti', 'Kopi' ]
const myProfile = {
name: "Jane",
age: 28
};
// myProfile = { name: "Doe" }; // TypeError: Assignment to constant variable. (TIDAK BOLEH)
myProfile.age = 29; // Ini BOLEH (memodifikasi properti objek)
myProfile.city = "Bandung"; // Ini BOLEH (menambah properti baru)
console.log(myProfile); // Output: { name: 'Jane', age: 29, city: 'Bandung' }
```
Memahami cara kerja `const` dengan objek dan array sangat penting untuk menghindari kebingungan dan menulis kode yang benar!
Tentu, mari kita bahas cara mengisi variabel pada variabel lain, cara menulis karakter khusus, dan cara menulis string panjang di JavaScript. Kita juga akan sertakan beberapa contoh unik.
---
## 1. Mengisi Variabel dengan Nilai dari Variabel Lain
Ini adalah salah satu operasi dasar dalam pemrograman: mengambil nilai dari satu variabel dan menyalinnya ke variabel lain.
**Cara Kerjanya:**
Anda cukup menggunakan operator penugasan (`=`). Nilai dari variabel di sisi kanan akan disalin ke variabel di sisi kiri.
**Contoh:**
```javascript
let namaDepan = "Alice";
let namaLengkap = namaDepan; // Mengisi namaLengkap dengan nilai dari namaDepan
console.log(namaLengkap); // Output: Alice
namaLengkap = namaLengkap + " Wonderland"; // Menambahkan ke namaLengkap
console.log(namaLengkap); // Output: Alice Wonderland
// Perhatikan: namaDepan tidak berubah
console.log(namaDepan); // Output: Alice
```
**Kasus Unik: Referensi Objek/Array (bukan hanya nilai)**
Saat Anda mengisi variabel objek atau array dengan variabel objek/array lain, Anda tidak menyalin *nilai* objek/array itu sendiri, melainkan **referensinya**. Ini berarti kedua variabel akan menunjuk ke lokasi memori yang sama. Jika Anda mengubah objek/array melalui salah satu variabel, perubahan itu akan terlihat melalui variabel yang lain juga.
```javascript
let originalArray = [1, 2, 3];
let copiedArray = originalArray; // copiedArray sekarang mereferensikan originalArray
console.log("Original:", originalArray); // Output: Original: [ 1, 2, 3 ]
console.log("Copied:", copiedArray); // Output: Copied: [ 1, 2, 3 ]
copiedArray.push(4); // Mengubah melalui copiedArray
console.log("Original setelah push di copied:", originalArray); // Output: Original setelah push di copied: [ 1, 2, 3, 4 ]
console.log("Copied setelah push:", copiedArray); // Output: Copied setelah push: [ 1, 2, 3, 4 ]
// Jika Anda ingin menyalin nilai (bukan referensi) untuk array/objek, gunakan:
// 1. Spread operator (`...`)
let trueCopyArray = [...originalArray];
trueCopyArray.push(5);
console.log("Original setelah push di trueCopy:", originalArray); // Output: Original setelah push di trueCopy: [ 1, 2, 3, 4 ]
console.log("True Copy:", trueCopyArray); // Output: True Copy: [ 1, 2, 3, 4, 5 ]
// 2. JSON.parse(JSON.stringify()) untuk deep copy (hati-hati dengan tipe data tertentu)
let originalObj = { a: 1, b: { c: 2 } };
let deepCopyObj = JSON.parse(JSON.stringify(originalObj));
deepCopyObj.b.c = 99;
console.log("Original Obj:", originalObj); // Output: Original Obj: { a: 1, b: { c: 2 } }
console.log("Deep Copy Obj:", deepCopyObj); // Output: Deep Copy Obj: { a: 1, b: { c: 99 } }
```
[Image of JavaScript object reference vs copy]
---
## 2. Penulisan Karakter Khusus pada Variabel (Escape Sequences)
Terkadang Anda perlu menyertakan karakter yang memiliki makna khusus dalam string (seperti tanda kutip) atau karakter non-cetak (seperti baris baru atau tab). Untuk melakukan ini, Anda menggunakan **escape sequences**, yang dimulai dengan `\` (backslash).
**Beberapa Escape Sequences Umum:**
* `\'` : Tanda kutip tunggal
* `\"` : Tanda kutip ganda
* `\\` : Backslash
* `\n` : Baris baru (newline)
* `\t` : Tab
* `\b` : Backspace
* `\r` : Carriage return
* `\uXXXX` : Karakter Unicode (XXXX adalah kode heksadesimal)
* `\xXX` : Karakter ASCII/Latin-1 (XX adalah kode heksadesimal)
**Contoh:**
```javascript
let kutipanGanda = "Dia berkata, \"Ini adalah hari yang indah!\"";
console.log(kutipanGanda); // Output: Dia berkata, "Ini adalah hari yang indah!"
let kutipanTunggal = 'Dia berkata, \'Mari kita pergi.\'';
console.log(kutipanTunggal); // Output: Dia berkata, 'Mari kita pergi.'
let pathFile = "C:\\Users\\Dokumen\\file.txt"; // Untuk backslash literal
console.log(pathFile); // Output: C:\Users\Dokumen\file.txt
let pesanBarisBaru = "Baris pertama.\nBaris kedua."; // Baris baru
console.log(pesanBarisBaru);
/* Output:
Baris pertama.
Baris kedua.
*/
let pesanTab = "Kolom1\tKolom2\tKolom3"; // Tab
console.log(pesanTab); // Output: Kolom1 Kolom2 Kolom3
let simbolHati = "Saya suka JavaScript \u2764"; // Unicode untuk hati
console.log(simbolHati); // Output: Saya suka JavaScript ❤
```
---
## 3. Penulisan String yang Panjang untuk Isi Variabel
Ada beberapa cara efektif untuk menangani string yang sangat panjang agar kode tetap rapi dan mudah dibaca.
**a. Menggunakan Operator Penjumlahan (`+`) untuk Concatenation:**
Ini adalah cara yang umum, tetapi bisa menjadi berantakan untuk string yang sangat panjang.
```javascript
let paragrafPendek = "Ini adalah bagian pertama dari paragraf. " +
"Ini adalah bagian kedua dari paragraf. " +
"Dan ini adalah bagian terakhirnya.";
console.log(paragrafPendek);
```
**b. Menggunakan Template Literals (Backticks `` ` ``):**
Ini adalah cara modern dan sangat direkomendasikan karena memungkinkan Anda menulis string multi-baris secara langsung dan melakukan interpolasi variabel dengan mudah.
```javascript
let namaProduk = "Laptop Gaming";
let hargaProduk = 15000000;
let deskripsiProduk = `
Produk: ${namaProduk}
Harga: Rp${hargaProduk.toLocaleString('id-ID')}
Ini adalah ${namaProduk} terbaru dengan spesifikasi tinggi.
Cocok untuk gamer profesional dan pekerja kreatif.
Dilengkapi dengan kartu grafis RTX terbaru.
`;
console.log(deskripsiProduk);
/* Output:
Produk: Laptop Gaming
Harga: Rp15.000.000
Ini adalah Laptop Gaming terbaru dengan spesifikasi tinggi.
Cocok untuk gamer profesional dan pekerja kreatif.
Dilengkapi dengan kartu grafis RTX terbaru.
*/
```
**Keunggulan Template Literals:**
* **Multi-line Strings:** Anda bisa menulis string di beberapa baris tanpa perlu karakter escape `\n`.
* **Interpolasi Ekspresi:** Anda bisa langsung menyisipkan variabel atau ekspresi JavaScript di dalam string menggunakan `${}`.
**c. Menggunakan Array dan `join()` (untuk kasus sangat panjang atau dinamis):**
Untuk string yang sangat panjang atau string yang dibangun secara dinamis dari banyak bagian, Anda bisa menyimpan bagian-bagiannya dalam array lalu menggabungkannya.
```javascript
let bagianParagraf = [
"Pada suatu hari di sebuah desa kecil,",
"hidup seorang pengrajin kayu yang sangat terampil.",
"Setiap hari ia membuat ukiran indah dari kayu.",
"Karyanya selalu memukau setiap orang yang melihatnya."
];
let paragrafPanjang = bagianParagraf.join(" "); // Gabungkan dengan spasi sebagai pemisah
console.log(paragrafPanjang);
// Output: Pada suatu hari di sebuah desa kecil, hidup seorang pengrajin kayu yang sangat terampil. Setiap hari ia membuat ukiran indah dari kayu. Karyanya selalu memukau setiap orang yang melihatnya.
// Atau gabungkan dengan baris baru untuk format teks
let daftarItem = ["Item A", "Item B", "Item C"];
let daftarTeks = "Daftar:\n" + daftarItem.join("\n- ");
console.log(daftarTeks);
/* Output:
Daftar:
- Item A
- Item B
- Item C
*/
```
---
## Contoh Unik Menggunakan Variabel
### 1. Swap Variabel Tanpa Variabel Sementara
Sebelum ES6, untuk menukar nilai dua variabel, Anda biasanya memerlukan variabel ketiga. Sekarang, Anda bisa menggunakan **array destructuring**.
```javascript
let a = 5;
let b = 10;
console.log(`Sebelum swap: a = ${a}, b = ${b}`); // Output: Sebelum swap: a = 5, b = 10
[a, b] = [b, a]; // Swapping magic!
console.log(`Setelah swap: a = ${a}, b = ${b}`); // Output: Setelah swap: a = 10, b = 5
```
### 2. Default Values dalam Destructuring
Saat Anda mendekonstruksi objek atau array, Anda bisa memberikan nilai default jika properti/elemen tersebut tidak ada.
```javascript
const userProfile = {
username: "coderkita",
email: "coder@example.com"
// city: undefined // Bayangkan properti city tidak ada atau undefined
};
// Memberikan nilai default 'Tidak Diketahui' untuk city
const { username, email, city = "Tidak Diketahui" } = userProfile;
console.log(`Username: ${username}`); // Output: Username: coderkita
console.log(`Email: ${email}`); // Output: Email: coder@example.com
console.log(`Kota: ${city}`); // Output: Kota: Tidak Diketahui (karena tidak ada di userProfile)
const [first, second, third = "DefaultItem"] = [1, 2];
console.log(first, second, third); // Output: 1 2 DefaultItem
```
### 3. Menggunakan Variabel untuk Nama Properti Objek (Computed Property Names)
Anda bisa menggunakan variabel untuk menentukan nama properti objek saat mendefinisikannya.
```javascript
let key1 = "namaProduk";
let key2 = "stokTersedia";
let produkBaru = {
[key1]: "Smart TV", // Menggunakan nilai variabel key1 sebagai nama properti
harga: 8000000,
[key2]: 15 // Menggunakan nilai variabel key2 sebagai nama properti
};
console.log(produkBaru);
// Output: { namaProduk: 'Smart TV', harga: 8000000, stokTersedia: 15 }
```
### 4. Shadowing Variabel (Penyembunyian Variabel)
Ini adalah kasus di mana variabel di scope dalam "menyembunyikan" variabel dengan nama yang sama di scope luar. Ini bukan "error", tetapi perilaku yang harus dipahami.
```javascript
let x = 10; // Variabel global
function contohShadowing() {
let x = 20; // Variabel lokal ini menyembunyikan variabel global 'x'
console.log("Di dalam fungsi, x =", x); // Output: Di dalam fungsi, x = 20
}
contohShadowing();
console.log("Di luar fungsi, x =", x); // Output: Di luar fungsi, x = 10 (variabel global tidak terpengaruh)
// Kasus unik lain:
if (true) {
let y = "saya di blok if";
// console.log(y); // Output: saya di blok if
}
// let y = "saya di luar blok if"; // SyntaxError: Identifier 'y' has already been declared (jika sudah dideklarasikan di scope yang sama)
// Var punya perilaku beda, tidak ada block scope:
var z = 10;
if (true) {
var z = 20; // Ini REDECLARATION dari z yang sama, bukan variabel baru di blok
console.log("Di dalam if, z =", z); // Output: Di dalam if, z = 20
}
console.log("Di luar if, z =", z); // Output: Di luar if, z = 20 (variabel z global telah diubah)
```
Semoga penjelasan dan contoh-contoh unik ini memberikan pemahaman yang lebih dalam tentang cara mengisi dan bekerja dengan variabel di JavaScript! Adakah bagian lain yang ingin Anda jelajahi lebih lanjut?