Hari 1 – Sesi 2: Dasar-Dasar JavaScript (Tipe Data, Variabel, Fungsi & Lainnya)

Selamat datang kembali ke perjalanan JavaScript Anda! Pada sesi sebelumnya, kita membahas pengenalan singkat tentang apa itu JavaScript dan mengapa ia sangat penting dalam pengembangan web. Sekarang, kita akan menyelam lebih dalam ke jantung JavaScript dengan menjelajahi tipe data fundamental, variabel, dan fungsi – blok bangunan yang membentuk dasar dari setiap program JavaScript.

Mengapa Dasar-Dasar Ini Penting?

Memahami dasar-dasar ini sangat penting karena:

• Fondasi yang Kokoh: Mereka menyediakan landasan yang diperlukan untuk memahami konsep JavaScript yang lebih kompleks di masa mendatang.
• Penulisan Kode yang Efisien: Pemahaman yang baik memungkinkan Anda menulis kode yang bersih, efisien, dan mudah dibaca.
• Pemecahan Masalah yang Lebih Mudah: Ketika Anda memahami bagaimana berbagai komponen bekerja, Anda dapat dengan mudah mengidentifikasi dan memperbaiki kesalahan dalam kode Anda.
• Pengembangan Web yang Efektif: Mereka membuka pintu untuk membuat halaman web interaktif, aplikasi web dinamis, dan bahkan aplikasi sisi server.

Jadi, mari kita mulai perjalanan kita ke dunia JavaScript yang menarik ini!

Tipe Data di JavaScript

Tipe data adalah klasifikasi yang menentukan jenis nilai yang dapat dipegang oleh sebuah variabel. JavaScript memiliki beberapa tipe data fundamental yang perlu Anda pahami.

1. Tipe Data Primitif

Tipe data primitif adalah tipe data yang paling mendasar dan tidak dapat diubah (immutable). JavaScript memiliki tujuh tipe data primitif:

1. Number: Merepresentasikan nilai numerik, baik bilangan bulat (integer) maupun bilangan desimal (floating-point). Contoh:

   • 10 (Integer)
   • 3.14 (Floating-point)
   • -5 (Integer negatif)

