Articles
Pengenalan kepada JavaScript
Asas-asas JavaScript

Asas-asas JavaScript

Artikel ini menerangkan asas-asas JavaScript.

YouTube Video

Melaksanakan Hello World!

Gambaran Keseluruhan JavaScript

JavaScript adalah salah satu bahasa pengaturcaraan yang paling banyak digunakan dalam pembangunan web. Ia terutamanya digunakan untuk menambah elemen dinamik pada laman web, membolehkan manipulasi antara muka pengguna, penghantaran data, dan penciptaan animasi. Ia boleh beroperasi pada bahagian klien (dalam penyemak imbas) dan bahagian pelayan menggunakan teknologi seperti Node.js. Disebabkan kesederhanaan dan fleksibilitinya, ia mudah dipelajari untuk pemula dan banyak digunakan oleh pembangun profesional.

Pembolehubah dalam JavaScript

Pembolehubah dalam JavaScript adalah seperti bekas yang digunakan untuk menyimpan dan mengguna semula data. Dengan menggunakan pembolehubah, anda boleh mengekalkan dan memanipulasi nilai dalam program anda.

Perisytiharan Pembolehubah

Dalam JavaScript, terdapat tiga kata kunci untuk mengisytiharkan pembolehubah.

  • var: Kaedah lama untuk mengisytiharkan pembolehubah, tetapi mengendalikan skopnya adalah rumit dan memerlukan berhati-hati. Ia berdasarkan skop fungsi.
1var x = 10;
  • let: Diperkenalkan dalam ES6, ia adalah cara untuk mengisytiharkan pembolehubah dengan skop blok. Ia boleh diberikan semula tetapi tidak boleh diisytiharkan semula dalam skop yang sama.
1let y = 20;
  • const: Digunakan untuk mengisytiharkan pembolehubah yang tidak boleh diubah (konstan). Ia mempunyai skop blok dan tidak boleh diubah atau diisytihar semula selepas deklarasi.
1const z = 30;

Skop

Pembolehubah mempunyai konsep skop.

Skop 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"
  • Pembolehubah dengan skop global boleh diakses dari mana-mana. Pembolehubah yang diisytihar menggunakan var mempunyai skop global atau fungsi, tetapi let dan const mempunyai skop blok.

Skop 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);

  • Skop blok: Pembolehubah yang diisytihar menggunakan let atau const hanya sah dalam {} (kurungan keriting).

  • Ralat berlaku apabila mengakses dari luar {} (kurungan keriting).

Skop 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);

  • Skop fungsi: Pembolehubah dan fungsi yang ditakrif dalam sebuah fungsi tidak boleh diakses dari luar fungsi tersebut. Pembolehubah yang diisytihar di dalam fungsi menggunakan var adalah milik skop ini.

  • Dalam contoh ini, pembolehubah functionVar boleh diakses dari luar {} (kurungan keriting) selagi ia berada dalam skop fungsi. Sebaliknya, mengakses pembolehubah functionScoped dari luar skop fungsi akan menghasilkan ralat.

Jadi, pembolehubah yang diisytihar menggunakan var hanya mempunyai skop fungsi dan tiada skop blok, menyebabkan risiko digunakan dalam julat yang tidak dijangka. Adalah lebih baik menggunakan const untuk pembolehubah yang tidak berubah dan biasanya menggunakan let, elakkan menggunakan var sebanyak yang mungkin.

Jenis-jenis Data

Pembolehubah JavaScript boleh menyimpan nilai pelbagai jenis data. Terdapat string untuk menangani teks dan number untuk menangani nilai berangka.

Jenis data utama adalah seperti 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);
  • Jenis Data Primitif:
    • number: Menguruskan nilai berangka (integer dan nombor titik terapung).
    • string: Menguruskan rentetan aksara.
    • boolean: Mengendalikan nilai boolean true atau false.
    • null: Secara eksplisit mewakili nilai 'tiada'.
    • undefined: Nilai yang secara automatik diberikan kepada pembolehubah yang belum diinisialisasi.
    • Symbol: Jenis data yang digunakan untuk mencipta 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 pelbagai sifat.
    • Array: Senarai yang mengandungi pelbagai nilai.
    • Function: Objek fungsi.

Penugasan dan Penugasan Semula kepada Pembolehubah

Pembolehubah yang diisytiharkan dengan let atau var boleh diberikan semula, tetapi const tidak boleh diberikan semula selepas diisytiharkan.

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

Pengangkatan Pembolehubah

Dalam JavaScript, terdapat fenomena di mana pengisytiharan pembolehubah 'diangkat' ke bahagian atas skop mereka. Pembolehubah yang diisytiharkan dengan var diangkat, tetapi menggunakan let atau const sebelum pengisytiharan akan menyebabkan ralat.

1console.log(a); // undefined
2var a = 10;
3console.log(a); // 10
  • Dalam kes ini, pembolehubah yang diisytiharkan dengan var diangkat, dan nilainya dipaparkan.
1console.log(b); // ReferenceError
2let b = 20;
  • Pembolehubah yang diisytiharkan dengan let tidak diangkat, menyebabkan ralat.

Penggunaan Pembolehubah dengan Betul

