Articles
Giới thiệu về JavaScript
Những kiến thức cơ bản về JavaScript

Những kiến thức cơ bản về JavaScript

Bài viết này giải thích những kiến thức cơ bản về JavaScript.

YouTube Video

Thực thi Hello World!

Tổng quan về JavaScript

JavaScript là một trong những ngôn ngữ lập trình được sử dụng rộng rãi nhất trong phát triển web. Nó chủ yếu được sử dụng để thêm các yếu tố động vào trang web, cho phép thao tác giao diện người dùng, truyền dữ liệu và tạo hoạt hình. Nó có thể hoạt động ở phía khách hàng (trong trình duyệt) và phía máy chủ bằng cách sử dụng các công nghệ như Node.js. Vì sự đơn giản và linh hoạt của nó, JavaScript dễ dàng cho người mới bắt đầu học và được các nhà phát triển chuyên nghiệp sử dụng rộng rãi.

Biến trong JavaScript

Biến trong JavaScript giống như các thùng chứa được sử dụng để lưu trữ và tái sử dụng dữ liệu. Bằng cách sử dụng biến, bạn có thể duy trì và thao tác giá trị trong chương trình của mình.

Khai báo biến

Trong JavaScript, có ba từ khóa để khai báo biến.

  • var: Một phương pháp cũ để khai báo biến, nhưng cách xử lý phạm vi của nó phức tạp và cần cẩn trọng. Nó dựa trên phạm vi của hàm.
1var x = 10;
  • let: Được giới thiệu trong ES6, đây là cách khai báo biến với phạm vi khối. Nó có thể được gán lại nhưng không thể khai báo lại trong cùng một phạm vi.
1let y = 20;
  • const: Được sử dụng để khai báo các biến không thể thay đổi (hằng số). Nó có phạm vi khối và không thể được gán lại hoặc khai báo lại sau khi đã khai báo.
1const z = 30;

Phạm vi

Các biến có khái niệm về phạm vi hoạt động.

Phạm vi toàn cục 

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"
  • Các biến trong phạm vi toàn cục có thể được truy cập từ bất kỳ đâu. Các biến được khai báo bằng var có phạm vi toàn cục hoặc phạm vi hàm, nhưng let và const có phạm vi khối.

Phạm vi khối 

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

  • Phạm vi khối: Biến được khai báo bằng let hoặc const chỉ hợp lệ trong dấu {} (dấu ngoặc nhọn).

  • Lỗi xảy ra khi truy cập từ bên ngoài {} (dấu ngoặc nhọn).

Phạm vi hàm 

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

  • Phạm vi hàm: Các biến và hàm được định nghĩa bên trong một hàm không thể được truy cập từ bên ngoài hàm. Các biến được khai báo bên trong một hàm với var thuộc phạm vi này.

  • Trong ví dụ này, biến functionVar có thể được truy cập từ bên ngoài {} (dấu ngoặc nhọn) miễn là nó nằm trong phạm vi của hàm. Mặt khác, việc truy cập biến functionScoped từ bên ngoài phạm vi của hàm sẽ dẫn đến lỗi.

Do đó, các biến được khai báo bằng var chỉ có phạm vi hàm và không có phạm vi khối, tạo ra rủi ro khi được sử dụng ngoài dự kiến. Nên sử dụng const cho các biến không thay đổi và thường xuyên sử dụng let, hạn chế sử dụng var càng nhiều càng tốt.

Các kiểu dữ liệu

Các biến JavaScript có thể lưu trữ giá trị thuộc nhiều kiểu dữ liệu khác nhau. Có string để xử lý văn bản và number để xử lý các giá trị số.