2. String: Merepresentasikan urutan karakter. String harus diapit oleh tanda kutip tunggal (') atau tanda kutip ganda ("). Contoh:

   • 'Hello, world!'
   • "JavaScript is fun!"

3. Boolean: Merepresentasikan nilai kebenaran, yaitu true (benar) atau false (salah). Contoh:

   • true
   • false

4. Undefined: Merepresentasikan variabel yang telah dideklarasikan tetapi belum diberi nilai. Contoh:

   let myVariable; // myVariable is undefined

5. Null: Merepresentasikan nilai yang secara sengaja tidak ada atau kosong. Contoh:

   let myVariable = null; // myVariable is null

6. Symbol (ES6): Merepresentasikan nilai unik dan immutable yang sering digunakan sebagai kunci properti objek. Contoh:

   const mySymbol = Symbol('mySymbol');

7. BigInt (ES2020): Merepresentasikan bilangan bulat dengan presisi arbitrer, yang dapat digunakan untuk merepresentasikan bilangan yang lebih besar dari batasan tipe data Number. Contoh:

   const myBigInt = 9007199254740991n;

2. Tipe Data Objek

Tipe data objek adalah tipe data yang kompleks dan dapat menyimpan kumpulan data dan fungsi. Beberapa tipe data objek yang paling umum adalah:

1. Object: Kumpulan pasangan kunci-nilai. Kunci (key) berupa string, dan nilai (value) dapat berupa tipe data apa pun. Contoh:

   const myObject = { name: 'John', age: 30, city: 'New York' };

2. Array: Kumpulan nilai yang diurutkan. Setiap nilai dalam array memiliki indeks numerik, dimulai dari 0. Contoh:

   const myArray = ['apple', 'banana', 'orange'];

3. Function: Blok kode yang dapat dieksekusi. Fungsi dapat menerima input (parameter) dan menghasilkan output (nilai kembalian). Contoh:

   function add(a, b) { return a + b; }

Memeriksa Tipe Data

Anda dapat menggunakan operator typeof untuk memeriksa tipe data suatu variabel. Contoh:

console.log(typeof 10); // Output: "number"
console.log(typeof 'Hello'); // Output: "string"
console.log(typeof true); // Output: "boolean"
console.log(typeof undefined); // Output: "undefined"
console.log(typeof null); // Output: "object" (sebuah bug historis)
console.log(typeof { name: 'John' }); // Output: "object"
console.log(typeof ['apple', 'banana']); // Output: "object"
console.log(typeof function() {}); // Output: "function"

Catatan Penting: Operator typeof null mengembalikan "object", yang merupakan bug historis di JavaScript. Untuk memeriksa apakah suatu variabel adalah null, Anda harus menggunakan perbandingan eksplisit (=== null).

Variabel di JavaScript

Variabel adalah wadah yang digunakan untuk menyimpan data dalam program. Di JavaScript, Anda dapat mendeklarasikan variabel menggunakan tiga kata kunci: var, let, dan const. Pilihan kata kunci mana yang digunakan memengaruhi cakupan (scope) dan perilaku variabel.

1. var

var adalah cara tradisional untuk mendeklarasikan variabel di JavaScript. Variabel yang dideklarasikan dengan var memiliki cakupan fungsi (function scope) atau cakupan global (global scope), tergantung di mana mereka dideklarasikan.

Contoh:

function myFunction() {
  var x = 10;
  console.log(x); // Output: 10
}
myFunction();
//console.log(x); // Error: x is not defined (karena x berada di dalam cakupan fungsi)

var y = 20;
function anotherFunction() {
  console.log(y); // Output: 20 (karena y berada di cakupan global)
}
anotherFunction();
console.log(y); // Output: 20

Hoisting: Variabel yang dideklarasikan dengan var di-hoist ke bagian atas cakupan mereka. Ini berarti bahwa deklarasi variabel dipindahkan ke bagian atas cakupan sebelum kode dieksekusi. Namun, inisialisasi (penugasan nilai) tidak di-hoist. Contoh:

console.log(z); // Output: undefined (karena z dideklarasikan tetapi belum diberi nilai)
var z = 30;
console.log(z); // Output: 30

Masalah dengan var: Karena cakupannya yang luas dan perilaku hoisting, var dapat menyebabkan masalah yang tidak terduga, terutama dalam kode yang lebih besar dan kompleks. Oleh karena itu, disarankan untuk menggunakan let dan const sebagai gantinya.

2. let

let diperkenalkan di ES6 (ECMAScript 2015) dan menyediakan cara yang lebih modern dan aman untuk mendeklarasikan variabel. Variabel yang dideklarasikan dengan let memiliki cakupan blok (block scope), yang berarti mereka hanya dapat diakses di dalam blok kode tempat mereka dideklarasikan (misalnya, di dalam pernyataan if, for, atau while).

Contoh:

function myFunction() {
  let x = 10;
  if (true) {
    let x = 20; // x yang berbeda di dalam blok if
    console.log(x); // Output: 20
  }
  console.log(x); // Output: 10 (x dari cakupan fungsi)
}
myFunction();
//console.log(x); // Error: x is not defined (karena x berada di dalam cakupan fungsi)

Hoisting: Variabel yang dideklarasikan dengan let juga di-hoist, tetapi mereka tidak diinisialisasi. Mencoba mengakses variabel let sebelum deklarasinya akan menyebabkan kesalahan ReferenceError. Ini dikenal sebagai “temporal dead zone” (TDZ).

console.log(y); // Error: Cannot access 'y' before initialization (TDZ)
let y = 30;
console.log(y); // Output: 30

3. const

const juga diperkenalkan di ES6 dan digunakan untuk mendeklarasikan konstanta, yaitu variabel yang nilainya tidak dapat diubah setelah diinisialisasi. Variabel yang dideklarasikan dengan const juga memiliki cakupan blok (block scope) dan perilaku hoisting yang sama dengan let.

Contoh:

const PI = 3.14159;
//PI = 3.14; // Error: Assignment to constant variable.

function myFunction() {
  const x = 10;
  if (true) {
    const x = 20; // x yang berbeda di dalam blok if
    console.log(x); // Output: 20
  }
  console.log(x); // Output: 10 (x dari cakupan fungsi)
}
myFunction();

Penting: Meskipun nilai variabel const tidak dapat diubah, ini tidak berarti bahwa objek yang direferensikan oleh variabel const tidak dapat diubah. Jika variabel const merujuk ke objek atau array, Anda masih dapat memodifikasi properti objek atau elemen array tersebut.

const myObject = { name: 'John' };
myObject.name = 'Jane'; // Valid, karena kita memodifikasi properti objek
console.log(myObject.name); // Output: "Jane"

Kapan Menggunakan var, let, dan const?

• Gunakan const secara default untuk semua variabel yang nilainya tidak akan berubah.
• Gunakan let untuk variabel yang nilainya mungkin berubah.
• Hindari menggunakan var kecuali jika Anda memiliki alasan khusus untuk melakukannya (misalnya, untuk kompatibilitas dengan kode yang lebih lama).

Fungsi di JavaScript

Fungsi adalah blok kode yang dirancang untuk melakukan tugas tertentu. Fungsi dapat dipanggil (dijalankan) berkali-kali dari berbagai bagian program. Fungsi adalah komponen penting dalam pemrograman modular dan reuse kode.

1. Mendefinisikan Fungsi

Ada beberapa cara untuk mendefinisikan fungsi di JavaScript:

1. Deklarasi Fungsi (Function Declaration):

   function functionName(parameter1, parameter2, ...) {
  // Kode yang akan dieksekusi
  return value; // Opsional: mengembalikan nilai
}

   Contoh:

   function add(a, b) {
  return a + b;
}

2. Ekspresi Fungsi (Function Expression):

   const functionName = function(parameter1, parameter2, ...) {
  // Kode yang akan dieksekusi
  return value; // Opsional: mengembalikan nilai
};

   Contoh:

   const multiply = function(a, b) {
  return a * b;
};

3. Fungsi Panah (Arrow Function) (ES6):

   const functionName = (parameter1, parameter2, ...) => {
  // Kode yang akan dieksekusi
  return value; // Opsional: mengembalikan nilai
};

   Jika fungsi hanya memiliki satu ekspresi, Anda dapat menghilangkan kurung kurawal ({}) dan kata kunci return.

   const functionName = (parameter1, parameter2, ...) => value;

   Contoh:

   const square = (x) => x * x;

2. Memanggil Fungsi

Untuk memanggil fungsi, gunakan nama fungsi diikuti oleh tanda kurung (()). Jika fungsi menerima parameter, berikan nilai-nilai parameter di dalam tanda kurung.

const sum = add(5, 3); // Memanggil fungsi add dengan parameter 5 dan 3
console.log(sum); // Output: 8

3. Parameter dan Argumen

Parameter adalah variabel yang didefinisikan dalam deklarasi fungsi. Argumen adalah nilai yang diberikan kepada parameter saat fungsi dipanggil.

function greet(name) { // name adalah parameter
  console.log('Hello, ' + name + '!');
}
greet('John'); // 'John' adalah argumen

4. Nilai Kembalian (Return Value)

Fungsi dapat mengembalikan nilai menggunakan kata kunci return. Jika fungsi tidak memiliki pernyataan return, fungsi tersebut akan mengembalikan undefined.

function calculateArea(width, height) {
  const area = width * height;
  return area; // Mengembalikan nilai area
}
const rectangleArea = calculateArea(10, 5);
console.log(rectangleArea); // Output: 50

5. Cakupan Fungsi (Function Scope)

Variabel yang dideklarasikan di dalam fungsi hanya dapat diakses di dalam fungsi tersebut. Ini disebut cakupan fungsi.

function myFunction() {
  var x = 10;
  console.log(x); // Output: 10
}
myFunction();
//console.log(x); // Error: x is not defined (karena x berada di dalam cakupan fungsi)

6. Fungsi Sebagai Nilai (Functions as Values)

Di JavaScript, fungsi adalah *first-class citizens*, yang berarti mereka dapat diperlakukan seperti tipe data lainnya. Anda dapat menetapkan fungsi ke variabel, meneruskan fungsi sebagai argumen ke fungsi lain, dan mengembalikan fungsi dari fungsi lain.

Contoh: Menetapkan fungsi ke variabel

const myFunc = function() {
  console.log('Hello from myFunc!');
};
myFunc(); // Output: Hello from myFunc!

Contoh: Meneruskan fungsi sebagai argumen

function executeFunction(func) {
  func(); // Memanggil fungsi yang diteruskan
}
executeFunction(myFunc); // Output: Hello from myFunc!

7. Fungsi Rekursif (Recursive Functions)

Fungsi rekursif adalah fungsi yang memanggil dirinya sendiri. Rekursi dapat digunakan untuk memecahkan masalah yang dapat dipecah menjadi sub-masalah yang lebih kecil dari jenis yang sama.

Contoh: Menghitung faktorial menggunakan rekursi

function factorial(n) {
  if (n === 0) {
    return 1;
  } else {
    return n * factorial(n - 1); // Memanggil diri sendiri
  }
}
console.log(factorial(5)); // Output: 120

Peringatan: Rekursi yang tidak terkontrol dapat menyebabkan *stack overflow*, yang terjadi ketika fungsi rekursif memanggil dirinya sendiri terlalu banyak kali tanpa mencapai kondisi berhenti (base case). Pastikan untuk selalu memiliki kondisi berhenti yang jelas dalam fungsi rekursif Anda.

Operator di JavaScript

Operator adalah simbol yang melakukan operasi pada satu atau lebih operand (nilai). JavaScript memiliki berbagai jenis operator, termasuk:

1. Operator Aritmatika: Melakukan operasi matematika dasar.
2. Operator Penugasan: Menetapkan nilai ke variabel.
3. Operator Perbandingan: Membandingkan dua nilai.
4. Operator Logika: Melakukan operasi logika (AND, OR, NOT).
5. Operator String: Menggabungkan string.

1. Operator Aritmatika

• + (Penambahan)
• - (Pengurangan)
• * (Perkalian)
• / (Pembagian)
• % (Modulo – sisa pembagian)
• ** (Eksponensiasi – pangkat)
• ++ (Increment – menaikkan nilai variabel sebesar 1)
• -- (Decrement – menurunkan nilai variabel sebesar 1)

Contoh:

let x = 10;
let y = 5;
console.log(x + y); // Output: 15
console.log(x - y); // Output: 5
console.log(x * y); // Output: 50
console.log(x / y); // Output: 2
console.log(x % y); // Output: 0
console.log(x ** y); // Output: 100000
x++;
console.log(x); // Output: 11
y--;
console.log(y); // Output: 4

2. Operator Penugasan

• = (Penugasan sederhana)
• += (Penugasan penambahan)
• -= (Penugasan pengurangan)
• *= (Penugasan perkalian)
• /= (Penugasan pembagian)
• %= (Penugasan modulo)
• **= (Penugasan eksponensiasi)

Contoh:

let x = 10;
x += 5; // x = x + 5
console.log(x); // Output: 15
x -= 3; // x = x - 3
console.log(x); // Output: 12

3. Operator Perbandingan

• == (Sama dengan – membandingkan nilai setelah konversi tipe)
• === (Sama dengan identik – membandingkan nilai dan tipe data)
• != (Tidak sama dengan – membandingkan nilai setelah konversi tipe)
• !== (Tidak sama dengan identik – membandingkan nilai dan tipe data)
• > (Lebih besar dari)
• < (Kurang dari)
• >= (Lebih besar dari atau sama dengan)
• <= (Kurang dari atau sama dengan)

Contoh:

console.log(5 == '5'); // Output: true (karena '5' dikonversi menjadi angka 5)
console.log(5 === '5'); // Output: false (karena 5 adalah number dan '5' adalah string)
console.log(5 != '5'); // Output: false
console.log(5 !== '5'); // Output: true
console.log(10 > 5); // Output: true
console.log(10 < 5); // Output: false

Penting: Gunakan === dan !== untuk perbandingan yang lebih aman dan menghindari perilaku yang tidak terduga karena konversi tipe data.

4. Operator Logika

• && (AND - benar jika kedua operand benar)
• || (OR - benar jika salah satu operand benar)
• ! (NOT - membalikkan nilai kebenaran operand)

Contoh:

let x = 10;
let y = 5;
console.log(x > 5 && y < 10); // Output: true (karena kedua kondisi benar)
console.log(x > 15 || y < 10); // Output: true (karena salah satu kondisi benar)
console.log(!(x > 15)); // Output: true (karena x > 15 adalah false, dan NOT false adalah true)

5. Operator String

• + (Penggabungan string)

Contoh:

let firstName = 'John';
let lastName = 'Doe';
let fullName = firstName + ' ' + lastName;
console.log(fullName); // Output: John Doe

Kesimpulan

Selamat! Anda telah berhasil menyelesaikan Sesi 2 tentang dasar-dasar JavaScript. Kita telah membahas tipe data, variabel, fungsi, dan operator. Memahami konsep-konsep ini sangat penting untuk membangun fondasi yang kuat dalam pemrograman JavaScript.

Langkah Selanjutnya

• Latihan: Coba berbagai contoh kode yang telah kita bahas. Ubah nilai variabel, eksperimen dengan berbagai operator, dan tulis fungsi Anda sendiri.
• Eksplorasi: Jelajahi dokumentasi JavaScript di MDN Web Docs (Mozilla Developer Network) untuk mempelajari lebih lanjut tentang tipe data, variabel, fungsi, dan operator.
• Proyek Kecil: Mulailah mengerjakan proyek kecil menggunakan apa yang telah Anda pelajari. Ini akan membantu Anda mempraktikkan keterampilan Anda dan memperdalam pemahaman Anda.

Di sesi berikutnya, kita akan membahas konsep yang lebih menarik, seperti kontrol aliran (pernyataan if, loop), objek, dan array. Tetaplah bersama kami!