Halo teman-teman! Kali ini kita bakal mulai petualangan seru di dunia JavaScript, khususnya ngomongin soal variable dan data types. Tenang aja, semua akan dijelasin dengan bahasa yang gampang dimengerti, bahkan kalau kamu baru pertama kali nyentuh kode sekalipun.
Apa Sih Variable Itu?
Bayangin kamu lagi pindahan rumah. Kamu punya banyak banget barang yang harus dibawa kan? Nah, biar rapi dan gampang nyarinya nanti, pasti barang-barang itu dimasukin ke dalam kardus atau box. Setiap box dikasih label, misalnya "buku", "pakaian", atau "peralatan dapur". Nah, di JavaScript, variable itu kayak box-box tadi.
Variable adalah tempat atau container buat nyimpen data di dalam program kita. Data itu bisa macem-macem, mulai dari angka, teks, sampe nilai true atau false. Dengan adanya variable, kita bisa nyimpen informasi dan dipake lagi kapan aja kita butuh.
Misalnya gini, kalau pengen nyimpen nama user yang lagi login ke website. Daripada nulis nama itu berkali-kali di kode, mending simpen aja di sebuah variable, terus tinggal panggil variable-nya kapan dibutuhkan. Simpel kan?
Konsepnya tuh simple banget sebenernya. Variable itu punya:
- Nama (label box-nya)
- Nilai (isi box-nya)
- Tipe data (jenis barang yang ada di box)
Jadi mirip banget sama box analogy tadi. Kasih nama ke box, isi dengan sesuatu, dan kita tau apa yang ada di dalemnya.
Setup Environment Dulu Yuk
Sebelum kita mulai ngoding, ada baiknya kita setup dulu environment-nya. Tenang, ga ribet kok! Cuma butuh dua hal:
1. Browser Console
Ini cara paling gampang buat ngetes kode JavaScript. Tinggal buka browser (Chrome, Firefox, atau Edge), terus:
- Klik kanan di halaman manapun
- Pilih "Inspect" atau "Inspect Element"
- Cari tab "Console"
Boom! Udah punya tempat buat ngetik kode JavaScript langsung. Coba deh ketik console.log("Hello World") terus enter. Kalau muncul tulisan "Hello World", berarti setup udah bener.
2. File HTML + JavaScript
Cara yang lebih proper adalah bikin file HTML dan JavaScript terpisah. Ini lebih profesional dan biasanya dipake buat project beneran. Caranya gampang:
Pertama, bikin file index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Belajar JavaScript Variable</title>
</head>
<body>
<h1>Belajar Variable JavaScript</h1>
<!-- Link ke file JavaScript kita -->
<script src="script.js"></script>
</body>
</html>
Terus bikin file script.js di folder yang sama:
// File JavaScript kita
console.log("JavaScript sudah terkoneksi!");
Sekarang tinggal buka file index.html di browser, terus buka console-nya. Kalau terlihat tulisan "JavaScript sudah terkoneksi!", berarti semuanya udah jalan dengan baik.
Tips: Pribadi lebih suka pake cara yang kedua (file terpisah) karena lebih terorganisir dan gampang di-maintain kalau project-nya mulai gede. Tapi buat eksperimen cepet atau testing kode, browser console juga oke banget.
Untuk editor kode, bisa pake VS Code (recommended), Sublime Text, atau editor apapun yang disukai. Yang penting nyaman aja.
Kenapa Harus Pake Variable?
Mungkin bertanya-tanya, "Emang kenapa sih harus pake variable? Kan bisa aja langsung tulis nilai-nya?"
Nah, coba bayangin lagi bikin website toko online. Di website itu, nama user muncul di 10 tempat berbeda: header, sidebar, halaman profile, dll. Kalau ga pake variable, harus nulis nama user itu 10 kali. Capek kan?
Sekarang bayangin kalau user-nya ganti nama. Harus update 10 tempat! Ribet banget. Tapi kalau pake variable, cukup update satu kali aja, dan semua tempat yang pake variable itu bakal otomatis berubah. Efisien!
Selain itu, variable juga bikin kode jadi lebih:
- Readable: Orang lain (atau diri sendiri 3 bulan kemudian) bisa langsung ngerti maksud kode-nya
- Maintainable: Gampang di-update dan di-debug
- Reusable: Nilai yang sama bisa dipake di banyak tempat tanpa nulis ulang
Jadi intinya, variable itu fundamental banget di programming. Tanpa variable, bakal kesusahan bikin program yang kompleks.
Deklarasi Variable: const, let, dan var
Sekarang kita udah paham apa itu variable dan kenapa penting banget dipake. Saatnya praktek bikin variable beneran di JavaScript. Ada tiga cara buat deklarasi variable: const, let, dan var. Masing-masing punya karakteristik dan use case yang berbeda.
Bayangin variable itu kayak contract atau perjanjian. Ada contract yang sifatnya permanen dan ga bisa diubah, ada yang flexible dan bisa direnegosiasi kapan aja. Nah, di JavaScript, kita punya tiga jenis "contract" ini:
- const: Contract permanen, sekali ditandatangani ga bisa diubah
- let: Contract flexible, bisa diubah sesuai kebutuhan
- var: Contract jadul yang sebaiknya ga dipake lagi
Sebelum tahun 2015, programmer JavaScript cuma punya satu pilihan yaitu var. Tapi sejak ES6 (ECMAScript 2015) keluar, kita dikasih dua opsi baru yang lebih baik: const dan let. Kedua ini ngefix banyak masalah yang ada di var.
Menggunakan const: Variable yang Setia
const adalah singkatan dari "constant" atau konstan. Sesuai namanya, variable yang dibuat pake const itu sifatnya tetap dan ga bisa di-reassign atau diganti nilainya setelah pertama kali dikasih nilai.
const userName = "Budi Santoso";
console.log(userName); // Output: Budi Santoso
// Coba ubah nilai-nya
userName = "Ani Wijaya"; // Error! Assignment to constant variable
Kalau kamu coba jalanin kode di atas, bakal muncul error. Kenapa? Karena const itu protektif banget sama nilai yang udah dikasih ke dia. Sekali dikasih, ga bisa diubah lagi.
Kapan Pake const?
Gunakan const sebagai pilihan default setiap kali bikin variable baru. Kenapa? Karena:
- Mencegah bugs: Nilai yang ga sengaja keubah itu sumber bug yang paling sering terjadi
- Lebih mudah dibaca: Orang yang baca kode langsung tau kalau nilai ini ga akan berubah
- Performance: JavaScript engine bisa optimasi kode lebih baik
Contoh penggunaan yang tepat:
const PI = 3.14159;
const APP_NAME = "My Awesome App";
const MAX_USERS = 100;
const apiUrl = "<https://api.example.com>";
Penting Diingat: const itu cuma mencegah re-assignment, bukan membuat nilai-nya immutable. Kalau const-nya berisi object atau array, kita masih bisa ubah isi dalemnya:
const user = {
name: "Budi",
age: 25
};
// Ini boleh, karena kita ubah isi object-nya, bukan reassign variable-nya
user.age = 26;
user.city = "Jakarta";
console.log(user); // { name: "Budi", age: 26, city: "Jakarta" }
// Tapi ini ga boleh
user = { name: "Ani" }; // Error!
Menggunakan let: Variable yang Fleksibel
Kalau const itu kaku, let adalah kebalikannya. Variable yang dibuat pake let bisa diubah nilainya kapan aja kita mau.
let score = 0;
console.log(score); // Output: 0
score = 10;
console.log(score); // Output: 10
score = 25;
console.log(score); // Output: 25
Lihat? Ga ada error sama sekali. let ngasih kebebasan buat mengubah nilai variable sesuai kebutuhan.
Kapan Pake let?
Gunakan let kalau memang nilai variable-nya bakal berubah selama program berjalan. Contoh kasusnya:
- Counter atau Loop
let counter = 0;
for (let i = 0; i < 5; i++) {
counter++;
}
console.log(counter); // 5
- Kondisi yang Berubah
let userStatus = "offline";
// User login
userStatus = "online";
// User idle
userStatus = "away";
- Accumulator
let total = 0;
const prices = [10000, 25000, 15000];
for (let i = 0; i < prices.length; i++) {
total += prices[i];
}
console.log(total); // 50000
Hindari var: The Old Way
Dulu, sebelum const dan let muncul, semua programmer JavaScript pake var buat bikin variable. Tapi sekarang, var udah dianggap legacy atau cara lama yang sebaiknya dihindari.
var oldWay = "Ini cara jadul";
var oldWay = "Bisa dideklarasi ulang!"; // Ga error, tapi berbahaya
Kenapa Hindari var?
Ada beberapa masalah serius dengan var:
- Function Scope vs Block Scope
var punya function scope, sementara let dan const punya block scope. Ini bikin var kadang berperilaku aneh:
if (true) {
var x = 10;
let y = 20;
}
console.log(x); // 10 (masih bisa diakses!)
console.log(y); // Error: y is not defined
Lihat masalahnya? Variable x yang dibuat pake var bisa diakses di luar block if. Ini bisa bikin bug yang susah dilacak.
- Hoisting yang Membingungkan
console.log(nama); // undefined (bukan error!)
var nama = "Budi";
console.log(umur); // Error: Cannot access before initialization
let umur = 25;
var di-hoist (diangkat) ke atas scope, tapi nilainya belum di-assign. Ini bikin behavior yang unpredictable.
- Bisa Re-declare
var user = "Budi";
var user = "Ani"; // Ga error, tapi ini berbahaya
let admin = "Susi";
let admin = "Rudi"; // Error: Identifier already declared
Dengan var, kita bisa ga sengaja deklarasi ulang variable yang sama tanpa ada warning. Bahaya banget kan?
Best Practice: const > let > var
Ini adalah aturan emas yang harus diingat:
1. Default ke const
Selalu mulai dengan const. Ini akan memaksa kita mikir apakah nilai ini memang harus bisa berubah atau tidak.
const userName = "Budi";
const userEmail = "[email protected]";
const isActive = true;
2. Pake let kalau memang perlu
Kalau setelah dipikir ternyata nilai-nya harus berubah, baru switch ke let.
let loginAttempts = 0;
let currentPage = 1;
let isLoading = false;
3. Jangan pake var
Seriously, forget about var. Kecuali kamu maintain kode lama yang masih pake var, ga ada alasan buat pake var di kode baru.
// ❌ Jangan
var legacyCode = "Please don't";
// ✅ Gunakan ini
const modernCode = "Much better!";
Perbandingan Lengkap
Biar lebih jelas, ini perbandingan ketiga-tiganya:
| Fitur | const | let | var |
|---|---|---|---|
| Re-assign | ❌ Tidak bisa | ✅ Bisa | ✅ Bisa |
| Re-declare | ❌ Tidak bisa | ❌ Tidak bisa | ✅ Bisa |
| Scope | Block | Block | Function |
| Hoisting | Ya (temporal dead zone) | Ya (temporal dead zone) | Ya (undefined) |
| Recommended | ✅ Default choice | ✅ When needed | ❌ Avoid |
Contoh Real-World
Mari kita lihat contoh penggunaan di aplikasi nyata:
// Configuration (ga akan berubah)
const API_BASE_URL = "<https://api.myapp.com>";
const MAX_RETRY = 3;
const TIMEOUT = 5000;
// User state (akan berubah)
let isLoggedIn = false;
let retryCount = 0;
let currentUser = null;
// Login function
function login(username, password) {
// Temporary variable untuk process
let isValid = validateCredentials(username, password);
if (isValid) {
isLoggedIn = true;
currentUser = username;
return true;
}
retryCount++;
return false;
}
// Jangan gunakan var!
// var globalVariable = "Bad practice";
Perhatikan gimana kita pake const untuk values yang fix seperti configuration, dan let untuk state yang bisa berubah seperti login status.
Tips Praktis
- Mulai dengan const, upgrade ke let kalau perlu Jangan langsung mikir "ah ini mungkin bakal berubah, pake
letaja deh". Mulai dariconst, kalau ternyata error karena butuh reassign, baru ganti kelet. - Nama variable yang jelas Apapun keyword yang dipake, nama variable harus jelas:
const u = "Budi"; // ❌ Kurang jelas const userName = "Budi"; // ✅ Lebih baik - Konsisten dalam satu project Kalau team sudah sepakat pake
constdanlet, jangan ada yang tiba-tiba pakevarlagi. - Jangan takut refactor Kalau nemu
vardi kode lama, refactor pelan-pelan jadiconstataulet. Tapi test dulu sebelum deploy!
Latihan
Coba tebak, mana yang error dan mana yang jalan:
// 1
const price = 10000;
price = 15000;
// 2
let quantity = 5;
quantity = 10;
// 3
const product = { name: "Laptop" };
product.name = "Notebook";
// 4
let total;
total = 50000;
// 5
const user;
user = "Budi";
Jawaban:
- ❌ Error (const ga bisa di-reassign)
- ✅ Jalan (let bisa di-reassign)
- ✅ Jalan (ubah property object, bukan reassign)
- ✅ Jalan (let bisa diinisialisasi nanti)
- ❌ Error (const harus langsung dikasih nilai)
Naming Convention: Kasih Nama yang Bener
Oke, sekarang kita udah tau cara bikin variable pake const, let, atau var. Tapi tunggu dulu, ada satu hal penting lagi yang sering diabaikan sama pemula: cara kasih nama variable.
Mungkin kamu mikir, "Ah, nama variable mah bebas, yang penting jalan". Well, technically bener sih. Tapi coba bayangin kamu baca kode orang lain yang isinya variable bernama x, y, abc, data1, data2. Pusing kan? Ga ngerti maksudnya apa.
Naming convention atau aturan penamaan itu penting banget buat bikin kode yang readable dan maintainable. Ini investasi jangka panjang yang bakal ngasih banyak keuntungan.
camelCase: The JavaScript Standard
Di dunia JavaScript, camelCase adalah standar yang paling umum dipake buat variable dan function. Format-nya simple: huruf pertama kecil, terus setiap kata baru dimulai dengan huruf kapital.
const userName = "Budi Santoso";
const userAge = 25;
const isLoggedIn = true;
const totalPrice = 150000;
const shoppingCartItems = [];
Kenapa dinamain camelCase? Karena bentuknya mirip punuk unta (camel). Huruf kapital di tengah kata itu kayak punuk-nya.
Kapan Pake camelCase?
Gunakan camelCase untuk:
- Variable biasa
- Function names
- Object properties
- Method names
// Variable
const firstName = "Andi";
const lastName = "Wijaya";
// Function
function calculateTotal(price, quantity) {
return price * quantity;
}
// Object
const userProfile = {
fullName: "Budi Santoso",
emailAddress: "[email protected]",
phoneNumber: "08123456789"
};
Tips: Bikin nama yang jelas maksudnya. Jangan const un = "Budi", tapi const userName = "Budi". Nama yang jelas akan sangat membantu saat debugging atau saat orang lain baca kode kamu.
PascalCase: Untuk Class dan Constructor
PascalCase mirip dengan camelCase, bedanya huruf pertama juga kapital. Format ini khusus dipake buat class atau constructor function.
class UserAccount {
constructor(name, email) {
this.name = name;
this.email = email;
}
}
class ShoppingCart {
constructor() {
this.items = [];
}
addItem(item) {
this.items.push(item);
}
}
// Constructor function (cara lama)
function ProductItem(name, price) {
this.name = name;
this.price = price;
}
Dengan PascalCase, orang yang baca kode langsung tau "oh ini class" atau "ini constructor function". Jadi ada perbedaan yang jelas antara regular function dan class.
Contoh Penggunaan:
// ✅ Benar
class DatabaseConnection {
connect() {
// kode koneksi
}
}
const ProductManager = class {
// implementasi
};
// ❌ Salah
class databaseConnection { } // harusnya PascalCase
const productmanager = class { }; // harusnya PascalCase
UPPER_CASE: Untuk Constant Values
Kalau kamu punya nilai yang bener-bener constant dan ga akan pernah berubah sepanjang aplikasi berjalan, gunakan UPPER_CASE dengan underscore sebagai pemisah kata.
const API_KEY = "abc123xyz789";
const MAX_LOGIN_ATTEMPTS = 3;
const DATABASE_URL = "<https://db.example.com>";
const DEFAULT_TIMEOUT = 5000;
const PI = 3.14159;
Ini biasanya dipake buat:
- Configuration values
- API keys
- Environment variables
- Mathematical constants
- Maximum/minimum values
Bedain dengan const biasa:
// UPPER_CASE: nilai yang truly constant
const MAX_USERS = 100;
const API_BASE_URL = "<https://api.example.com>";
// camelCase: variable yang kebetulan pake const
const userName = "Budi"; // ini value-nya bisa beda tiap user
const currentPage = 1; // ini value-nya kontekstual
Jadi intinya, const sebagai keyword beda dengan constant sebagai konsep. UPPER_CASE dipake buat constant yang bener-bener universal dan fixed.
Hindari Single Letter (Kecuali Loop)
Salah satu kesalahan umum pemula adalah pake single letter buat nama variable. Jangan gitu ya!
// ❌ Hindari ini
const n = "Budi";
const a = 25;
const x = true;
const y = calculateSomething();
Kode di atas technically bener, tapi orang yang baca (termasuk kamu sendiri besok-besok) bakal bingung. Apa maksud n? Apa itu x? Kenapa y?
// ✅ Lebih baik
const name = "Budi";
const age = 25;
const isActive = true;
const totalAmount = calculateSomething();
Pengecualian: Loop Counter
Single letter boleh dipake buat loop counter, karena udah jadi konvensi universal:
// Ini oke
for (let i = 0; i < 10; i++) {
console.log(i);
}
// Nested loop
for (let i = 0; i < rows; i++) {
for (let j = 0; j < cols; j++) {
matrix[i][j] = 0;
}
}
// Array iteration
const numbers = [1, 2, 3, 4, 5];
for (let i = 0; i < numbers.length; i++) {
console.log(numbers[i]);
}
Huruf yang umum dipake: i, j, k untuk loop counter. Ini udah standar di hampir semua bahasa pemrograman.
Deskriptif Lebih Penting dari Singkat
Banyak pemula yang terlalu peduli sama panjang nama variable. Mereka mikir nama yang pendek itu lebih efisien atau lebih keren. Big mistake!
// ❌ Terlalu singkat, ga jelas
const usr = "Budi";
const qty = 5;
const amt = 25000;
const dt = new Date();
// ✅ Deskriptif, jelas maksudnya
const userName = "Budi";
const quantity = 5;
const totalAmount = 25000;
const createdDate = new Date();
Kenapa deskriptif lebih penting?
- Kode dibaca lebih sering daripada ditulis Kamu nulis kode sekali, tapi baca berkali-kali saat debugging atau maintenance. Nama yang jelas akan menghemat waktu jangka panjang.
- Self-documenting code Kode yang punya nama variable jelas ga butuh banyak comment buat jelasin maksudnya.
- Ngurangin bugs Nama yang jelas mengurangi kemungkinan salah pake variable.
Contoh Real-World:
// ❌ Susah dimengerti
function calc(a, b, c) {
const r = a * b;
const t = r + (r * c);
return t;
}
// ✅ Jelas maksudnya
function calculateTotalPrice(price, quantity, taxRate) {
const subtotal = price * quantity;
const total = subtotal + (subtotal * taxRate);
return total;
}
Lihat bedanya? Function kedua langsung jelas tanpa perlu mikir keras atau baca dokumentasi.
Nama Variable yang Baik
Berikut beberapa tips bikin nama variable yang baik:
1. Gunakan Bahasa Inggris
Konsisten pake bahasa Inggris, jangan campur-campur:
// ❌ Campur-campur
const namaUser = "Budi";
const userUmur = 25;
// ✅ Konsisten
const userName = "Budi";
const userAge = 25;
2. Boolean Gunakan Prefix is/has/can
Buat variable boolean, pake prefix yang jelas:
const isActive = true;
const hasPermission = false;
const canEdit = true;
const isLoading = false;
const hasError = true;
Dengan cara ini, langsung ketahuan kalau ini boolean tanpa perlu cek tipe datanya.
3. Array Gunakan Plural Form
Kalau variable-nya berisi array atau collection, gunakan bentuk jamak:
const users = ["Budi", "Ani", "Rina"];
const products = [];
const orderItems = [item1, item2, item3];
const errorMessages = ["Error 1", "Error 2"];
4. Function Mulai dengan Verb
Function biasanya melakukan action, jadi mulai dengan kata kerja:
function getUser() { }
function setUserName() { }
function calculateTotal() { }
function validateEmail() { }
function fetchData() { }
function handleClick() { }
5. Hindari Abbreviation yang Ga Jelas
// ❌ Ga jelas
const msg = "Hello";
const btn = document.querySelector("button");
const req = fetchData();
// ✅ Lebih baik
const message = "Hello";
const button = document.querySelector("button");
const request = fetchData();
// ✅ Abbreviation yang umum boleh
const id = 123; // umum dan jelas
const url = "<https://example.com>"; // semua orang tau
const html = "<div>Hello</div>"; // standar
Contoh Kombinasi yang Benar
Mari kita lihat contoh aplikasi kecil dengan naming convention yang benar:
// Constants
const MAX_LOGIN_ATTEMPTS = 3;
const API_BASE_URL = "<https://api.example.com>";
const DEFAULT_LANGUAGE = "id";
// Class
class UserAuthentication {
constructor(apiUrl) {
this.apiUrl = apiUrl;
this.isAuthenticated = false;
this.loginAttempts = 0;
}
async validateCredentials(userName, password) {
// implementasi validasi
const isValid = await this.checkPassword(userName, password);
return isValid;
}
incrementLoginAttempts() {
this.loginAttempts++;
}
}
// Regular variables and functions
const currentUser = null;
let isLoading = false;
const errorMessages = [];
function handleLoginSubmit(event) {
event.preventDefault();
const userEmail = document.getElementById("email").value;
const userPassword = document.getElementById("password").value;
if (validateInputs(userEmail, userPassword)) {
processLogin(userEmail, userPassword);
}
}
function validateInputs(email, password) {
const hasEmail = email.length > 0;
const hasPassword = password.length >= 8;
return hasEmail && hasPassword;
}
Perhatiin gimana setiap nama variable, function, dan class punya pattern yang jelas dan konsisten.
Common Mistakes
Berikut kesalahan umum yang sering terjadi:
1. Inkonsisten
// ❌ Campur-campur style
const user_name = "Budi"; // snake_case
const UserAge = 25; // PascalCase
const ISACTIVE = true; // all caps tapi bukan constant
2. Terlalu Generik
// ❌ Terlalu umum
const data = fetchAPI();
const result = calculate();
const temp = getValue();
// ✅ Lebih spesifik
const userData = fetchAPI();
const calculationResult = calculate();
const temporaryValue = getValue();
3. Typo atau Salah Eja
// ❌ Typo
const usrName = "Budi"; // harusnya userName
const mesage = "Hello"; // harusnya message
const caculateTotal = () => { }; // harusnya calculate
// Ini bahaya karena ga akan error, tapi bikin bingung
Practice Makes Perfect
Naming convention ini butuh latihan. Di awal mungkin terasa ribet atau lambat, tapi lama-lama bakal jadi kebiasaan natural. Kunci-nya adalah konsistensi.
Setiap kali bikin variable baru, tanya diri sendiri:
- Apakah nama ini jelas maksudnya?
- Apakah mengikuti convention yang benar?
- Apakah orang lain bisa langsung ngerti tanpa penjelasan?
Kalau jawaban-nya iya semua, berarti kamu udah on the right track!
Tipe Data Primitive di JavaScript
Sekarang kita udah bisa bikin variable dengan nama yang proper. Tapi apa sih yang bisa kita simpen di dalam variable itu? Nah, di sinilah konsep tipe data masuk.
JavaScript punya beberapa tipe data dasar yang disebut primitive data types. Primitive artinya tipe data yang paling fundamental, yang ga bisa dipecah lagi jadi bagian yang lebih kecil. Anggap aja ini kayak building blocks atau balok-balok dasar buat membangun program.
Ada 6 tipe data primitive di JavaScript, tapi kita bakal fokus ke 5 yang paling sering dipake. Yang keenam (Symbol) itu topik advanced, jadi kita skip dulu untuk sekarang.
String: Tipe Data Teks
String adalah tipe data buat nyimpen teks. Bisa huruf, angka, symbol, spasi, atau kombinasi semuanya. Di JavaScript, ada tiga cara nulis string:
1. Double Quotes ("")
const greeting = "Hello World";
const name = "Budi Santoso";
const message = "Selamat datang di JavaScript!";
2. Single Quotes ('')
const greeting = 'Hello World';
const name = 'Budi Santoso';
const message = 'Selamat datang di JavaScript!';
3. Backticks ()
const greeting = `Hello World`;
const name = `Budi Santoso`;
const message = `Selamat datang di JavaScript!`;
Ketiga cara di atas technically sama aja buat string biasa. Tapi backticks punya kemampuan spesial yang bakal kita bahas nanti di bagian template literal.
Kapan Pake Yang Mana?
Ini preferensi personal, tapi kebanyakan developer sekarang pake:
- Single quotes untuk string biasa
- Backticks untuk string yang butuh interpolation atau multi-line
// String biasa
const city = 'Jakarta';
const country = 'Indonesia';
// String dengan quote di dalemnya
const quote = "He said, 'Hello there!'"; // pake double karena ada single di dalem
const anotherQuote = 'She said, "Good morning"'; // pake single karena ada double di dalem
// Atau escape pake backslash
const escapedQuote = 'It\\'s a beautiful day';
const doubleEscaped = "She said, \\"Hi\\"";
String Operations
String bisa digabung pake operator +:
const firstName = 'Budi';
const lastName = 'Santoso';
const fullName = firstName + ' ' + lastName;
console.log(fullName); // "Budi Santoso"
// Atau
const greeting = 'Hello, ' + firstName + '!';
console.log(greeting); // "Hello, Budi!"
Tapi cara ini agak ribet kalau string-nya panjang. Makanya ada template literal yang bakal kita bahas nanti.
Number: Tipe Data Angka
Number adalah tipe data untuk semua jenis angka. Uniknya, di JavaScript ga ada pembagian antara integer (bilangan bulat) sama float (bilangan desimal). Semuanya cuma "number".
// Integer
const age = 25;
const quantity = 100;
const year = 2024;
// Float/Decimal
const price = 99.99;
const temperature = 36.5;
const pi = 3.14159;
// Negative numbers
const debt = -50000;
const belowZero = -10;
Special Numeric Values
JavaScript punya beberapa nilai numerik spesial:
1. Infinity
Nilai yang represent angka tak terhingga:
const infiniteValue = Infinity;
const divideByZero = 1 / 0; // hasilnya Infinity
const negativeInfinity = -Infinity;
console.log(infiniteValue); // Infinity
console.log(divideByZero); // Infinity
2. NaN (Not a Number)
NaN artinya "bukan angka", muncul kalau kita coba operasi matematika yang ga valid:
const invalid = "hello" * 5; // NaN
const notANumber = Math.sqrt(-1); // NaN
const parseError = parseInt("abc"); // NaN
console.log(invalid); // NaN
console.log(typeof NaN); // "number" (ironis ya?)
Yang unik, meskipun namanya "Not a Number", tipe data NaN itu tetep "number". Weird, tapi emang begitu JavaScript works.
Operasi Matematika Dasar
const a = 10;
const b = 5;
const sum = a + b; // 15
const difference = a - b; // 5
const product = a * b; // 50
const quotient = a / b; // 2
const remainder = a % b; // 0 (modulo/sisa bagi)
const power = a ** b; // 100000 (10 pangkat 5)
Number Limits
JavaScript punya batas untuk angka:
console.log(Number.MAX_VALUE); // 1.7976931348623157e+308
console.log(Number.MIN_VALUE); // 5e-324
console.log(Number.MAX_SAFE_INTEGER); // 9007199254740991
console.log(Number.MIN_SAFE_INTEGER); // -9007199254740991
Untuk kebanyakan kasus, kita ga perlu worry soal limits ini. Tapi good to know kalau mau handle big numbers.
Boolean: Tipe Data Logika
Boolean adalah tipe data yang cuma punya dua kemungkinan nilai: true atau false. Sesimpel itu.
const isLoggedIn = true;
const hasPermission = false;
const isActive = true;
const isDeleted = false;
Boolean biasanya dipake buat:
1. Conditional Logic
const isAdmin = true;
if (isAdmin) {
console.log("Welcome, Admin!");
} else {
console.log("Access denied");
}
2. Comparison Results
const age = 25;
const isAdult = age >= 18; // true
const isTeenager = age < 18; // false
const price = 50000;
const isAffordable = price <= 100000; // true
3. Logical Operations
const hasAccount = true;
const isVerified = true;
const canLogin = hasAccount && isVerified; // true (AND)
const isMember = false;
const isGuest = true;
const canView = isMember || isGuest; // true (OR)
const isBlocked = false;
const isAllowed = !isBlocked; // true (NOT)
Boolean ini backbone dari semua decision-making di program. Tanpa boolean, program ga bisa bikin keputusan.
Null: Nilai Kosong yang Disengaja
Null adalah nilai yang merepresentasikan "ketiadaan nilai" secara intentional atau sengaja. Ini cara kita bilang "variable ini memang kosong by design".
let userProfile = null; // sengaja dikosongkan
let selectedItem = null; // belum ada yang dipilih
let errorMessage = null; // belum ada error
Null biasanya dipake dalam situasi:
1. Initial State
let currentUser = null; // user belum login
// Setelah login
currentUser = {
name: "Budi",
email: "[email protected]"
};
2. Reset Value
let shoppingCart = ["item1", "item2", "item3"];
// Clear cart
shoppingCart = null;
3. Indicate Absence
function findUser(id) {
// kalau user ga ditemukan
return null;
}
const user = findUser(999);
if (user === null) {
console.log("User not found");
}
Penting: Null itu harus explicitly di-assign. Variable ga akan otomatis jadi null.
Undefined: Nilai Default yang Belum Diisi
Undefined artinya variable udah dideklarasi tapi belum dikasih nilai. Ini default value yang diberikan JavaScript.
let userName;
console.log(userName); // undefined
let age;
console.log(age); // undefined
Undefined juga muncul kalau kita akses property yang ga ada:
const user = {
name: "Budi",
age: 25
};
console.log(user.name); // "Budi"
console.log(user.email); // undefined (ga ada property email)
Atau return value function yang ga ada return statement:
function doSomething() {
// ga ada return
}
const result = doSomething();
console.log(result); // undefined
Null vs Undefined: Apa Bedanya?
Ini pertanyaan yang sering bikin bingung. Bedanya subtle tapi penting:
let a; // undefined (JavaScript assign otomatis)
let b = null; // null (kita yang assign secara sengaja)
console.log(a); // undefined
console.log(b); // null
Undefined: "Variable ini ada, tapi belum pernah dikasih nilai" Null: "Variable ini sengaja dikosongkan atau belum ada datanya"
Dalam prakteknya:
- Undefined = JavaScript yang set
- Null = Developer yang set
// Contoh real-world
let userData; // undefined, belum fetch dari server
// Setelah fetch tapi user ga ditemukan
userData = null; // explicitly null
// Setelah user ditemukan
userData = {
name: "Budi",
email: "[email protected]"
};
Quirk JavaScript
Ada satu hal aneh tentang null:
console.log(typeof null); // "object" 🤔
console.log(typeof undefined); // "undefined"
Kenapa typeof null hasilnya "object"? Ini bug historical di JavaScript yang ga bisa dibenerin karena bakal break existing code. Jadi kita harus tau aja kalau ini weird behavior.
Symbol: Skip Dulu
Symbol adalah tipe data primitive yang terakhir, diintroduce di ES6. Symbol dipake untuk bikin unique identifier.
const id1 = Symbol('id');
const id2 = Symbol('id');
console.log(id1 === id2); // false, meskipun description sama
Tapi Symbol ini topik yang agak advanced dan jarang dipake di level beginner. Untuk sekarang, skip aja dulu. Fokus ke lima tipe data lainnya yang lebih sering ketemu.
Checking Data Types
Buat tau tipe data suatu variable, gunakan operator typeof:
const name = "Budi";
const age = 25;
const isActive = true;
const empty = null;
const notDefined = undefined;
console.log(typeof name); // "string"
console.log(typeof age); // "number"
console.log(typeof isActive); // "boolean"
console.log(typeof empty); // "object" (bug!)
console.log(typeof notDefined); // "undefined"
Ini berguna banget buat validasi atau debugging:
function processInput(value) {
if (typeof value === 'string') {
console.log("Processing string:", value);
} else if (typeof value === 'number') {
console.log("Processing number:", value);
} else {
console.log("Unknown type");
}
}
processInput("Hello"); // "Processing string: Hello"
processInput(42); // "Processing number: 42"
Praktik Kombinasi Tipe Data
Mari lihat contoh penggunaan berbagai tipe data dalam satu context:
// User data dengan berbagai tipe
const userName = "Budi Santoso"; // string
const userAge = 28; // number
const isVerified = true; // boolean
const userAvatar = null; // null, belum upload foto
let lastLogin; // undefined, belum pernah login
// Membership info
const memberSince = 2020; // number
const premiumMember = false; // boolean
const subscriptionPrice = 99000; // number
const discountCode = null; // null, ga ada diskon
// Function yang pake berbagai tipe data
function displayUserInfo() {
if (userName && userAge) { // check truthy
console.log(`Name: ${userName}`);
console.log(`Age: ${userAge} years old`);
console.log(`Verified: ${isVerified ? 'Yes' : 'No'}`);
if (userAvatar === null) {
console.log('No profile picture');
}
if (lastLogin === undefined) {
console.log('Never logged in before');
}
}
}
Common Mistakes dengan Tipe Data
1. Comparison Confusion
// String vs Number
console.log("5" == 5); // true (loose equality)
console.log("5" === 5); // false (strict equality)
// Selalu gunakan === untuk avoid confusion
2. Null vs Undefined Check
let value = null;
// ❌ Kurang tepat
if (value == undefined) { // true untuk null DAN undefined
console.log("Empty");
}
// ✅ Lebih baik
if (value === null) { // cuma true untuk null
console.log("Explicitly null");
}
if (value === undefined) { // cuma true untuk undefined
console.log("Not defined");
}
3. NaN Checking
const result = "hello" * 5;
// ❌ Salah
console.log(result === NaN); // selalu false!
// ✅ Benar
console.log(isNaN(result)); // true
console.log(Number.isNaN(result)); // true (lebih reliable)
Memory & Performance
Tipe data primitive itu immutable (ga bisa diubah) dan disimpan by value:
let a = 5;
let b = a; // copy nilai-nya
b = 10;
console.log(a); // 5 (ga berubah)
console.log(b); // 10
Ini berbeda dengan object atau array yang disimpan by reference. Tapi itu topik untuk lain waktu.
Kesimpulan Tipe Data Primitive
Sekarang kita udah kenal lima tipe data primitive utama:
- String: untuk teks
- Number: untuk angka
- Boolean: untuk true/false
- Null: nilai kosong yang disengaja
- Undefined: nilai yang belum diisi
Kelima tipe data ini adalah fondasi dari semua data yang akan kita olah di JavaScript. Paham konsep ini dengan baik akan bikin pembelajaran selanjutnya jadi lebih mudah.
Type Checking dengan Typeof Operator
Setelah kenal sama berbagai tipe data primitive, sekarang muncul pertanyaan penting: gimana caranya kita tau tipe data dari suatu variable? Di sinilah typeof operator berperan.
Bayangin kita terima data dari user atau dari API. Kita ga bisa asal assume tipe datanya apa. Harus di-check dulu biar ga terjadi error atau bug yang aneh. Nah, typeof ini tools yang paling basic dan sering dipake buat ngecek tipe data.
Syntax Typeof Operator
Cara pake typeof itu gampang banget. Ada dua syntax yang bisa dipake:
// Syntax 1: typeof dengan spasi
typeof variableName
// Syntax 2: typeof dengan parentheses
typeof(variableName)
Kedua-duanya sama aja, tapi kebanyakan developer pake yang pertama karena lebih simple dan readable.
const name = "Budi";
const age = 25;
console.log(typeof name); // "string"
console.log(typeof age); // "number"
// Atau bisa langsung ke value-nya
console.log(typeof "Hello"); // "string"
console.log(typeof 42); // "number"
console.log(typeof true); // "boolean"
Yang penting diingat: typeof selalu return string yang describe tipe data-nya.
Checking Semua Tipe Data
Mari kita coba typeof ke semua tipe data yang udah kita pelajari:
// String
console.log(typeof "Hello"); // "string"
console.log(typeof 'World'); // "string"
console.log(typeof `Template`); // "string"
// Number
console.log(typeof 42); // "number"
console.log(typeof 3.14); // "number"
console.log(typeof Infinity); // "number"
console.log(typeof NaN); // "number" (yes, NaN is a number!)
// Boolean
console.log(typeof true); // "boolean"
console.log(typeof false); // "boolean"
// Undefined
console.log(typeof undefined); // "undefined"
let unassigned;
console.log(typeof unassigned); // "undefined"
// Null - WARNING: weird behavior!
console.log(typeof null); // "object" 🤯
// Function
console.log(typeof function() {}); // "function"
// Object
console.log(typeof {}); // "object"
console.log(typeof []); // "object" (array is object)
The Infamous Null Quirk
Nah, ada satu behavior typeof yang super weird dan harus kita waspadai: typeof null return "object".
const emptyValue = null;
console.log(typeof emptyValue); // "object" ❌
// Padahal kita tau null itu primitive, bukan object!
Ini adalah bug legendary di JavaScript yang udah ada sejak awal. Kenapa ga dibetulin? Karena kalau dibetulin sekarang, jutaan website yang udah ada bakal break. Jadi JavaScript team memutuskan buat keep it as is.
Solusinya gimana?
Kalau mau check apakah suatu variable itu null, jangan pake typeof. Gunakan strict equality:
const value = null;
// ❌ Cara yang salah
if (typeof value === "object") {
// Ini bakal true, tapi bisa jadi array atau object beneran juga!
}
// ✅ Cara yang benar
if (value === null) {
console.log("Value is null");
}
// ✅ Or check both null and undefined
if (value == null) {
console.log("Value is null or undefined");
}
Practical Use: Validasi Input
Sekarang kita masuk ke bagian paling penting: gimana pake typeof dalam situasi real-world? Jawabannya adalah validasi input.
Case 1: Function Parameter Validation
function greetUser(name) {
// Validasi: pastikan name adalah string
if (typeof name !== "string") {
console.log("Error: Name must be a string!");
return;
}
console.log(`Hello, ${name}!`);
}
greetUser("Budi"); // "Hello, Budi!"
greetUser(123); // "Error: Name must be a string!"
greetUser(true); // "Error: Name must be a string!"
Case 2: Calculate Function
function calculateDiscount(price, discountPercent) {
// Validasi kedua parameter harus number
if (typeof price !== "number" || typeof discountPercent !== "number") {
return "Error: Both arguments must be numbers";
}
const discount = price * (discountPercent / 100);
return price - discount;
}
console.log(calculateDiscount(100000, 10)); // 90000
console.log(calculateDiscount("100000", 10)); // "Error: Both arguments must be numbers"
console.log(calculateDiscount(100000, "10")); // "Error: Both arguments must be numbers"
Case 3: Safe Property Access
function getUserEmail(user) {
// Check apakah user adalah object
if (typeof user !== "object" || user === null) {
return "Invalid user data";
}
// Check apakah email ada dan bertipe string
if (typeof user.email !== "string") {
return "Email not found";
}
return user.email;
}
const user1 = { name: "Budi", email: "[email protected]" };
const user2 = { name: "Ani" }; // no email
const user3 = null;
console.log(getUserEmail(user1)); // "[email protected]"
console.log(getUserEmail(user2)); // "Email not found"
console.log(getUserEmail(user3)); // "Invalid user data"
Dynamic Type Handling
Dengan typeof, kita bisa handle different types secara dynamic:
function processValue(value) {
if (typeof value === "string") {
return value.toUpperCase();
} else if (typeof value === "number") {
return value * 2;
} else if (typeof value === "boolean") {
return !value;
} else {
return "Unknown type";
}
}
console.log(processValue("hello")); // "HELLO"
console.log(processValue(21)); // 42
console.log(processValue(true)); // false
console.log(processValue(null)); // "Unknown type"
Combining Multiple Checks
Kadang kita perlu check lebih dari satu kondisi:
function isValidAge(age) {
// Check 1: harus number
if (typeof age !== "number") {
return false;
}
// Check 2: bukan NaN
if (isNaN(age)) {
return false;
}
// Check 3: harus positif
if (age < 0) {
return false;
}
// Check 4: reasonable range
if (age > 150) {
return false;
}
return true;
}
console.log(isValidAge(25)); // true
console.log(isValidAge("25")); // false (bukan number)
console.log(isValidAge(NaN)); // false
console.log(isValidAge(-5)); // false
console.log(isValidAge(200)); // false
Typeof dengan Variable yang Belum Dideklarasi
Ada satu keunikan typeof: ga akan throw error meskipun variable-nya belum dideklarasi sama sekali.
// Variable yang belum dideklarasi
console.log(typeof nonExistentVariable); // "undefined" (no error!)
// Berbeda dengan akses langsung
console.log(nonExistentVariable); // ReferenceError!
Ini bisa berguna buat check apakah suatu global variable ada atau tidak:
// Check apakah jQuery loaded
if (typeof jQuery !== "undefined") {
console.log("jQuery is available");
} else {
console.log("jQuery not loaded");
}
// Check browser API
if (typeof localStorage !== "undefined") {
// Use localStorage
} else {
// Fallback method
}
Limitations of Typeof
Meskipun typeof berguna, ada beberapa limitasi yang perlu dipahami:
1. Tidak Bisa Bedakan Array dan Object
const array = [1, 2, 3];
const object = { a: 1, b: 2 };
console.log(typeof array); // "object"
console.log(typeof object); // "object"
// Solusi: gunakan Array.isArray()
console.log(Array.isArray(array)); // true
console.log(Array.isArray(object)); // false
2. Tidak Bisa Bedakan Null dan Object
const nullValue = null;
const objectValue = {};
console.log(typeof nullValue); // "object" (quirk!)
console.log(typeof objectValue); // "object"
// Solusi: check null explicitly
console.log(nullValue === null); // true
console.log(objectValue === null); // false
3. Semua Number Dianggap Sama
console.log(typeof 42); // "number"
console.log(typeof 3.14); // "number"
console.log(typeof NaN); // "number"
console.log(typeof Infinity); // "number"
// Ga bisa tau mana integer, float, atau NaN
// Butuh check tambahan
console.log(Number.isInteger(42)); // true
console.log(Number.isInteger(3.14)); // false
console.log(Number.isNaN(NaN)); // true
Best Practices Type Checking
Berdasarkan limitations di atas, ini best practices-nya:
1. Use Typeof for Primitives
// ✅ Good for string, number, boolean, undefined
if (typeof name === "string") { }
if (typeof age === "number") { }
if (typeof isActive === "boolean") { }
if (typeof value === "undefined") { }
2. Use Strict Equality for Null
// ✅ Check null explicitly
if (value === null) { }
// ✅ Check null OR undefined
if (value == null) { } // double equals!
3. Use Array.isArray for Arrays
// ✅ Check array
if (Array.isArray(items)) { }
// ❌ Dont use typeof
if (typeof items === "object") { } // bisa object atau array!
4. Use instanceof for Complex Types
// Check Date
if (value instanceof Date) { }
// Check RegExp
if (value instanceof RegExp) { }
// Check custom class
if (value instanceof MyClass) { }
Real-World Example: Form Validation
Mari lihat contoh lengkap validasi form:
function validateRegistrationForm(formData) {
const errors = [];
// Validate username
if (typeof formData.username !== "string") {
errors.push("Username must be a string");
} else if (formData.username.length < 3) {
errors.push("Username must be at least 3 characters");
}
// Validate email
if (typeof formData.email !== "string") {
errors.push("Email must be a string");
} else if (!formData.email.includes("@")) {
errors.push("Email must be valid");
}
// Validate age
if (typeof formData.age !== "number") {
errors.push("Age must be a number");
} else if (isNaN(formData.age)) {
errors.push("Age must be a valid number");
} else if (formData.age < 13) {
errors.push("Must be at least 13 years old");
}
// Validate terms acceptance
if (typeof formData.acceptTerms !== "boolean") {
errors.push("Terms acceptance must be boolean");
} else if (formData.acceptTerms !== true) {
errors.push("Must accept terms and conditions");
}
return {
isValid: errors.length === 0,
errors: errors
};
}
// Test
const formData1 = {
username: "budi123",
email: "[email protected]",
age: 25,
acceptTerms: true
};
const formData2 = {
username: "ab", // too short
email: "invalid-email", // no @
age: "25", // string, bukan number
acceptTerms: "yes" // string, bukan boolean
};
console.log(validateRegistrationForm(formData1));
// { isValid: true, errors: [] }
console.log(validateRegistrationForm(formData2));
// { isValid: false, errors: [...] }
Quick Reference Table
Biar gampang diingat, ini summary hasil typeof untuk semua tipe data:
| Value | typeof Result |
|---|---|
"hello" | "string" |
42 | "number" |
3.14 | "number" |
NaN | "number" |
Infinity | "number" |
true | "boolean" |
false | "boolean" |
undefined | "undefined" |
null | "object" ⚠️ |
{} | "object" |
[] | "object" |
function(){} | "function" |
Common Mistakes
1. Comparing typeof Result tanpa Quotes
const age = 25;
// ❌ Salah
if (typeof age === number) { } // ReferenceError!
// ✅ Benar
if (typeof age === "number") { } // typeof returns string!
2. Forgetting typeof Returns String
const result = typeof 42;
// ❌ Salah assumption
if (result === Number) { } // false!
// ✅ Benar
if (result === "number") { } // true
console.log(typeof result); // "string"
3. Using typeof to Check Array
const items = [1, 2, 3];
// ❌ Tidak reliable
if (typeof items === "object") { } // true, tapi object biasa juga true
// ✅ Use Array.isArray
if (Array.isArray(items)) { } // true hanya untuk array
Debugging dengan Typeof
typeof juga sangat berguna saat debugging:
function debugVariable(varName, varValue) {
console.log(`Variable: ${varName}`);
console.log(`Type: ${typeof varValue}`);
console.log(`Value:`, varValue);
console.log('---');
}
const userName = "Budi";
const userAge = 25;
const isActive = true;
const userData = null;
debugVariable('userName', userName);
debugVariable('userAge', userAge);
debugVariable('isActive', isActive);
debugVariable('userData', userData);
// Output membantu kita understand what's going on
When to Use Typeof
Gunakan typeof ketika:
- Validasi function parameters
- Check variable sebelum operasi
- Defensive programming (prevent runtime errors)
- Dynamic type handling
- Feature detection
Jangan terlalu bergantung pada typeof untuk:
- Complex object structure validation (use schema validator)
- Array checking (use Array.isArray)
- Null checking (use strict equality)
- Class instance checking (use instanceof)
Type checking adalah skill fundamental yang akan sering dipake. Dengan paham typeof dan limitations-nya, kita bisa write more robust dan error-free code.
Type Coercion: JavaScript's Hidden Magic
Setelah paham tentang type checking, sekarang kita masuk ke salah satu aspek JavaScript yang paling tricky: type coercion. Ini adalah kemampuan JavaScript untuk otomatis convert satu tipe data ke tipe data lain. Kedengeran helpful? Well, kadang iya, kadang malah bikin kita bingung.
Type coercion terjadi tanpa kita sadari, dan kalau ga paham cara kerjanya, bisa jadi sumber bug yang super misterius. Tapi tenang, setelah section ini kamu bakal paham kenapa "5" + 5 hasilnya "55", bukan 10.
String Concatenation: The Plus Operator
Operator + di JavaScript punya dua fungsi: addition (penjumlahan) dan concatenation (penggabungan string). JavaScript harus decide mau pake yang mana berdasarkan tipe data operand-nya.
Rule-nya simple: kalau salah satu operand adalah string, JavaScript bakal convert semuanya jadi string dan gabung.
// String + Number = String concatenation
const result1 = "5" + 5;
console.log(result1); // "55" (string)
console.log(typeof result1); // "string"
// Number + String = String concatenation
const result2 = 5 + "5";
console.log(result2); // "55" (string)
// String + String = String concatenation
const result3 = "Hello" + " " + "World";
console.log(result3); // "Hello World"
// Multiple operations
const result4 = "Total: " + 100 + 50;
console.log(result4); // "Total: 10050" (!)
Perhatikan contoh terakhir. Kenapa hasilnya "Total: 10050" bukan "Total: 150"? Karena operasi dilakukan dari kiri ke kanan:
"Total: " + 100→"Total: 100"(string)"Total: 100" + 50→"Total: 10050"(string concatenation lagi)
Solusinya?
// Gunakan parentheses
const result = "Total: " + (100 + 50);
console.log(result); // "Total: 150"
// Atau ubah urutan
const result2 = 100 + 50 + " is the total";
console.log(result2); // "150 is the total"
Arithmetic Operations: The Minus Trick
Berbeda dengan +, operator matematika lain (-, *, /, %) akan selalu coba convert operand-nya jadi number.
// String - Number = Number arithmetic
const result1 = "10" - 2;
console.log(result1); // 8 (number)
console.log(typeof result1); // "number"
// String * Number = Number arithmetic
const result2 = "5" * 3;
console.log(result2); // 15 (number)
// String / Number = Number arithmetic
const result3 = "20" / 4;
console.log(result3); // 5 (number)
// String % Number = Modulo
const result4 = "10" % 3;
console.log(result4); // 1 (number)
Ini kenapa sering dipake trick buat convert string ke number:
const stringNumber = "42";
// Method 1: Unary plus
const num1 = +stringNumber;
console.log(num1); // 42 (number)
// Method 2: Minus zero
const num2 = stringNumber - 0;
console.log(num2); // 42 (number)
// Method 3: Multiply by 1
const num3 = stringNumber * 1;
console.log(num3); // 42 (number)
Tapi kalau string-nya bukan angka valid, hasilnya NaN:
const invalid = "hello" - 5;
console.log(invalid); // NaN
const notNumber = "abc" * 2;
console.log(notNumber); // NaN
Boolean Conversion: The Double Bang
Ada trick yang sering dipake developer: double bang atau !! (double exclamation mark). Ini cara cepat convert value apa pun jadi boolean.
// Single ! = NOT (negasi)
console.log(!true); // false
console.log(!false); // true
// Double !! = Convert to boolean
console.log(!!1); // true
console.log(!!0); // false
console.log(!!"hello"); // true
console.log(!!""); // false
console.log(!!null); // false
console.log(!!undefined); // false
Kenapa pakai dua kali? Karena:
!pertama: convert ke boolean dan negate!kedua: negate lagi jadi nilai boolean yang sebenarnya
const value = "hello";
// Step by step
console.log(value); // "hello"
console.log(!value); // false (negate truthy value)
console.log(!!value); // true (negate false)
Truthy dan Falsy Values
Ini konsep super penting di JavaScript. Setiap value punya boolean representation, entah itu truthy atau falsy.
Falsy Values (nilai yang dianggap false):
false(boolean false itu sendiri)0(number zero)""atau''(empty string)nullundefinedNaN
Itu aja! Hanya 6 nilai yang falsy. Sisanya semua truthy.
// Falsy values
console.log(!!false); // false
console.log(!!0); // false
console.log(!!""); // false
console.log(!!null); // false
console.log(!!undefined); // false
console.log(!!NaN); // false
// Truthy values
console.log(!!true); // true
console.log(!!1); // true
console.log(!!"hello"); // true
console.log(!![]); // true (empty array is truthy!)
console.log(!!{}); // true (empty object is truthy!)
console.log(!!" "); // true (space is truthy!)
console.log(!!"false"); // true (string "false" is truthy!)
Perhatikan yang aneh:
- Empty array
[]adalah truthy - Empty object
{}adalah truthy - String
"false"adalah truthy (karena ada content) - String dengan spasi
" "adalah truthy
Truthy/Falsy dalam Kondisi
Truthy dan falsy values sering dipake di conditional statements:
const userName = "Budi";
// Explicit check
if (userName !== "") {
console.log("User has a name");
}
// Truthy check (lebih simpel)
if (userName) {
console.log("User has a name");
}
// Falsy check
const userAge = 0;
if (!userAge) {
console.log("Age is not set"); // ini execute, padahal 0 valid
}
// Better check untuk number
if (userAge === undefined || userAge === null) {
console.log("Age is not set");
}
Common Pattern: Default Values
function greet(name) {
// Kalau name falsy, use default
const displayName = name || "Guest";
console.log(`Hello, ${displayName}!`);
}
greet("Budi"); // "Hello, Budi!"
greet(""); // "Hello, Guest!"
greet(null); // "Hello, Guest!"
greet(); // "Hello, Guest!" (undefined)
// Modern way: nullish coalescing
function greet2(name) {
const displayName = name ?? "Guest";
console.log(`Hello, ${displayName}!`);
}
greet2(""); // "Hello, !" (empty string tetep dipake)
greet2(null); // "Hello, Guest!"
greet2(undefined); // "Hello, Guest!"
Implicit vs Explicit Conversion
Ada dua jenis konversi tipe data:
Implicit Conversion (otomatis oleh JavaScript):
const result1 = "5" + 5; // "55" - JavaScript otomatis convert
const result2 = "10" - 2; // 8 - JavaScript otomatis convert
const result3 = !"hello"; // false - JavaScript otomatis convert
Explicit Conversion (kita yang convert):
const result1 = "5" + String(5); // "55" - kita convert 5 jadi string
const result2 = Number("10") - 2; // 8 - kita convert "10" jadi number
const result3 = Boolean("hello"); // true - kita convert jadi boolean
Best Practice: Use Explicit Conversion
Meskipun implicit conversion keliatan convenient, sebaiknya hindari. Kenapa?
1. Readability
Code yang explicit lebih jelas maksudnya:
// ❌ Implicit - harus mikir dulu
const total = price + ""; // convert ke string, tapi ga obvious
// ✅ Explicit - langsung jelas
const total = String(price);
2. Maintainability
Orang lain (atau kita sendiri nanti) lebih gampang ngerti:
// ❌ Implicit
function calculate(input) {
return input * 1 + 10; // convert ke number terus tambah 10
}
// ✅ Explicit
function calculate(input) {
const numericInput = Number(input);
return numericInput + 10;
}
3. Avoid Unexpected Bugs
Implicit conversion bisa bikin behavior yang unexpected:
// Bug example
const items = ["apple", "banana"];
const count = items.length; // 2
// Implicit - bisa jadi bug
const message = "You have " + count + 1 + " items";
console.log(message); // "You have 21 items" (!)
// Explicit - jelas intentnya
const message2 = "You have " + String(count + 1) + " items";
console.log(message2); // "You have 3 items"
Explicit Conversion Methods
Ini cara-cara explicit untuk convert tipe data:
To String:
// Method 1: String()
const num = 42;
const str1 = String(num); // "42"
// Method 2: .toString()
const str2 = num.toString(); // "42"
// Method 3: Template literal
const str3 = `${num}`; // "42"
To Number:
// Method 1: Number()
const str = "42";
const num1 = Number(str); // 42
// Method 2: parseInt() - untuk integer
const num2 = parseInt(str); // 42
const num3 = parseInt("42.99"); // 42 (drop decimal)
// Method 3: parseFloat() - untuk decimal
const num4 = parseFloat("42.99"); // 42.99
// Method 4: Unary plus (acceptable)
const num5 = +str; // 42
To Boolean:
// Method 1: Boolean()
const value = "hello";
const bool1 = Boolean(value); // true
// Method 2: Double bang (acceptable)
const bool2 = !!value; // true
// For conditions, implicit is OK
if (value) { } // acceptable dalam if statement
Comparison Operators dan Coercion
Comparison operators juga trigger type coercion kalau pake double equals ==:
// Loose equality (==) - with coercion
console.log(5 == "5"); // true (coercion!)
console.log(0 == false); // true (coercion!)
console.log(null == undefined); // true (special case)
console.log("" == 0); // true (coercion!)
// Strict equality (===) - no coercion
console.log(5 === "5"); // false
console.log(0 === false); // false
console.log(null === undefined); // false
console.log("" === 0); // false
Best Practice: Always Use ===
// ❌ Avoid loose equality
if (userInput == 0) { } // could be "0", 0, false, "", etc.
// ✅ Use strict equality
if (userInput === 0) { } // only true for number 0
// Exception: checking null OR undefined
if (value == null) { } // acceptable shorthand
// Equivalent to:
if (value === null || value === undefined) { }
Real-World Examples
Example 1: Form Input
function processFormInput(input) {
// Input dari form selalu string!
console.log(typeof input); // "string"
// ❌ Implicit conversion - dangerous
const result1 = input + 10; // "10010" kalau input "100"
// ✅ Explicit conversion - safe
const numericInput = Number(input);
if (isNaN(numericInput)) {
return "Invalid number";
}
const result2 = numericInput + 10; // 110 kalau input "100"
return result2;
}
console.log(processFormInput("100")); // 110
console.log(processFormInput("abc")); // "Invalid number"
Example 2: API Response
function displayUserData(userData) {
// Data dari API bisa null atau undefined
// ❌ Implicit truthy check - bisa miss edge case
if (userData.age) {
console.log(`Age: ${userData.age}`);
}
// Problem: age = 0 juga falsy!
// ✅ Explicit check
if (userData.age !== null && userData.age !== undefined) {
console.log(`Age: ${userData.age}`);
}
// ✅ Or use nullish coalescing
const displayAge = userData.age ?? "Not specified";
console.log(`Age: ${displayAge}`);
}
displayUserData({ age: 25 }); // "Age: 25"
displayUserData({ age: 0 }); // "Age: 0" (handled correctly)
displayUserData({ age: null }); // "Age: Not specified"
Example 3: Calculate Total
function calculateTotal(prices) {
// prices might contain strings from input
let total = 0;
for (let i = 0; i < prices.length; i++) {
// ❌ Implicit
// total = total + prices[i]; // might concatenate!
// ✅ Explicit
const price = Number(prices[i]);
if (isNaN(price)) {
console.log(`Invalid price: ${prices[i]}`);
continue;
}
total = total + price;
}
return total;
}
console.log(calculateTotal([10, "20", 30])); // 60
console.log(calculateTotal([10, "abc", 30])); // 40 (skip invalid)
Common Coercion Pitfalls
Ini beberapa jebakan umum yang sering bikin developer bingung:
1. The Plus Operator Trap
console.log(1 + 2); // 3
console.log(1 + "2"); // "12" (!)
console.log("1" + 2); // "12"
console.log("1" + "2"); // "12"
// Solution: explicit conversion
console.log(1 + Number("2")); // 3
2. The Array Coercion
console.log([1, 2] + [3, 4]); // "1,23,4" (weird!)
console.log([] + []); // "" (empty string)
console.log([] + {}); // "[object Object]"
console.log({} + []); // 0 (in some contexts)
// Avoid array coercion completely!
3. The Equality Confusion
console.log(0 == ""); // true
console.log(0 == "0"); // true
console.log("" == "0"); // false (!)
console.log(false == "false"); // false
console.log(false == "0"); // true (!)
// Always use === to avoid confusion
4. The NaN Trap
const result = "hello" - 5; // NaN
// NaN is not equal to anything, even itself!
console.log(result == NaN); // false
console.log(result === NaN); // false
// Use isNaN or Number.isNaN
console.log(isNaN(result)); // true
console.log(Number.isNaN(result)); // true
Quick Reference: Conversion Rules
String Conversion:
String(value)atauvalue.toString()- Plus operator dengan string:
value + "" - Template literal:
${value}
Number Conversion:
Number(value)parseInt(value)atauparseFloat(value)- Unary plus:
+value - Arithmetic operators:
value - 0,value * 1
Boolean Conversion:
Boolean(value)- Double bang:
!!value - In conditions:
if (value)
Falsy Values to Remember:
false,0,"",null,undefined,NaN
Summary Best Practices
- Always prefer explicit conversion over implicit
- Use
===instead of==untuk avoid coercion - Be careful with
+operator when mixing types - Know your falsy values (6 of them)
- Validate and convert early in functions
- Use appropriate conversion method (Number, String, Boolean)
- Check for NaN after number conversion
- Document your conversions for clarity
Type coercion adalah salah satu quirk JavaScript yang harus dipahami dengan baik. Meskipun bisa bikin kode lebih singkat, implicit conversion sering jadi sumber bug. Dengan selalu pake explicit conversion, kode kita jadi lebih predictable, maintainable, dan bug-free.
Template Literal: Modern String Handling
Ingat waktu kita bahas tipe data string? Ada tiga cara nulis string: double quotes, single quotes, dan backticks. Nah, sekarang saatnya kita deep dive ke backticks, atau yang lebih keren disebut template literal.
Template literal adalah salah satu fitur terbaik yang dibawa ES6. Sebelum ada template literal, gabungin string dengan variable atau expression itu ribet banget. Sekarang? Jauh lebih gampang dan readable.
Syntax Template Literal
Template literal ditulis pake backticks (```) dan punya syntax khusus buat masukin variable atau expression: ${...}.
// Cara lama dengan concatenation
const name = "Budi";
const greeting1 = "Hello, " + name + "!";
console.log(greeting1); // "Hello, Budi!"
// Cara modern dengan template literal
const greeting2 = `Hello, ${name}!`;
console.log(greeting2); // "Hello, Budi!"
Lihat bedanya? Template literal jauh lebih clean dan gampang dibaca. Ga ada plus-plus yang bikin pusing.
Basic Usage:
const firstName = "Budi";
const lastName = "Santoso";
// Interpolation
const fullName = `${firstName} ${lastName}`;
console.log(fullName); // "Budi Santoso"
// Multiple variables
const age = 25;
const city = "Jakarta";
const intro = `My name is ${firstName}, I'm ${age} years old, and I live in ${city}`;
console.log(intro);
// "My name is Budi, I'm 25 years old, and I live in Jakarta"
String Interpolation dengan Variable
String interpolation adalah kemampuan untuk "inject" variable langsung ke dalam string. Ini bikin code jadi lebih expressif dan mudah dimaintain.
const product = "Laptop";
const price = 15000000;
const stock = 5;
// Cara lama - susah dibaca
const message1 = "Product: " + product + ", Price: Rp " + price + ", Stock: " + stock;
// Cara modern - jelas dan rapi
const message2 = `Product: ${product}, Price: Rp ${price}, Stock: ${stock}`;
console.log(message2);
// "Product: Laptop, Price: Rp 15000000, Stock: 5"
With Complex Data:
const user = {
name: "Budi Santoso",
email: "[email protected]",
role: "Admin"
};
// Direct object property access
const userInfo = `
Name: ${user.name}
Email: ${user.email}
Role: ${user.role}
`;
console.log(userInfo);
Multi-line String
Ini salah satu feature paling berguna dari template literal. Dulu, kalau mau bikin multi-line string, harus pake \\n atau concatenation yang ribet.
Cara Lama:
// Dengan \\n (newline character)
const address1 = "Jl. Sudirman No. 123\\nJakarta Pusat\\n12345";
// Dengan concatenation
const address2 = "Jl. Sudirman No. 123" + "\\n" +
"Jakarta Pusat" + "\\n" +
"12345";
console.log(address1);
// Jl. Sudirman No. 123
// Jakarta Pusat
// 12345
Cara Modern dengan Template Literal:
const address = `Jl. Sudirman No. 123
Jakarta Pusat
12345`;
console.log(address);
// Jl. Sudirman No. 123
// Jakarta Pusat
// 12345
Jauh lebih natural kan? Yang kita tulis persis dengan hasil yang kita mau.
HTML Template:
Ini super berguna buat bikin HTML template:
const userName = "Budi";
const userEmail = "[email protected]";
const htmlCard = `
<div class="user-card">
<h2>${userName}</h2>
<p>Email: ${userEmail}</p>
<button>Contact</button>
</div>
`;
console.log(htmlCard);
Dibanding harus concatenate HTML string yang panjang, template literal bikin code lebih readable dan maintainable.
Formatted Text:
const invoice = {
number: "INV-001",
customer: "Budi Santoso",
items: 3,
total: 250000
};
const receipt = `
========================================
INVOICE RECEIPT
========================================
Invoice Number: ${invoice.number}
Customer Name : ${invoice.customer}
Total Items : ${invoice.items}
Total Amount : Rp ${invoice.total}
========================================
Thank you for your order!
========================================
`;
console.log(receipt);
Expressions Inside Template Literal
Template literal ga cuma bisa nerima variable, tapi juga expressions atau operasi apapun yang menghasilkan nilai.
Arithmetic Operations:
const price = 100000;
const quantity = 3;
const total = `Total: Rp ${price * quantity}`;
console.log(total); // "Total: Rp 300000"
const calculation = `2 + 2 = ${2 + 2}`;
console.log(calculation); // "2 + 2 = 4"
const percentage = `Discount: ${20}%`;
const discounted = `Price after ${percentage} discount: Rp ${price - (price * 20/100)}`;
console.log(discounted); // "Price after Discount: 20% discount: Rp 80000"
Conditional Expressions (Ternary):
const score = 85;
const status = `Status: ${score >= 75 ? "PASSED" : "FAILED"}`;
console.log(status); // "Status: PASSED"
const stock = 0;
const availability = `Stock: ${stock > 0 ? "Available" : "Out of Stock"}`;
console.log(availability); // "Stock: Out of Stock"
const isLoggedIn = true;
const greeting = `${isLoggedIn ? "Welcome back" : "Please login"}!`;
console.log(greeting); // "Welcome back!"
Function Calls:
function formatCurrency(amount) {
return amount.toLocaleString('id-ID');
}
const price = 1500000;
const message = `Price: Rp ${formatCurrency(price)}`;
console.log(message); // "Price: Rp 1.500.000"
// Method calls
const name = "budi santoso";
const formatted = `Name: ${name.toUpperCase()}`;
console.log(formatted); // "Name: BUDI SANTOSO"
const text = " hello world ";
const trimmed = `Text: "${text.trim()}"`;
console.log(trimmed); // 'Text: "hello world"'
Array Operations:
const numbers = [1, 2, 3, 4, 5];
const info = `Array length: ${numbers.length}, First item: ${numbers[0]}, Last item: ${numbers[numbers.length - 1]}`;
console.log(info); // "Array length: 5, First item: 1, Last item: 5"
const fruits = ["Apple", "Banana", "Orange"];
const list = `Available fruits: ${fruits.join(", ")}`;
console.log(list); // "Available fruits: Apple, Banana, Orange"
Object Methods:
const product = {
name: "Laptop",
price: 15000000,
getDiscount() {
return this.price * 0.1;
},
getFinalPrice() {
return this.price - this.getDiscount();
}
};
const offer = `
Product: ${product.name}
Original Price: Rp ${product.price}
Discount: Rp ${product.getDiscount()}
Final Price: Rp ${product.getFinalPrice()}
`;
console.log(offer);
Best Practice: Gunakan untuk Dynamic String
Template literal adalah pilihan terbaik setiap kali kita butuh dynamic string - string yang isinya berubah-ubah berdasarkan variable atau data.
When to Use Template Literal:
1. String Interpolation
// ✅ Perfect use case
const username = "Budi";
const message = `Welcome, ${username}!`;
// ❌ Overkill untuk static string
const staticText = `Hello World`; // ga perlu template literal
const betterStatic = "Hello World"; // lebih simple
2. Multi-line Strings
// ✅ Template literal sangat cocok
const paragraph = `
This is a long paragraph
that spans multiple lines
and is easy to read.
`;
// ❌ Jangan pake cara ini lagi
const oldWay = "This is a long paragraph\\n" +
"that spans multiple lines\\n" +
"and is easy to read.";
3. HTML/XML Generation
// ✅ Clean dan maintainable
function createCard(user) {
return `
<div class="card">
<h3>${user.name}</h3>
<p>${user.bio}</p>
</div>
`;
}
// ❌ Nightmare untuk maintain
function createCardOld(user) {
return "<div class=\\"card\\">" +
"<h3>" + user.name + "</h3>" +
"<p>" + user.bio + "</p>" +
"</div>";
}
4. Complex String Building
// ✅ Readable dan flexible
function generateReport(data) {
return `
Report Generated: ${new Date().toLocaleDateString()}
Summary:
- Total Sales: ${data.totalSales}
- Total Orders: ${data.totalOrders}
- Average Order: ${data.totalSales / data.totalOrders}
Status: ${data.totalSales > 1000000 ? "Target Achieved" : "Below Target"}
`;
}
Nesting Template Literals
Template literal bisa di-nest (ditaruh di dalem template literal lain):
const users = [
{ name: "Budi", role: "Admin" },
{ name: "Ani", role: "User" },
{ name: "Citra", role: "User" }
];
const userList = `
<ul>
${users.map(user => `
<li>
<strong>${user.name}</strong> - ${user.role}
</li>
`).join('')}
</ul>
`;
console.log(userList);
Ini powerful banget buat generate dynamic content dari array.
Tagged Template Literals
Ini advanced feature yang jarang dipake tapi worth to know. Kita bisa bikin function yang "process" template literal:
function highlight(strings, ...values) {
return strings.reduce((result, str, i) => {
return result + str + (values[i] ? `<mark>${values[i]}</mark>` : '');
}, '');
}
const name = "Budi";
const age = 25;
const highlighted = highlight`My name is ${name} and I'm ${age} years old`;
console.log(highlighted);
// "My name is <mark>Budi</mark> and I'm <mark>25</mark> years old"
Tapi untuk pemula, skip dulu bagian ini. Fokus ke basic usage aja.
Escaping Backticks
Kalau perlu pake backtick character di dalam template literal, escape pake backslash:
const code = `To use template literal, write \\`Hello \\${name}\\``;
console.log(code);
// "To use template literal, write `Hello ${name}`"
const markdown = `Use \\`code\\` for inline code`;
console.log(markdown);
// "Use `code` for inline code"
Common Mistakes
1. Forgetting to Use Backticks
// ❌ Salah - pake quotes biasa
const wrong = "Hello ${name}"; // literal string "${name}"
// ✅ Benar - pake backticks
const correct = `Hello ${name}`; // interpolation works
2. Not Closing Expression
// ❌ Syntax error
const broken = `Total: ${price`; // SyntaxError!
// ✅ Always close ${}
const fixed = `Total: ${price}`;
3. Using + for Concatenation
const name = "Budi";
const age = 25;
// ❌ Masih pake cara lama
const oldWay = `Name: ` + name + `, Age: ` + age;
// ✅ Full template literal
const newWay = `Name: ${name}, Age: ${age}`;
4. Unnecessary Template Literal
// ❌ Ga perlu template literal
const static1 = `Hello World`;
const static2 = `100`;
// ✅ Simple string lebih appropriate
const better1 = "Hello World";
const better2 = "100"; // atau 100 kalau emang number
Performance Considerations
Template literal performance-nya hampir sama dengan string concatenation untuk simple cases. Tapi untuk complex cases, template literal bisa lebih optimal:
// Template literal
const result1 = `${a} ${b} ${c} ${d} ${e}`;
// Concatenation
const result2 = a + " " + b + " " + c + " " + d + " " + e;
// Performance: hampir identical
// Readability: template literal menang
Yang penting: jangan premature optimization. Pilih yang paling readable dulu, optimize kalau emang ada problem.
Real-World Examples
Example 1: Email Template
function generateWelcomeEmail(user) {
return `
Hi ${user.firstName},
Welcome to our platform! We're excited to have you on board.
Your account details:
- Email: ${user.email}
- Account Type: ${user.isPremium ? "Premium" : "Free"}
- Member since: ${new Date().toLocaleDateString()}
${user.isPremium
? "Thank you for being a premium member!"
: "Upgrade to premium for more features."}
Best regards,
The Team
`;
}
const newUser = {
firstName: "Budi",
email: "[email protected]",
isPremium: false
};
console.log(generateWelcomeEmail(newUser));
Example 2: API URL Builder
function buildApiUrl(endpoint, params) {
const baseUrl = "<https://api.example.com>";
const queryString = Object.keys(params)
.map(key => `${key}=${params[key]}`)
.join('&');
return `${baseUrl}/${endpoint}?${queryString}`;
}
const url = buildApiUrl("users", {
page: 1,
limit: 10,
sort: "name"
});
console.log(url);
// "<https://api.example.com/users?page=1&limit=10&sort=name>"
Example 3: Logging with Context
function logAction(user, action, timestamp) {
const log = `[${timestamp}] User ${user.name} (ID: ${user.id}) performed action: ${action}`;
console.log(log);
}
logAction(
{ id: 123, name: "Budi" },
"LOGIN",
new Date().toISOString()
);
// "[2024-01-15T10:30:00.000Z] User Budi (ID: 123) performed action: LOGIN"
Example 4: Dynamic SQL Query (untuk learning, production pake prepared statements)
function buildSelectQuery(table, conditions) {
const whereClause = Object.keys(conditions)
.map(key => `${key} = '${conditions[key]}'`)
.join(' AND ');
return `SELECT * FROM ${table} WHERE ${whereClause}`;
}
const query = buildSelectQuery('users', {
status: 'active',
role: 'admin'
});
console.log(query);
// "SELECT * FROM users WHERE status = 'active' AND role = 'admin'"
Note: Untuk production SQL queries, selalu gunakan prepared statements untuk avoid SQL injection!
When NOT to Use Template Literal
Meskipun powerful, ada kalanya template literal bukan pilihan terbaik:
1. Static Strings
// ❌ Overkill
const greeting = `Hello`;
// ✅ Simple is better
const greeting = "Hello";
2. When Working with Quotes
// Kadang quotes lebih simpel
const json = '{"name": "Budi", "age": 25}';
// Daripada escape everything
const jsonTemplate = `{"name": "Budi", "age": 25}`;
3. Performance-Critical Loops
// Untuk loop yang execute jutaan kali, concatenation bisa lebih cepat
// Tapi in most cases, perbedaannya negligible
Compatibility Note
Template literal adalah ES6 feature. Semua modern browser udah support, tapi kalau target old browsers (IE11 ke bawah), perlu transpile pake Babel.
// Modern browsers: ✅
const modern = `Hello ${name}`;
// IE11: ❌ (butuh transpile)
Tapi di 2024, hampir semua project udah pake ES6+, jadi template literal aman dipake.
Tips & Tricks
- Auto-formatting in IDE: Most modern code editors auto-format template literals dengan proper indentation.
- Syntax Highlighting: Template literal punya syntax highlighting yang jelas, bikin expression
${}mudah dibedakan. - Refactoring: Kalau ketemu string concatenation, refactor jadi template literal untuk better readability.
- Debugging: Template literal bikin debugging lebih gampang karena bisa lihat full context.
Template literal adalah salah satu feature JavaScript yang paling sering dipake. Mulai dari simple string interpolation sampe complex HTML generation, template literal bikin hidup developer jauh lebih mudah. Jadi, mulai sekarang lupakan string concatenation dengan plus operator, dan embrace template literal!
Common Mistakes yang Sering Terjadi
Setelah belajar semua konsep variable dan data types, sekarang waktunya bahas kesalahan-kesalahan umum yang sering banget terjadi, bahkan kadang sama developer yang udah berpengalaman. Dengan tau mistakes ini dari awal, kita bisa avoid banyak frustasi dan debugging time.
Mistake #1: Confusing const dengan Immutability
Ini salah satu misconception paling umum tentang const. Banyak yang mikir const bikin nilai variable-nya immutable atau ga bisa diubah sama sekali. Ini SALAH.
const cuma prevent re-assignment, bukan membuat value-nya immutable.
// ❌ Salah Paham: "const berarti ga bisa diubah sama sekali"
const user = {
name: "Budi",
age: 25
};
// ✅ Ini BISA dilakukan!
user.name = "Ani"; // Mengubah property object
user.age = 26;
user.city = "Jakarta"; // Menambah property baru
console.log(user);
// { name: "Ani", age: 26, city: "Jakarta" }
// ❌ Ini yang GA BISA
user = { name: "Citra" }; // Error! Re-assignment
Penjelasan:
const cuma protect reference-nya, bukan content-nya. Jadi object atau array yang disimpan di const masih bisa dimodifikasi isinya.
// Array example
const numbers = [1, 2, 3];
// ✅ Bisa modifikasi isi
numbers.push(4);
numbers[0] = 10;
console.log(numbers); // [10, 2, 3, 4]
// ❌ Ga bisa reassign
numbers = [5, 6, 7]; // Error!
// Object example
const config = {
apiUrl: "<https://api.example.com>",
timeout: 5000
};
// ✅ Bisa ubah property
config.timeout = 10000;
config.apiKey = "abc123";
// ❌ Ga bisa reassign
config = { apiUrl: "new-url" }; // Error!
Solusi untuk True Immutability:
Kalau memang butuh object yang bener-bener immutable, gunakan Object.freeze():
const user = Object.freeze({
name: "Budi",
age: 25
});
user.name = "Ani"; // Ga akan berubah (silent fail)
user.city = "Jakarta"; // Ga akan ditambah
console.log(user); // { name: "Budi", age: 25 }
// Di strict mode, akan throw error
"use strict";
user.name = "Ani"; // TypeError!
Tapi perlu diingat, Object.freeze() cuma shallow freeze. Nested object masih bisa diubah:
const user = Object.freeze({
name: "Budi",
address: {
city: "Jakarta"
}
});
// ❌ Ga bisa
user.name = "Ani";
// ✅ Tapi ini bisa (nested object)
user.address.city = "Bandung";
console.log(user.address.city); // "Bandung"
Mistake #2: Using var in 2024
Masih pake var di tahun 2024 adalah red flag. Seriously, there's no good reason to use var anymore.
// ❌ Please don't
var userName = "Budi";
var userAge = 25;
// ✅ Use const/let instead
const userName = "Budi";
let userAge = 25;
Kenapa var Problematic:
Problem 1: Function Scope vs Block Scope
// var: function scope
function testVar() {
if (true) {
var x = 10;
}
console.log(x); // 10 (masih bisa diakses!)
}
// let/const: block scope
function testLet() {
if (true) {
let y = 10;
}
console.log(y); // ReferenceError!
}
Problem 2: Hoisting Behavior
// var: hoisted dan initialized dengan undefined
console.log(userName); // undefined (no error!)
var userName = "Budi";
// let/const: hoisted tapi ga initialized (temporal dead zone)
console.log(userEmail); // ReferenceError!
let userEmail = "[email protected]";
Problem 3: Re-declaration Allowed
// var: bisa re-declare (dangerous!)
var count = 1;
var count = 2; // No error, tapi ini bug waiting to happen
console.log(count); // 2
// let/const: ga bisa re-declare
let total = 1;
let total = 2; // SyntaxError!
Bottom Line:
Kalau maintain legacy code yang pake var, oke. Tapi buat kode baru, jangan pernah pake var. Period.
Mistake #3: Forgetting to Declare Variable
Lupa declare variable adalah kesalahan yang sering bikin bingung, especially di non-strict mode.
// ❌ Lupa declare - creates implicit global!
function calculate() {
result = 100 * 2; // Ga pake const/let/var
return result;
}
calculate();
console.log(result); // 200 (accessible globally!)
console.log(window.result); // 200 (attached to window!)
Ini bahaya banget karena:
- Variable jadi global tanpa disengaja
- Bisa override variable global yang ada
- Susah di-track dan di-debug
- Pollute global scope
Solusi: Always Declare Variables
// ✅ Always use const/let
function calculate() {
const result = 100 * 2;
return result;
}
calculate();
console.log(result); // ReferenceError (correctly!)
Use Strict Mode:
Strict mode akan throw error kalau lupa declare variable:
"use strict";
function calculate() {
result = 100 * 2; // ReferenceError: result is not defined
return result;
}
Best practice: selalu include "use strict"; di awal file JavaScript:
"use strict";
// Semua code dibawah ini akan di-enforce strictly
const userName = "Budi";
// userAge = 25; // Error! Must declare
Mistake #4: Type Coercion Confusion
Type coercion adalah sumber bug yang paling sering terjadi di JavaScript. Developer sering kaget dengan hasil yang unexpected.
Common Coercion Pitfalls:
Plus Operator Trap:
// ❌ Expecting 15, getting "105"
const a = "10";
const b = 5;
const result = a + b;
console.log(result); // "105" (string!)
// ✅ Explicit conversion
const correctResult = Number(a) + b;
console.log(correctResult); // 15
Loose Equality Trap:
// ❌ Using == (allows coercion)
console.log(0 == ""); // true (!)
console.log(0 == "0"); // true
console.log("" == "0"); // false (!!)
console.log(false == "0"); // true (!!!)
// ✅ Using === (no coercion)
console.log(0 === ""); // false
console.log(0 === "0"); // false
console.log("" === "0"); // false
console.log(false === "0"); // false
Falsy Values Trap:
const userAge = 0; // Valid age!
// ❌ Wrong check
if (!userAge) {
console.log("Age not set"); // Ini execute, padahal age = 0 valid!
}
// ✅ Proper check
if (userAge === null || userAge === undefined) {
console.log("Age not set");
}
// Or check for specific falsy values
if (userAge === 0) {
console.log("Age is zero");
}
NaN Comparison Trap:
const result = "hello" / 5; // NaN
// ❌ Wrong way to check NaN
if (result == NaN) { } // Always false!
if (result === NaN) { } // Always false!
// ✅ Correct way
if (isNaN(result)) { } // true
if (Number.isNaN(result)) { } // true (more reliable)
Array/Object Coercion:
// ❌ Unexpected results
console.log([] + []); // "" (empty string!)
console.log([] + {}); // "[object Object]"
console.log({} + []); // 0 (in some contexts)
// ✅ Don't rely on coercion for objects/arrays
// Use explicit methods instead
const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = [...arr1, ...arr2]; // [1, 2, 3, 4]
Solutions:
- Always use
===instead of== - Convert types explicitly dengan Number(), String(), Boolean()
- Check types dengan typeof sebelum operasi
- Validate input di awal function
function addNumbers(a, b) {
// Validate and convert
const numA = Number(a);
const numB = Number(b);
// Check for NaN
if (isNaN(numA) || isNaN(numB)) {
return "Invalid input";
}
return numA + numB;
}
console.log(addNumbers(10, 5)); // 15
console.log(addNumbers("10", "5")); // 15
console.log(addNumbers("abc", 5)); // "Invalid input"
Mistake #5: Not Checking Types
Banyak developer assume tipe data tanpa check terlebih dahulu. Ini sering jadi sumber runtime errors.
// ❌ Assuming type without checking
function processUser(user) {
console.log(user.name.toUpperCase()); // Crash kalau user null!
}
processUser(null); // TypeError: Cannot read property 'name' of null
// ✅ Check type first
function processUserSafe(user) {
if (typeof user !== "object" || user === null) {
return "Invalid user";
}
if (typeof user.name !== "string") {
return "Name is required";
}
return user.name.toUpperCase();
}
processUserSafe(null); // "Invalid user"
processUserSafe({}); // "Name is required"
processUserSafe({ name: "budi" }); // "BUDI"
Mistake #6: Mixing Data Types in Arrays
Meskipun JavaScript allow ini, mixing types di array often leads to problems:
// ❌ Mixed types - hard to work with
const mixedArray = [1, "two", true, null, { name: "Budi" }];
// What if we want to sum?
const sum = mixedArray.reduce((acc, val) => acc + val, 0);
console.log(sum); // "01twotrue[object Object]" (weird!)
// ✅ Keep arrays homogeneous
const numbers = [1, 2, 3, 4, 5];
const names = ["Budi", "Ani", "Citra"];
const users = [
{ name: "Budi", age: 25 },
{ name: "Ani", age: 23 }
];
Mistake #7: Variable Shadowing
Variable shadowing terjadi ketika inner scope variable punya nama yang sama dengan outer scope:
const userName = "Budi";
function test() {
const userName = "Ani"; // Shadow outer userName
console.log(userName); // "Ani"
}
test();
console.log(userName); // "Budi"
Ini technically bukan error, tapi bisa bikin bingung:
// ❌ Confusing shadowing
let total = 100;
function calculate(price) {
let total = price * 1.1; // Shadow outer total
return total;
}
const result = calculate(50); // 55
console.log(total); // 100 (unchanged, might be unexpected)
// ✅ Use different names
let grandTotal = 100;
function calculate(price) {
let priceWithTax = price * 1.1;
return priceWithTax;
}
Practical Tips untuk Avoid Mistakes
Setelah tau mistakes-nya, ini tips praktis yang bisa langsung dipraktekkin:
Tip 1: Start with const, upgrade to let if needed
// Always start with const
const userName = "Budi";
const userAge = 25;
// Only use let if value needs to change
let loginAttempts = 0;
loginAttempts++; // needs to change, so let is correct
Tip 2: Use typeof untuk check sebelum operasi
function processValue(value) {
// Always check type first
if (typeof value === "string") {
return value.toUpperCase();
} else if (typeof value === "number") {
return value * 2;
} else {
return "Unsupported type";
}
}
Tip 3: Enable strict mode
"use strict";
// Strict mode will catch:
// - Undeclared variables
// - Assignment to read-only properties
// - Duplicate parameter names
// - And more...
Tip 4: Use === instead of ==
// ❌ Never use ==
if (value == 0) { }
// ✅ Always use ===
if (value === 0) { }
// Exception: checking null/undefined together
if (value == null) { } // OK, checks both null and undefined
Tip 5: Validate input di awal function
function calculateDiscount(price, percentage) {
// Validate inputs
if (typeof price !== "number" || typeof percentage !== "number") {
throw new Error("Both arguments must be numbers");
}
if (price < 0 || percentage < 0 || percentage > 100) {
throw new Error("Invalid values");
}
// Now safe to calculate
return price - (price * percentage / 100);
}
Tip 6: Use descriptive variable names
// ❌ Unclear what this represents
const d = new Date();
const t = 5000;
// ✅ Clear and self-documenting
const currentDate = new Date();
const timeoutDuration = 5000;
Tip 7: Comment tricky parts
// When type coercion is unavoidable, explain it
const userInput = "42";
// Converting string to number for calculation
const numericValue = Number(userInput);
if (isNaN(numericValue)) {
// Handle invalid input
}
Tip 8: Use linter (ESLint)
Setup ESLint di project untuk catch common mistakes automatically:
// ESLint will warn about:
// - Using var
// - Using == instead of ===
// - Undeclared variables
// - Unused variables
// - And many more
Tip 9: Test edge cases
function divide(a, b) {
// Test with:
// - Normal numbers: divide(10, 2)
// - Zero divisor: divide(10, 0)
// - Negative numbers: divide(-10, 2)
// - Strings: divide("10", "2")
// - NaN: divide(NaN, 5)
// - Infinity: divide(Infinity, 2)
if (typeof a !== "number" || typeof b !== "number") {
return "Arguments must be numbers";
}
if (b === 0) {
return "Cannot divide by zero";
}
if (isNaN(a) || isNaN(b)) {
return "Invalid number";
}
return a / b;
}
Tip 10: Learn from errors
Setiap kali ketemu error:
- Baca error message dengan teliti
- Understand kenapa terjadi
- Fix dengan proper solution
- Document learning agar ga repeat mistake
Quick Checklist
Sebelum deploy code, check ini:
- [ ] Semua variable declared dengan const/let (no var)
- [ ] Pake
===instead of== - [ ] Type checking di critical operations
- [ ] Input validation di functions
- [ ] No implicit globals (strict mode on)
- [ ] Descriptive variable names
- [ ] Handle edge cases (null, undefined, NaN)
- [ ] Comments untuk tricky parts
- [ ] Linter passing without warnings
Kesimpulan Common Mistakes
Mistakes adalah bagian natural dari learning process. Yang penting adalah:
- Know the common pitfalls - Sekarang kamu udah tau
- Check your code - Before it becomes a bug
- Use tools - Linter, strict mode, etc
- Learn continuously - Every error is a lesson
Dengan memahami dan menghindari common mistakes ini, code quality akan meningkat drastis dan debugging time akan berkurang significant. Start implementing these best practices dari sekarang, dan jadikan kebiasaan!
Challenge: Saatnya Praktek!
Oke, kita udah belajar banyak hal. Sekarang waktunya praktek! Theory tanpa practice itu kayak punya mobil tapi ga pernah dipake.
Challenge 1: Buat 5 Variable dengan Tipe Berbeda
Bikin 5 variable, masing-masing dengan tipe data yang berbeda.
Requirements:
- String, Number, Boolean, Null, Undefined
- Gunakan const/let dengan tepat
- Naming convention yang benar
Solution:
// 1. String
const userName = "Budi Santoso";
// 2. Number
const productPrice = 150000;
// 3. Boolean
const isLoggedIn = true;
// 4. Null - value yang sengaja kosong
let selectedItem = null;
// 5. Undefined - variable belum diisi
let userEmail;
// Verify types
console.log(typeof userName); // "string"
console.log(typeof productPrice); // "number"
console.log(typeof isLoggedIn); // "boolean"
console.log(typeof selectedItem); // "object" (quirk!)
console.log(typeof userEmail); // "undefined"
Challenge 2: Gunakan Template Literal
Gabungkan variable-variable tadi jadi satu pesan menggunakan template literal.
Solution:
const userName = "Budi Santoso";
const productPrice = 150000;
const isLoggedIn = true;
let selectedItem = null;
let userEmail;
const userProfile = `
=================================
USER PROFILE
=================================
Name : ${userName}
Status : ${isLoggedIn ? "Online" : "Offline"}
Email : ${userEmail !== undefined ? userEmail : "Not provided"}
Selected: ${selectedItem !== null ? selectedItem : "No item selected"}
Balance : Rp ${productPrice.toLocaleString('id-ID')}
=================================
`;
console.log(userProfile);
Challenge 3: Type Conversion Practice
Praktekin explicit type conversion:
// 1. String to Number
const stringPrice = "50000";
const numericPrice = Number(stringPrice);
if (isNaN(numericPrice)) {
console.log("Invalid number");
} else {
console.log("Success:", numericPrice); // 50000
}
// 2. Number to String
const quantity = 5;
const stringQuantity = String(quantity);
console.log(typeof stringQuantity); // "string"
// 3. Various to Boolean
console.log(Boolean("")); // false
console.log(Boolean(0)); // false
console.log(Boolean("hello")); // true
// Or use double bang
console.log(!!""); // false
console.log(!!0); // false
console.log(!!"hello"); // true
Challenge 4: Build a Simple Calculator
Combine semua yang udah dipelajari:
function calculate(num1, num2, operator) {
// Convert to numbers
const n1 = Number(num1);
const n2 = Number(num2);
// Validate
if (isNaN(n1) || isNaN(n2)) {
return "Error: Invalid numbers";
}
// Calculate
let result;
if (operator === "+") {
result = n1 + n2;
} else if (operator === "-") {
result = n1 - n2;
} else if (operator === "*") {
result = n1 * n2;
} else if (operator === "/") {
if (n2 === 0) return "Error: Cannot divide by zero";
result = n1 / n2;
} else {
return "Error: Invalid operator";
}
// Display with template literal
return `${n1} ${operator} ${n2} = ${result}`;
}
// Test
console.log(calculate("10", "5", "+")); // 10 + 5 = 15
console.log(calculate("10", "5", "/")); // 10 / 5 = 2
console.log(calculate("10", "0", "/")); // Error: Cannot divide by zero
Challenge 5: Debug the Code
Find dan fix mistakes:
// Buggy Code
var userName = "Budi";
var userName = "Ani"; // ❌ duplicate
let age = "25";
let total = age + 5; // ❌ "255", bukan 30
const user = { name: "Budi" };
user = { name: "Ani" }; // ❌ reassign const
// Fixed Code
const userName = "Budi";
const anotherUser = "Ani"; // different name
let age = "25";
let total = Number(age) + 5; // ✅ 30
const user = { name: "Budi" };
user.name = "Ani"; // ✅ modify property
Evaluasi Diri
Cek pemahaman kamu:
Basic:
- [ ] Bisa deklarasi variable dengan const/let
- [ ] Paham tipe data primitive
- [ ] Bisa pake typeof dan template literal
Intermediate:
- [ ] Bisa handle type conversion
- [ ] Understand truthy/falsy values
- [ ] Bisa validate input dengan type checking
Advanced:
- [ ] Combine multiple concepts dalam function
- [ ] Handle edge cases (null, undefined, NaN)
- [ ] Write defensive code dengan validation
Next Steps: Operators & Conditional
Selamat! Kamu udah menyelesaikan fundamental Variable dan Data Types.
Di pembelajaran selanjutnya:
- Operators: arithmetic, comparison, logical, assignment
- Conditional: if/else, switch case, ternary operator
- Truthy/falsy dalam conditions
Dengan pemahaman variable dan data types yang kuat, topik selanjutnya akan lebih mudah dipahami.
Tips Lanjut Belajar
- Practice Regularly - 15-30 menit setiap hari
- Build Projects - Start small: calculator, todo list
- Debug Sendiri - Understand error, jangan langsung copy-paste
- Read Others' Code - Learn dari GitHub
- Join Community - Ask, share, help others
Penutup
Variable dan data types adalah building blocks dari semua program JavaScript. Dengan memahami konsep ini, kamu udah punya foundation yang kuat.
Key Takeaways:
- const adalah default choice, let kalau value perlu berubah
- typeof untuk check types, === untuk comparison
- Template literal untuk dynamic strings
- Validate semua inputs, practice makes perfect
Sekarang saatnya action! Buka code editor, mulai praktek, dan build something.
Happy coding!
Pelajari JavaScript dari dasar sampai mahir di BuildWithAngga. Bannyak video tutorial, project-based learning, dan community support siap membantu perjalanan belajar programming kamu!
.webp)