Các kiểu dữ liệu chính bao gồm:.

 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);
  • Các kiểu dữ liệu nguyên thủy:
    • number: Xử lý các giá trị số (số nguyên và số thập phân).
    • string: Xử lý chuỗi ký tự.
    • boolean: Xử lý các giá trị boolean true hoặc false.
    • null: Cụ thể đại diện cho một giá trị 'không có gì'.
    • undefined: Một giá trị tự động được gán cho các biến chưa được khởi tạo.
    • Symbol: Một kiểu dữ liệu được sử dụng để tạo ra các giá trị duy nhất.
 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));
  • Các Loại Đối Tượng:
    • Object: Một cấu trúc dữ liệu với nhiều thuộc tính.
    • Mảng: Một danh sách chứa nhiều giá trị.
    • Hàm: Một đối tượng hàm.

Gán và Gán Lại Biến

Các biến được khai báo với let hoặc var có thể được gán lại, nhưng const thì không thể gán lại sau khi đã khai báo.

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

Hiện Tượng Kéo Lên Biến

Trong JavaScript, có hiện tượng khi khai báo biến được 'kéo lên' đầu phạm vi của nó. Các biến khai báo với var được kéo lên, nhưng sử dụng let hoặc const trước khi khai báo sẽ gây lỗi.

1console.log(a); // undefined
2var a = 10;
3console.log(a); // 10
  • Trong trường hợp này, các biến được khai báo với var sẽ được nâng lên và giá trị của chúng sẽ được xuất ra.
1console.log(b); // ReferenceError
2let b = 20;
  • Các biến được khai báo với let sẽ không được nâng lên, dẫn đến lỗi.

Sử dụng Biến Một Cách Đúng Đắn

Hãy cân nhắc các điểm sau để sử dụng biến một cách đúng đắn.

  • Ưu tiên sử dụng const và tránh sử dụng var.
  • Tuân theo quy ước đặt tên biến.
    • Sử dụng kiểu chữ camelCase, chẳng hạn như userName hoặc totalPrice.
    • Tránh các tên mơ hồ như data hoặc value, và sử dụng các tên có ý nghĩa để cải thiện khả năng đọc.
    • Tên biến không thể bắt đầu bằng một chữ số, vì vậy các tên như 1variable là không được phép.
  • Việc sử dụng quá mức biến toàn cục có thể gây ra sự mơ hồ về phạm vi và dẫn đến lỗi, vì vậy hãy tránh sử dụng chúng bất cứ khi nào có thể.

Tóm tắt

  • var: Một phương thức khai báo biến cũ có phạm vi theo hàm.
  • let: Một biến có phạm vi trong khối có thể được gán lại.
  • const: Một biến có phạm vi trong khối không thể gán lại (hằng số).
  • Điều quan trọng là phải sử dụng biến đúng theo kiểu dữ liệu của chúng và chú ý đến phạm vi của chúng.

Ký tự thoát trong JavaScript là gì?

Ký tự thoát là một phương pháp được sử dụng để biểu thị các ký tự có ý nghĩa đặc biệt trong các chuỗi ký tự thông thường. Trong JavaScript, ký tự thoát được bắt đầu với dấu gạch chéo ngược \ để tạo hiệu ứng đặc biệt cho một chuỗi hoặc để bao gồm các ký tự điều khiển. Ký tự thoát rất hữu ích để bao gồm các yếu tố như xuống dòng, thụt đầu dòng hoặc dấu ngoặc kép trong một chuỗi.

Ví dụ về sử dụng ký tự thoát

Dưới đây là một số đoạn mã mẫu sử dụng ký tự thoát.

Thoát dấu ngoặc kép và dấu ngoặc đơn

Sử dụng ký tự thoát để biểu thị dấu ngoặc kép hoặc dấu ngoặc đơn trong một chuỗi.

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!"

Thoát dấu gạch chéo ngược

Để bao gồm chính dấu gạch chéo ngược trong một chuỗi, hãy thoát nó bằng \.

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

Thoát ký tự xuống dòng và thụt đầu dòng

Bạn có thể chèn ký tự xuống dòng và thụt đầu dòng để làm cho các chuỗi dài dễ đọc hơn.

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

