Articles
Pengenalan ke JavaScript
Dasar-dasar JavaScript

Dasar-dasar JavaScript

Artikel ini menjelaskan dasar-dasar JavaScript.

YouTube Video

Menjalankan Hello World!

Ikhtisar JavaScript

JavaScript adalah salah satu bahasa pemrograman yang paling banyak digunakan dalam pengembangan web. Ini terutama digunakan untuk menambahkan elemen dinamis ke halaman web, memungkinkan manipulasi antarmuka pengguna, transmisi data, dan pembuatan animasi. JavaScript dapat berjalan di sisi klien (di dalam browser) dan sisi server menggunakan teknologi seperti Node.js. Karena kesederhanaan dan fleksibilitasnya, JavaScript mudah dipelajari oleh pemula dan digunakan secara luas oleh pengembang profesional.

Variabel dalam JavaScript

Variabel dalam JavaScript seperti wadah yang digunakan untuk menyimpan dan menggunakan kembali data. Dengan menggunakan variabel, Anda dapat memelihara dan memanipulasi nilai dalam program Anda.

Deklarasi Variabel

Dalam JavaScript, ada tiga kata kunci untuk mendeklarasikan variabel.

  • var: Metode lama untuk mendeklarasikan variabel, tetapi pengelolaan cakupannya rumit dan memerlukan kehati-hatian. Berdasarkan cakupan fungsi.
1var x = 10;
  • let: Diperkenalkan dalam ES6, ini adalah cara untuk mendeklarasikan variabel dengan cakupan blok. Dapat diubah nilainya tetapi tidak dapat dideklarasikan ulang dalam cakupan yang sama.
1let y = 20;
  • const: Digunakan untuk mendeklarasikan variabel yang tidak dapat diubah (konstanta). Memiliki cakupan blok dan tidak dapat diubah atau dideklarasikan ulang setelah deklarasi.
1const z = 30;

Cakupan

Variabel memiliki konsep cakupan.

Cakupan Global 

1var globalVar = 'This is global'; // Global scope
2
3function accessGlobal() {
4    console.log(globalVar); // Able to access global variable
5}
6
7accessGlobal(); // Outputs "This is global"
  • Variabel dengan Cakupan Global dapat diakses dari mana saja. Variabel yang dideklarasikan dengan var memiliki cakupan global atau fungsi, tetapi let dan const memiliki cakupan blok.

Cakupan Blok 

1if (true) {
2    let localVar = "This is a block-scoped variable";
3
4    // Accessible inside the brackets
5    console.log(localVar);
6}
7
8// Error: localVar cannot be used outside of this scope
9console.log(localVar);

  • Cakupan Blok: Variabel yang dideklarasikan dengan let atau const hanya berlaku di dalam {} (kurung kurawal).

  • Terjadi kesalahan saat mengakses dari luar {} (kurung kurawal).

Cakupan Fungsi 

 1function myFunction() {
 2    var functionScoped = 'This is function scope';
 3    // Accessible inside the function
 4    console.log(functionScoped);
 5
 6    if (true) {
 7        var functionVar = 'This is also function scope';
 8    }
 9    // functionVar can be used inside of the fucntion
10    console.log(functionVar);
11}
12
13myFunction(); // Outputs "This is function scope"
14
15// Error: functionScoped is not defined
16console.log(functionScoped);

  • Cakupan Fungsi: Variabel dan fungsi yang didefinisikan di dalam fungsi tidak dapat diakses dari luar fungsi. Variabel yang dideklarasikan di dalam fungsi dengan var termasuk dalam cakupan ini.

  • Dalam contoh ini, variabel functionVar dapat diakses dari luar {} (kurung kurawal) selama masih berada dalam lingkup fungsi. Di sisi lain, mengakses variabel functionScoped dari luar lingkup fungsi akan menghasilkan kesalahan.

Dengan demikian, variabel yang dideklarasikan dengan var hanya memiliki cakupan fungsi dan tidak memiliki cakupan blok, sehingga berisiko digunakan di luar cakupan yang diharapkan. Lebih baik menggunakan const untuk variabel yang tidak berubah dan biasanya menggunakan let, serta menghindari penggunaan var sebanyak mungkin.

Tipe Data

Variabel JavaScript dapat menyimpan nilai dari berbagai tipe data. Ada string untuk menangani teks dan number untuk menangani nilai numerik.

Tipe data utama adalah sebagai berikut:.

 1// Number: Numeric type (integer and floating point number)
 2let integerNumber = 42;
 3let floatNumber = 3.14;
 4console.log("Number (Integer):", integerNumber);
 5console.log("Number (Float):", floatNumber);
 6
 7// String: String type
 8let text = "Hello, JavaScript!";
 9console.log("String:", text);