Pertimbangkan perkara berikut untuk penggunaan pembolehubah secara betul.

  • Utamakan penggunaan const dan elakkan menggunakan var.
  • Ikut konvensyen penamaan pembolehubah.
    • Gunakan camelCase, seperti userName atau totalPrice.
    • Elakkan nama yang tidak jelas seperti data atau value, dan gunakan nama yang bermakna untuk meningkatkan kebolehbacaan.
    • Nama pembolehubah tidak boleh bermula dengan nombor, jadi nama seperti 1variable tidak dibenarkan.
  • Penggunaan pembolehubah global secara berlebihan boleh menyebabkan kekaburan skop dan membawa kepada pepijat, jadi elakkan menggunakannya jika boleh.

Ringkasan

  • var: Kaedah lama untuk mengisytiharkan pembolehubah yang memiliki skop fungsi.
  • let: Pembolehubah dengan skop blok yang boleh diberikan semula.
  • const: Pembolehubah dengan skop blok yang tidak boleh diberikan semula (konstan).
  • Adalah penting untuk menggunakan pembolehubah mengikut jenis datanya dan berhati-hati dengan skopnya.

Apakah karakter pelarian dalam JavaScript?

Karakter pelarian adalah satu kaedah untuk mewakili karakter dengan makna khas dalam literal string biasa. Dalam JavaScript, karakter pelarian diperkenalkan dengan backslash \ untuk memberikan efek khas kepada string atau memasukkan karakter kawalan. Karakter pelarian berguna untuk memasukkan elemen seperti baris baru, tab, atau tanda petikan dalam string.

Contoh menggunakan karakter pelarian

Di bawah adalah beberapa contoh kod yang menggunakan karakter pelarian.

Melarikan tanda petikan berganda dan tunggal

Gunakan karakter pelarian untuk mewakili tanda petikan berganda atau tunggal dalam 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!"

Melarikan backslash

Untuk memasukkan backslash itu sendiri dalam string, larikannya dengan \.

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

Melarikan baris baru dan tab

Anda boleh memasukkan 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

Melarikan karakter Unicode

Menggunakan urutan pelarian Unicode membolehkan anda mewakili karakter tertentu dengan kod heksadesimal.

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

Nota

Penggunaan pelarian yang berlebihan boleh merosakkan kebolehbacaan

Penggunaan berlebihan karakter pelarian boleh mengurangkan kebolehbacaan kod anda. Ia sangat penting untuk menggunakan karakter pelarian secara bijak dalam string panjang.

Pertimbangkan untuk menggunakan literal templat

Dalam JavaScript, literal templat menggunakan backticks membolehkan anda memasukkan baris baru atau ekspresi yang disemat tanpa karakter pelarian.

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 pelarian adalah penting untuk mewakili karakter khas atau kawalan dalam string. Dengan melarikan tanda petikan tunggal atau berganda dan menambah baris baru atau tab, anda boleh mencipta string yang lebih fleksibel. Namun, penggunaan yang berlebihan pada karakter pelarian boleh membuat kod sukar dibaca, jadi pertimbangkan untuk menggunakan literal templat apabila sesuai.

Versi JavaScript

JavaScript mempunyai spesifikasi piawai yang dipanggil ECMAScript (ES). JavaScript telah berkembang berdasarkan piawai ini. Berikut adalah penerangan ringkas tentang versi utamanya.

  • ES3 (1999)

    Versi pertama yang diterima secara meluas. Sintaksis asas dan ciri-ciri telah ditetapkan.

  • ES5 (2009)

    Pengenalan kepada strict mode, dan ciri-ciri baru seperti Array.prototype.forEach, Object.keys, dll telah ditambahkan.

  • ES6 / ES2015 (2015)

    Kemas kini besar kepada JavaScript telah dibuat. Banyak ciri asas JavaScript moden, seperti let, const, arrow functions, classes, promises, modules, dsb., telah diperkenalkan.

  • ES7 / ES2016 (2016)

    Array.prototype.includes dan Exponentiation Operator (**) telah ditambah.

  • ES8 / ES2017 (2017)

    async/await diperkenalkan, menjadikan lebih mudah untuk menulis proses tak segerak.

  • ES9 / ES2018 (2018)

    Iterator tak segerak dan Rest/Spread Properties telah ditambah.

  • ES10 / ES2019 (2019)

    flatMap dan Object.fromEntries telah ditambah.

  • ES11 / ES2020 (2020)

    Optional Chaining (?.) dan Nullish Coalescing Operator (??) telah ditambah, membolehkan kod ditulis dengan lebih ringkas dan selamat.

  • ES12 / ES2021 (2021)

    String.prototype.replaceAll dan Promise.any, antara lain, telah ditambah.

  • ES13 / ES2022 (2022)

    Array.prototype.at dan medan private kelas (#field), antara lain, telah ditambah.

  • ES14 / ES2023 (2023)

    Array.prototype.toSorted dan Symbol.prototype.description, antara lain, telah ditambah.

  • ES15 / ES2024 (2024)

    Promise.withResolvers untuk pengurusan Promise yang lebih mudah dan ArrayBuffer yang boleh diubah saiz, antara lain, telah ditambah.

JavaScript semasa dikemas kini setiap tahun, dan ciri baharu ditambah walaupun dalam versi terkini.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video

Jenis Data dalam JavaScript