Thoát ký tự Unicode

Sử dụng chuỗi thoát Unicode cho phép bạn biểu thị các ký tự cụ thể bằng mã hệ thập lục phân.

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

Ghi chú

Việc sử dụng quá nhiều ký tự thoát có thể làm giảm khả năng đọc hiểu

Lạm dụng ký tự thoát có thể làm giảm khả năng đọc hiểu mã của bạn. Đặc biệt quan trọng là sử dụng ký tự thoát một cách khôn ngoan trong các chuỗi dài.

Hãy cân nhắc sử dụng template literals

Trong JavaScript, template literals sử dụng dấu gạch chéo ngược cho phép bạn chèn xuống dòng hoặc các biểu thức nhúng mà không cần dùng ký tự thoát.

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

Tóm tắt

Ký tự thoát là rất cần thiết để biểu thị các ký tự đặc biệt hoặc điều khiển trong các chuỗi. Bằng cách thoát dấu ngoặc đơn hoặc kép và thêm các ký tự xuống dòng hoặc thụt đầu dòng, bạn có thể tạo ra các chuỗi linh hoạt hơn. Tuy nhiên, việc sử dụng quá nhiều ký tự thoát có thể khiến mã trở nên khó đọc hơn, vì vậy hãy cân nhắc sử dụng template literals khi phù hợp.

Các phiên bản JavaScript

JavaScript có một tiêu chuẩn đặc tả gọi là ECMAScript (ES). JavaScript đã phát triển dựa trên tiêu chuẩn này. Dưới đây là mô tả ngắn gọn về các phiên bản chính của nó.

  • ES3 (1999)

    Phiên bản đầu tiên được chấp nhận một cách rộng rãi. Cú pháp cơ bản và các tính năng đã được thiết lập.

  • ES5 (2009)

    Giới thiệu chế độ strict mode, và các tính năng mới như Array.prototype.forEach, Object.keys, v.v. đã được thêm vào.

  • ES6 / ES2015 (2015)

    Một bản cập nhật lớn đã được thực hiện cho JavaScript. Nhiều tính năng cơ bản của JavaScript hiện đại, như let, const, arrow functions, classes, promises, modules, v.v., đã được giới thiệu.

  • ES7 / ES2016 (2016)

    Array.prototype.includes và Toán tử lũy thừa (**) đã được thêm vào.

  • ES8 / ES2017 (2017)

    async/await đã được giới thiệu, giúp viết các quy trình bất đồng bộ trở nên đơn giản hơn.

  • ES9 / ES2018 (2018)

    Trình lặp bất đồng bộ và Thuộc tính Rest/Spread đã được thêm vào.

  • ES10 / ES2019 (2019)

    flatMap và Object.fromEntries đã được thêm vào.

  • ES11 / ES2020 (2020)

    Optional Chaining (?.) và Nullish Coalescing Operator (??) đã được thêm vào, cho phép viết mã đơn giản và an toàn hơn.

  • ES12 / ES2021 (2021)

    String.prototype.replaceAll và Promise.any, cùng các tính năng khác, đã được thêm vào.

  • ES13 / ES2022 (2022)

    Array.prototype.at và các trường private trong lớp (#field), cùng các tính năng khác, đã được thêm vào.

  • ES14 / ES2023 (2023)

    Array.prototype.toSorted và Symbol.prototype.description, cùng các tính năng khác, đã được thêm vào.

  • ES15 / ES2024 (2024)

    Promise.withResolvers để quản lý Promise dễ dàng hơn và ArrayBuffer có thể thay đổi kích thước, cùng các tính năng khác, đã được thêm vào.

JavaScript hiện nay được cập nhật hàng năm và các tính năng mới được thêm vào ngay cả trong phiên bản mới nhất.

Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.

YouTube Video

Các kiểu dữ liệu trong JavaScript