10
11// Boolean: Boolean type (true or false)
12let isJavaScriptFun = true;
13let isError = false;
14console.log("Boolean (true):", isJavaScriptFun);
15console.log("Boolean (false):", isError);
16
17// Null: Explicitly represents "nothing"
18let emptyValue = null;
19console.log("Null:", emptyValue);
20
21// Undefined: The default value assigned to an uninitialized variable
22let notDefined;
23console.log("Undefined:", notDefined);
24
25// Symbol: A data type for creating unique values
26let uniqueKey = Symbol("id");
27console.log("Symbol:", uniqueKey);
  • Tipe Primitif:
    • number: Menangani nilai numerik (bilangan bulat dan bilangan desimal).
    • string: Menangani deretan karakter.
    • boolean: Mengelola nilai boolean true atau false.
    • null: Secara eksplisit merepresentasikan nilai 'tidak ada'.
    • undefined: Sebuah nilai yang secara otomatis diberikan pada variabel yang belum diinisialisasi.
    • Symbol: Tipe data yang digunakan untuk membuat nilai unik.
 1// Object: A data structure that holds multiple properties
 2let person = {
 3    name: "Alice",
 4    age: 25,
 5    isStudent: false
 6};
 7console.log("Object:", person);
 8console.log("Object Property (name):", person.name);
 9console.log("Object Property (age):", person.age);
10
11// Array: A list that holds multiple values
12let numbers = [10, 20, 30, 40];
13console.log("Array:", numbers);
14console.log("Array Element (index 0):", numbers[0]);
15
16// Function: A function object
17function greet(name) {
18  return "Hello, " + name + "!";
19}
20console.log("Function Output:", greet("Bob"));
21
22// Another way to define a function using arrow syntax
23let add = (a, b) => a + b;
24console.log("Arrow Function Output (3 + 5):", add(3, 5));
  • Jenis Objek:
    • Object: Struktur data dengan beberapa properti.
    • Array: Sebuah daftar yang berisi beberapa nilai.
    • Function: Sebuah objek fungsi.

Penugasan dan Penugasan Ulang pada Variabel

Variabel yang dideklarasikan dengan let atau var dapat diubah nilainya, tetapi const tidak dapat diubah setelah dideklarasikan.

1let score = 100;
2score = 150; // Correct
3
4const pi = 3.14;
5pi = 3.14159; // Error

Pengangkatan Variabel (Hoisting)

Dalam JavaScript, ada fenomena di mana deklarasi variabel 'diangkat' ke bagian atas cakupannya. Variabel yang dideklarasikan dengan var diangkat, tetapi menggunakan let atau const sebelum deklarasi akan menyebabkan kesalahan.

1console.log(a); // undefined
2var a = 10;
3console.log(a); // 10
  • Dalam kasus ini, variabel yang dideklarasikan dengan var akan diangkat (hoisted), dan nilainya akan dikeluarkan.
1console.log(b); // ReferenceError
2let b = 20;
  • Variabel yang dideklarasikan dengan let tidak diangkat (hoisted), yang menyebabkan kesalahan.

Penggunaan Variabel yang Tepat

Pertimbangkan poin-poin berikut untuk penggunaan variabel yang tepat.

  • Lebih baik menggunakan const dan hindari menggunakan var.
  • Ikuti konvensi penamaan variabel.
    • Gunakan camelCase, seperti userName atau totalPrice.
    • Hindari nama yang ambigu seperti data atau value, dan gunakan nama yang bermakna untuk meningkatkan keterbacaan.
    • Nama variabel tidak boleh dimulai dengan angka, jadi nama seperti 1variable tidak diperbolehkan.
  • Penggunaan variabel global yang berlebihan dapat menyebabkan ambiguitas cakupan dan memicu bug, jadi hindari menggunakannya sebisa mungkin.

Ringkasan

  • var: Metode deklarasi variabel lama dengan cakupan fungsi (function scope).
  • let: Variabel dengan cakupan blok yang nilainya dapat diubah.
  • const: Variabel dengan cakupan blok yang nilainya tidak dapat diubah (konstanta).
  • Penting untuk menggunakan variabel sesuai dengan jenis datanya dan memperhatikan cakupannya.

Apa itu karakter escape dalam JavaScript?

Karakter escape adalah metode yang digunakan untuk merepresentasikan karakter dengan makna khusus dalam literal string biasa. Dalam JavaScript, karakter escape diperkenalkan dengan tanda backslash \ untuk memberikan efek khusus pada string atau untuk menyertakan karakter kontrol. Karakter escape berguna untuk menyertakan elemen seperti baris baru, tab, atau tanda kutip dalam sebuah string.

Contoh penggunaan karakter escape

Berikut adalah beberapa contoh kode yang menggunakan karakter escape.

Escape tanda kutip ganda dan tunggal

Gunakan karakter escape untuk merepresentasikan tanda kutip ganda atau tunggal dalam sebuah string.

1const singleQuote = 'It\'s a beautiful day!';
2console.log(singleQuote); // Output: It's a beautiful day!
3
4const doubleQuote = "He said, \"Hello there!\"";
5console.log(doubleQuote); // Output: He said, "Hello there!"

Escape tanda backslash

Untuk menyertakan backslash itu sendiri dalam string, gunakan escape dengan \.

1const path = "C:\\Program Files\\MyApp";
2console.log(path); // Output: C:\Program Files\MyApp

Escape baris baru dan tab

Anda dapat menyisipkan baris baru dan tab untuk membuat string panjang lebih mudah dibaca.

1const multiline = "First line\nSecond line\nThird line";
2console.log(multiline);
3// Output:
4// First line
5// Second line
6// Third line
7
8const tabbed = "Column1\tColumn2\tColumn3";
9console.log(tabbed); // Output: Column1  Column2  Column3

Escape karakter Unicode

Menggunakan urutan escape Unicode memungkinkan Anda merepresentasikan karakter tertentu dengan kode heksadesimal.

1const smiley = "\u263A";  // Copyright Mark
2console.log(smiley);

Catatan

Penggunaan karakter escape secara berlebihan dapat merusak keterbacaan

Penggunaan karakter escape secara berlebihan dapat mengurangi keterbacaan kode Anda. Sangat penting untuk menggunakan karakter escape dengan bijaksana, terutama dalam string panjang.

Pertimbangkan menggunakan template literal

Dalam JavaScript, template literal menggunakan backticks memungkinkan Anda menyertakan baris baru atau ekspresi tertanam tanpa karakter escape.

1const message = `This is a message
2that spans multiple lines`;
3console.log(message);
4// Output:
5// This is a message
6// that spans multiple lines

Ringkasan

Karakter escape sangat penting untuk merepresentasikan karakter khusus atau kontrol dalam string. Dengan melakukan escape pada tanda kutip tunggal atau ganda serta menambahkan baris baru atau tab, Anda dapat menciptakan string yang lebih fleksibel. Namun, penggunaan karakter escape secara berlebihan dapat membuat kode sulit dibaca, jadi pertimbangkan untuk menggunakan template literal jika sesuai.

Versi JavaScript

JavaScript memiliki spesifikasi standar yang disebut ECMAScript (ES). JavaScript telah berkembang berdasarkan standar ini. Berikut adalah deskripsi singkat tentang versi utamanya.

  • ES3 (1999)

    Versi pertama yang digunakan secara luas. Sintaksis dasar dan fitur dasar telah ditetapkan.

  • ES5 (2009)

    Diperkenalkannya strict mode, serta fitur baru seperti Array.prototype.forEach, Object.keys, dll.

  • ES6 / ES2015 (2015)

    Pembaruan besar telah dilakukan pada JavaScript. Banyak fitur dasar untuk JavaScript modern, seperti let, const, arrow functions, classes, promises, modules, dll., diperkenalkan.

  • ES7 / ES2016 (2016)

    Array.prototype.includes dan Operator Eksponensiasi (**) ditambahkan.

  • ES8 / ES2017 (2017)

    async/await diperkenalkan, membuat penulisan proses asinkron menjadi lebih sederhana.

  • ES9 / ES2018 (2018)

    Iterator asinkron dan Properti Rest/Spread ditambahkan.

  • ES10 / ES2019 (2019)

    flatMap dan Object.fromEntries ditambahkan.

  • ES11 / ES2020 (2020)

    Optional Chaining (?.) dan Operator Nullish Coalescing (??) ditambahkan, memungkinkan penulisan kode yang lebih sederhana dan aman.

  • ES12 / ES2021 (2021)

    String.prototype.replaceAll dan Promise.any, di antara yang lainnya, telah ditambahkan.

  • ES13 / ES2022 (2022)

    Array.prototype.at dan bidang private kelas (#field), di antara yang lainnya, telah ditambahkan.

  • ES14 / ES2023 (2023)

    Array.prototype.toSorted dan Symbol.prototype.description, di antara yang lainnya, telah ditambahkan.

  • ES15 / ES2024 (2024)

    Promise.withResolvers untuk pengelolaan Promise yang lebih mudah dan ArrayBuffer yang dapat diubah ukurannya, di antara yang lainnya, telah ditambahkan.

JavaScript saat ini diperbarui setiap tahun, dan fitur baru ditambahkan bahkan pada versi terbaru.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video

Jenis Data dalam JavaScript