Tổng hợp cú pháp JavaScript

Tổng hợp cú pháp JavaScript

Tổng hợp cú pháp JavaScript từ cơ bản đến nâng cao, gồm biến, kiểu dữ liệu, toán tử, điều kiện, vòng lặp, hàm, mảng, object, DOM, sự kiện, API và các cú pháp hiện đại, chi tiết như nào hãy cùng chúng tôi phân tích:

JavaScript là một trong những ngôn ngữ lập trình quan trọng nhất trên nền tảng web. Nếu HTML tạo nên cấu trúc trang, CSS đảm nhiệm phần giao diện thì JavaScript giúp trang web có khả năng phản hồi, xử lý dữ liệu và tương tác với người dùng. Để viết JavaScript hiệu quả, việc nắm được các cú pháp nền tảng là bước đầu tiên nhưng cũng là nền móng quan trọng cho quá trình học sâu hơn.

Thay vì ghi nhớ từng đoạn mã rời rạc, người mới học nên hiểu cú pháp JavaScript theo từng nhóm: khai báo dữ liệu, biến và hằng số, kiểu dữ liệu, toán tử, điều kiện, vòng lặp, hàm, mảng, đối tượng, chuỗi, xử lý lỗi, thao tác DOM và các tính năng hiện đại. Khi hiểu được cách các thành phần này kết hợp với nhau, bạn có thể tự xây dựng chương trình thay vì chỉ sao chép mã có sẵn.

Trong bài viết này, Web Mới tổng hợp những cú pháp JavaScript quan trọng và thường gặp nhất, trình bày theo hướng thực tế, dễ tra cứu và phù hợp với người mới bắt đầu. Các ví dụ được sắp xếp từ cơ bản đến nâng cao để bạn có thể học từng phần hoặc sử dụng bài viết như một tài liệu tham khảo trong quá trình lập trình.

Tổng hợp cú pháp JavaScript

Cú pháp JavaScript cơ bản cần biết

Một chương trình JavaScript được tạo thành từ các câu lệnh. Mỗi câu lệnh có thể thực hiện một nhiệm vụ như khai báo biến, tính toán, gọi hàm hoặc kiểm tra điều kiện.

Ví dụ đơn giản:

let name = "Web Mới";
console.log(name);

Trong ví dụ trên, let được dùng để tạo một biến có tên name. Giá trị chuỗi được gán cho biến này và console.log() hiển thị kết quả ra bảng điều khiển của trình duyệt.

JavaScript thường không bắt buộc phải đặt dấu chấm phẩy ở cuối mỗi câu lệnh. Tuy nhiên, việc sử dụng dấu chấm phẩy nhất quán có thể giúp mã nguồn dễ đọc và tránh một số trường hợp JavaScript tự động chèn dấu chấm phẩy gây ra kết quả không như mong muốn.

Ghi chú trong mã nguồn

Ghi chú giúp lập trình viên giải thích mục đích của một đoạn mã mà không ảnh hưởng đến quá trình thực thi.

Ghi chú một dòng sử dụng hai dấu gạch chéo:

// Đây là ghi chú một dòng
let age = 20;

Ghi chú nhiều dòng bắt đầu bằng /* và kết thúc bằng */:

/*
  Đây là ghi chú
  gồm nhiều dòng
*/
let message = "Xin chào";

Không nên lạm dụng ghi chú để giải thích những điều quá hiển nhiên. Một mã nguồn tốt nên có cách đặt tên biến và hàm đủ rõ ràng để phần lớn logic có thể tự giải thích.

Khai báo biến và hằng số

Biến là nơi lưu trữ dữ liệu trong quá trình chương trình hoạt động. JavaScript hiện đại chủ yếu sử dụng let và const. Ngoài ra, var vẫn tồn tại để duy trì khả năng tương thích với mã nguồn cũ.

Sử dụng let

let phù hợp khi giá trị của biến có thể thay đổi trong quá trình thực thi.

let score = 10;

score = 20;

console.log(score);

Sau khi khai báo, giá trị của score có thể được gán lại.

Sử dụng const

const được dùng khi biến không được phép gán lại sang một giá trị khác.

const siteName = "Web Mới";

console.log(siteName);

Đoạn mã sau sẽ gây lỗi vì không thể gán lại giá trị cho biến được khai báo bằng const:

const age = 20;

age = 25;

Trong JavaScript hiện đại, nên ưu tiên const khi biết rằng biến không cần gán lại. Chỉ sử dụng let khi giá trị thực sự cần thay đổi.

Khai báo nhiều biến

Có thể khai báo nhiều biến trong cùng một câu lệnh, tuy nhiên tách riêng từng biến thường giúp mã nguồn dễ đọc hơn.

let firstName = "An";
let lastName = "Nguyen";
let age = 25;

Phạm vi của biến

Biến khai báo bằng let và const có phạm vi theo khối lệnh. Điều này giúp hạn chế tình trạng biến bị sử dụng ngoài khu vực mà nó được tạo ra.

if (true) {
  let message = "Xin chào";
  console.log(message);
}

Biến message chỉ tồn tại trong khối lệnh của câu lệnh if.

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

JavaScript hỗ trợ nhiều kiểu dữ liệu khác nhau. Việc hiểu kiểu dữ liệu giúp bạn biết cách lưu trữ, so sánh và xử lý giá trị chính xác.

Kiểu chuỗi

Chuỗi được dùng để lưu trữ văn bản. Có thể tạo chuỗi bằng dấu nháy đơn, dấu nháy kép hoặc dấu backtick.

let name = "Web Mới";
let language = 'JavaScript';
let message = `Xin chào ${name}`;

Backtick đặc biệt hữu ích khi cần chèn biến trực tiếp vào chuỗi thông qua cú pháp ${}.

Kiểu số

JavaScript sử dụng kiểu number để biểu diễn số nguyên và số thực.

let age = 25;
let price = 99.5;
let total = age + price;

Ngoài ra, JavaScript còn có kiểu BigInt dành cho các số nguyên có kích thước rất lớn.

const bigNumber = 123456789012345678901234567890n;

Kiểu boolean

Boolean chỉ có hai giá trị là true và false. Kiểu dữ liệu này thường được sử dụng trong các phép kiểm tra điều kiện.

let isLoggedIn = true;
let isAdmin = false;

Kiểu undefined

undefined thường xuất hiện khi một biến đã được khai báo nhưng chưa có giá trị.

let username;

console.log(username);

Kiểu null

null biểu thị việc một biến đang được xác định là không có giá trị.

let selectedUser = null;

Kiểu object

Object dùng để lưu trữ dữ liệu dưới dạng các cặp thuộc tính và giá trị.

const user = {
  name: "An",
  age: 25,
  active: true
};

Kiểm tra kiểu dữ liệu với typeof

Toán tử typeof giúp kiểm tra kiểu dữ liệu của một giá trị.

console.log(typeof "JavaScript");
console.log(typeof 100);
console.log(typeof true);

Toán tử trong JavaScript

Toán tử giúp thực hiện các phép tính, so sánh hoặc kết hợp nhiều điều kiện.

Toán tử số học

Toán tử Ý nghĩa
+ Cộng
- Trừ
* Nhân
/ Chia
% Chia lấy dư
** Lũy thừa

Ví dụ:

let a = 10;
let b = 3;

console.log(a + b);
console.log(a - b);
console.log(a * b);
console.log(a / b);
console.log(a % b);
console.log(a ** b);

Toán tử gán

Toán tử gán được dùng để đưa giá trị vào biến.

let score = 10;

score += 5;
score -= 2;
score *= 2;
score /= 2;

Các phép gán rút gọn giúp mã nguồn ngắn hơn nhưng vẫn giữ nguyên ý nghĩa.

Toán tử so sánh

Các toán tử so sánh thường trả về kết quả true hoặc false.

console.log(10 > 5);
console.log(10 < 5);
console.log(10 >= 10);
console.log(10 <= 9);

Khi kiểm tra bằng nhau, nên ưu tiên === và !== để JavaScript không tự động chuyển đổi kiểu dữ liệu ngoài ý muốn.

console.log(10 === 10);
console.log(10 === "10");

console.log(10 !== 5);

Toán tử logic

Ba toán tử logic thường gặp là &&, || và !.

let age = 25;
let hasAccount = true;

console.log(age >= 18 && hasAccount);
console.log(age >= 18 || hasAccount);
console.log(!hasAccount);

&& yêu cầu các điều kiện liên quan cùng đúng. || chỉ cần ít nhất một điều kiện đúng. ! đảo ngược giá trị boolean.

Toán tử ba ngôi

Toán tử ba ngôi là cách viết ngắn gọn cho một điều kiện đơn giản.

let age = 20;

let status = age >= 18 ? "Đủ tuổi" : "Chưa đủ tuổi";

console.log(status);

Câu lệnh điều kiện

Câu lệnh điều kiện cho phép chương trình lựa chọn cách xử lý dựa trên trạng thái của dữ liệu.

Cấu trúc if

let age = 20;

if (age >= 18) {
  console.log("Bạn đã đủ 18 tuổi");
}

Cấu trúc if else

let age = 16;

if (age >= 18) {
  console.log("Đủ tuổi");
} else {
  console.log("Chưa đủ tuổi");
}

Cấu trúc else if

Khi có nhiều mức điều kiện, có thể sử dụng else if.

let score = 8;

if (score >= 9) {
  console.log("Xuất sắc");
} else if (score >= 7) {
  console.log("Tốt");
} else if (score >= 5) {
  console.log("Đạt");
} else {
  console.log("Chưa đạt");
}

Cấu trúc switch

switch phù hợp khi cần kiểm tra một giá trị với nhiều trường hợp cố định.

let day = 2;

switch (day) {
  case 1:
    console.log("Thứ hai");
    break;
  case 2:
    console.log("Thứ ba");
    break;
  case 3:
    console.log("Thứ tư");
    break;
  default:
    console.log("Không xác định");
}

Từ khóa break giúp dừng việc kiểm tra các trường hợp tiếp theo. Nếu bỏ qua break trong những trường hợp thông thường, chương trình có thể tiếp tục chạy xuống các nhánh bên dưới.

Vòng lặp trong JavaScript

Vòng lặp giúp thực hiện một đoạn mã nhiều lần mà không cần viết lại cùng một câu lệnh.

Vòng lặp for

for (let i = 0; i < 5; i++) {
  console.log(i);
}

Vòng lặp for thường phù hợp khi biết rõ điều kiện bắt đầu, điều kiện kết thúc và bước tăng.

Vòng lặp while

let i = 0;

while (i < 5) {
  console.log(i);
  i++;
}

Với while, điều kiện được kiểm tra trước mỗi lần lặp.

Vòng lặp do while

do while luôn thực hiện phần thân ít nhất một lần trước khi kiểm tra điều kiện.

let i = 0;

do {
  console.log(i);
  i++;
} while (i < 5);

Vòng lặp for of

for of thường được dùng để duyệt qua các giá trị của một đối tượng có khả năng lặp như mảng hoặc chuỗi.

const languages = ["HTML", "CSS", "JavaScript"];

for (const language of languages) {
  console.log(language);
}

Vòng lặp for in

for in thường được sử dụng để duyệt qua các thuộc tính có thể liệt kê của một object.

const user = {
  name: "An",
  age: 25
};

for (const key in user) {
  console.log(key, user[key]);
}

break và continue

break dừng vòng lặp ngay lập tức.

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break;
  }

  console.log(i);
}

continue bỏ qua lần lặp hiện tại và chuyển sang lần tiếp theo.

for (let i = 0; i < 5; i++) {
  if (i === 2) {
    continue;
  }

  console.log(i);
}

Hàm và cách tổ chức logic

Hàm giúp gom một nhóm câu lệnh thành một đơn vị có thể tái sử dụng. Đây là một trong những khái niệm quan trọng nhất khi học JavaScript.

Khai báo hàm

function sayHello() {
  console.log("Xin chào");
}

sayHello();

Hàm có tham số

function greet(name) {
  console.log("Xin chào " + name);
}

greet("An");

Hàm trả về giá trị

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

const result = add(5, 3);

console.log(result);

Từ khóa return kết thúc quá trình thực thi của hàm tại vị trí đó và trả kết quả về nơi gọi hàm.

Tham số mặc định

function greet(name = "bạn") {
  console.log("Xin chào " + name);
}

greet();
greet("An");

Hàm mũi tên

Arrow function là cách viết hàm ngắn gọn được sử dụng phổ biến trong JavaScript hiện đại.

const add = (a, b) => {
  return a + b;
};

Nếu hàm chỉ có một biểu thức trả về, có thể viết ngắn hơn:

const add = (a, b) => a + b;

Hàm không có tham số

const sayHello = () => {
  console.log("Xin chào");
};

Xử lý chuỗi

Chuỗi xuất hiện rất thường xuyên khi xây dựng website. JavaScript cung cấp nhiều phương thức giúp tìm kiếm, thay thế và biến đổi nội dung văn bản.

Nối chuỗi

const firstName = "Nguyen";
const lastName = "An";

const fullName = firstName + " " + lastName;

console.log(fullName);

Template literal

Template literal giúp tạo chuỗi dễ đọc hơn khi cần chèn biến hoặc biểu thức.

const name = "An";
const age = 25;

const message = `Tên: ${name}, tuổi: ${age}`;

console.log(message);

Một số phương thức chuỗi phổ biến

const text = "JavaScript";

console.log(text.length);
console.log(text.toUpperCase());
console.log(text.toLowerCase());
console.log(text.includes("Script"));
console.log(text.startsWith("Java"));
console.log(text.endsWith("Script"));

Cắt chuỗi

const text = "JavaScript";

console.log(text.slice(0, 4));

slice() thường được dùng để lấy một phần của chuỗi mà không làm thay đổi chuỗi ban đầu.

Thay thế nội dung

const text = "Tôi học HTML";

const result = text.replace("HTML", "JavaScript");

console.log(result);

Mảng và các thao tác thường dùng

Mảng dùng để lưu trữ nhiều giá trị trong cùng một cấu trúc dữ liệu. Đây là kiểu dữ liệu xuất hiện trong hầu hết các ứng dụng JavaScript.

Tạo mảng

const languages = ["HTML", "CSS", "JavaScript"];

Truy cập phần tử

const languages = ["HTML", "CSS", "JavaScript"];

console.log(languages[0]);
console.log(languages[2]);

Chỉ số của mảng bắt đầu từ 0, vì vậy phần tử đầu tiên có chỉ số là 0.

Thêm và xóa phần tử

const languages = ["HTML", "CSS"];

languages.push("JavaScript");

languages.pop();

languages.unshift("Web");

languages.shift();

push() thêm phần tử vào cuối mảng. pop() xóa phần tử cuối. unshift() thêm phần tử vào đầu và shift() xóa phần tử đầu.

Duyệt mảng với forEach

const languages = ["HTML", "CSS", "JavaScript"];

languages.forEach((language, index) => {
  console.log(index, language);
});

Biến đổi dữ liệu với map

const numbers = [1, 2, 3, 4];

const doubled = numbers.map(number => number * 2);

console.log(doubled);

Lọc dữ liệu với filter

const numbers = [1, 2, 3, 4, 5];

const evenNumbers = numbers.filter(number => number % 2 === 0);

console.log(evenNumbers);

Tìm phần tử với find

const users = [
  { name: "An", age: 25 },
  { name: "Binh", age: 30 }
];

const user = users.find(user => user.age === 30);

console.log(user);

Kiểm tra điều kiện với some và every

const numbers = [2, 4, 6, 8];

const hasOdd = numbers.some(number => number % 2 !== 0);

const allEven = numbers.every(number => number % 2 === 0);

console.log(hasOdd);
console.log(allEven);

Object và cách làm việc với dữ liệu có cấu trúc

Object cho phép nhóm nhiều thông tin liên quan vào một thực thể. Ví dụ, một người dùng có thể có tên, tuổi, email và trạng thái.

Tạo object

const user = {
  name: "An",
  age: 25,
  email: "an@example.com"
};

Truy cập thuộc tính

console.log(user.name);
console.log(user["email"]);

Thay đổi thuộc tính

user.age = 26;

user.email = "new@example.com";

Thêm thuộc tính mới

user.city = "Ho Chi Minh City";

Xóa thuộc tính

delete user.city;

Phương thức bên trong object

Object có thể chứa cả hàm. Khi một hàm nằm bên trong object, nó thường được gọi là phương thức.

const user = {
  name: "An",
  sayHello() {
    console.log(`Xin chào, tôi là ${this.name}`);
  }
};

user.sayHello();

Destructuring và Spread

Đây là nhóm cú pháp hiện đại giúp xử lý mảng và object ngắn gọn hơn.

Destructuring object

const user = {
  name: "An",
  age: 25
};

const { name, age } = user;

console.log(name);
console.log(age);

Destructuring mảng

const colors = ["red", "green", "blue"];

const [first, second, third] = colors;

console.log(first);
console.log(second);
console.log(third);

Spread với mảng

const firstList = [1, 2, 3];
const secondList = [4, 5, 6];

const combined = [...firstList, ...secondList];

console.log(combined);

Spread với object

const user = {
  name: "An",
  age: 25
};

const updatedUser = {
  ...user,
  age: 26
};

console.log(updatedUser);

Spread thường được sử dụng để tạo một cấu trúc dữ liệu mới dựa trên dữ liệu cũ mà không cần thay đổi trực tiếp object hoặc mảng ban đầu.

Optional chaining và Nullish coalescing

Optional chaining

Optional chaining với ?. giúp truy cập thuộc tính nằm sâu bên trong một cấu trúc dữ liệu mà không cần tự kiểm tra từng cấp.

const user = {
  profile: {
    name: "An"
  }
};

console.log(user.profile?.name);
console.log(user.contact?.phone);

Nếu contact không tồn tại, biểu thức sẽ trả về undefined thay vì gây lỗi do truy cập thuộc tính của một giá trị không tồn tại.

Nullish coalescing

Toán tử ?? cho phép sử dụng giá trị mặc định khi giá trị bên trái là null hoặc undefined.

const username = null;

const displayName = username ?? "Khách";

console.log(displayName);

Set và Map

Ngoài mảng và object, JavaScript còn có Set và Map dành cho những nhu cầu lưu trữ dữ liệu đặc biệt.

Set

Set lưu các giá trị duy nhất, rất hữu ích khi cần loại bỏ dữ liệu trùng lặp.

const numbers = new Set([1, 2, 2, 3, 3, 4]);

console.log(numbers);

Thêm hoặc kiểm tra dữ liệu:

const languages = new Set();

languages.add("HTML");
languages.add("CSS");
languages.add("JavaScript");

console.log(languages.has("CSS"));

Map

Map lưu dữ liệu dưới dạng cặp khóa và giá trị. Khác với object, khóa của Map có thể là nhiều kiểu dữ liệu khác nhau.

const users = new Map();

users.set("user1", "An");
users.set("user2", "Binh");

console.log(users.get("user1"));
console.log(users.has("user2"));

Ngày tháng và thời gian

Đối tượng Date được dùng để làm việc với ngày và thời gian.

Tạo đối tượng Date

const now = new Date();

console.log(now);

Lấy thông tin ngày giờ

const now = new Date();

console.log(now.getFullYear());
console.log(now.getMonth());
console.log(now.getDate());
console.log(now.getHours());
console.log(now.getMinutes());

Lưu ý rằng getMonth() trả về tháng bắt đầu từ 0, trong đó 0 là tháng 1 và 11 là tháng 12.

Xử lý lỗi với try catch

Trong quá trình chạy chương trình, có thể xảy ra lỗi. Cấu trúc try...catch giúp phát hiện và xử lý lỗi thay vì để chương trình dừng đột ngột.

try {
  const data = JSON.parse("Dữ liệu không hợp lệ");
  console.log(data);
} catch (error) {
  console.log("Đã xảy ra lỗi:", error.message);
}

finally

Khối finally được thực hiện sau khi quá trình trong try và catch hoàn tất, bất kể có xảy ra lỗi hay không.

try {
  console.log("Bắt đầu xử lý");
} catch (error) {
  console.log("Có lỗi");
} finally {
  console.log("Hoàn tất");
}

throw tạo lỗi chủ động

Có thể sử dụng throw để chủ động phát sinh lỗi khi dữ liệu không đáp ứng yêu cầu.

function checkAge(age) {
  if (age < 18) {
    throw new Error("Chưa đủ tuổi");
  }

  return "Hợp lệ";
}

try {
  console.log(checkAge(16));
} catch (error) {
  console.log(error.message);
}

JSON trong JavaScript

JSON là định dạng dữ liệu phổ biến khi JavaScript giao tiếp với máy chủ hoặc xử lý dữ liệu từ API.

Chuyển object thành JSON

const user = {
  name: "An",
  age: 25
};

const json = JSON.stringify(user);

console.log(json);

Chuyển JSON thành object

const json = '{"name":"An","age":25}';

const user = JSON.parse(json);

console.log(user.name);

Thao tác với DOM

DOM là mô hình đại diện cho cấu trúc tài liệu HTML. JavaScript có thể sử dụng DOM để tìm phần tử, thay đổi nội dung, chỉnh sửa thuộc tính và tạo tương tác.

Tìm phần tử bằng id

const title = document.getElementById("title");

Tìm phần tử bằng CSS selector

const element = document.querySelector(".item");

Tìm nhiều phần tử

const elements = document.querySelectorAll(".item");

Thay đổi nội dung văn bản

const title = document.querySelector("#title");

title.textContent = "Tiêu đề mới";

Thay đổi HTML bên trong phần tử

const content = document.querySelector("#content");

content.innerHTML = "Nội dung mới";

Khi dữ liệu có nguồn từ người dùng hoặc nguồn không đáng tin cậy, cần cẩn trọng với innerHTML vì việc đưa dữ liệu không được kiểm soát vào HTML có thể tạo ra rủi ro bảo mật. Trong nhiều trường hợp chỉ cần thay đổi văn bản, textContent là lựa chọn an toàn và phù hợp hơn.

Thay đổi thuộc tính

const image = document.querySelector("img");

image.setAttribute("alt", "Ảnh minh họa");

Thay đổi class

const box = document.querySelector(".box");

box.classList.add("active");
box.classList.remove("hidden");
box.classList.toggle("selected");

Xử lý sự kiện

Sự kiện là nền tảng của các tương tác trên trang web. JavaScript có thể phản hồi khi người dùng nhấp chuột, nhập dữ liệu, gửi biểu mẫu hoặc thực hiện các thao tác khác.

Gắn sự kiện bằng addEventListener

const button = document.querySelector("#button");

button.addEventListener("click", () => {
  console.log("Bạn vừa nhấp nút");
});

Xử lý sự kiện với đối tượng event

const input = document.querySelector("#name");

input.addEventListener("input", event => {
  console.log(event.target.value);
});

Ngăn hành động mặc định

Trong một số trường hợp, cần ngăn trình duyệt thực hiện hành động mặc định của phần tử.

const form = document.querySelector("#form");

form.addEventListener("submit", event => {
  event.preventDefault();

  console.log("Đã xử lý biểu mẫu");
});

Đối tượng Window và trình duyệt

Trong môi trường trình duyệt, window đại diện cho cửa sổ trình duyệt và cung cấp nhiều API hữu ích.

Hiển thị hộp thoại

alert("Xin chào");

Hỏi người dùng xác nhận

const confirmed = confirm("Bạn có chắc chắn không?");

console.log(confirmed);

Đọc địa chỉ trang hiện tại

console.log(window.location.href);

Chuyển hướng trang

window.location.href = "https://example.com";

Local Storage

localStorage cho phép lưu dữ liệu dạng chuỗi trên trình duyệt để sử dụng lại trong những lần truy cập sau.

Lưu dữ liệu

localStorage.setItem("username", "An");

Đọc dữ liệu

const username = localStorage.getItem("username");

console.log(username);

Xóa dữ liệu

localStorage.removeItem("username");

Lưu object vào localStorage

Vì localStorage chỉ lưu chuỗi, object cần được chuyển đổi bằng JSON.stringify().

const user = {
  name: "An",
  age: 25
};

localStorage.setItem("user", JSON.stringify(user));

Khi lấy dữ liệu, có thể chuyển chuỗi JSON trở lại object bằng JSON.parse().

const data = localStorage.getItem("user");

const user = JSON.parse(data);

console.log(user.name);

Hàm bất đồng bộ và Promise

JavaScript thường phải xử lý những công việc không hoàn thành ngay lập tức như gọi API, đọc dữ liệu hoặc chờ một khoảng thời gian. Promise giúp biểu diễn trạng thái của một tác vụ bất đồng bộ.

Tạo Promise

const promise = new Promise((resolve, reject) => {
  const success = true;

  if (success) {
    resolve("Thành công");
  } else {
    reject("Thất bại");
  }
});

Xử lý Promise với then catch

promise
  .then(result => {
    console.log(result);
  })
  .catch(error => {
    console.log(error);
  });

Sử dụng async và await

async và await giúp viết mã bất đồng bộ theo cách dễ đọc hơn.

async function loadData() {
  try {
    const result = await promise;

    console.log(result);
  } catch (error) {
    console.log(error);
  }
}

loadData();

Gọi API với fetch

fetch() là cách phổ biến để gửi yêu cầu HTTP từ trình duyệt đến máy chủ hoặc API.

Gửi yêu cầu GET

async function getData() {
  try {
    const response = await fetch("https://example.com/data");

    const data = await response.json();

    console.log(data);
  } catch (error) {
    console.log("Có lỗi:", error);
  }
}

getData();

Trong ứng dụng thực tế, nên kiểm tra trạng thái phản hồi trước khi xử lý dữ liệu. Một phản hồi HTTP lỗi không phải lúc nào cũng khiến fetch() tự động rơi vào catch.

async function getData() {
  try {
    const response = await fetch("https://example.com/data");

    if (!response.ok) {
      throw new Error("Yêu cầu thất bại");
    }

    const data = await response.json();

    console.log(data);
  } catch (error) {
    console.log(error.message);
  }
}

Module trong JavaScript

Khi dự án lớn dần, việc đặt toàn bộ mã nguồn trong một tệp khiến việc bảo trì khó khăn. Module cho phép chia chương trình thành nhiều phần nhỏ và quản lý việc chia sẻ dữ liệu giữa các tệp.

Export

export const siteName = "Web Mới";

export function sayHello() {
  console.log("Xin chào");
}

Import

import { siteName, sayHello } from "./app.js";

console.log(siteName);

sayHello();

Export mặc định

export default function greet() {
  console.log("Xin chào");
}

Có thể import thành phần mặc định bằng tên tùy ý:

import greet from "./greet.js";

greet();

Class và lập trình hướng đối tượng

Class cung cấp cú pháp thuận tiện để xây dựng các đối tượng có cùng cấu trúc và hành vi.

Khai báo class

class User {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  introduce() {
    console.log(`Tôi là ${this.name}`);
  }
}

Tạo instance

const user = new User("An", 25);

user.introduce();

Kế thừa class

class Admin extends User {
  deletePost() {
    console.log("Đã xóa bài viết");
  }
}

const admin = new Admin("Binh", 30);

admin.introduce();
admin.deletePost();

Các cú pháp JavaScript nên ghi nhớ khi học

Không cần cố gắng ghi nhớ toàn bộ cú pháp ngay trong một lần. Quan trọng hơn là hiểu khi nào nên sử dụng từng nhóm cú pháp.

Nhóm cú pháp Mục đích
let, const Khai báo biến và hằng số
if, else, switch Rẽ nhánh theo điều kiện
for, while, do while Lặp lại một đoạn xử lý
function, arrow function Tái sử dụng logic
Array Lưu danh sách dữ liệu
Object Mô tả dữ liệu có cấu trúc
map, filter, find Biến đổi và tìm kiếm dữ liệu trong mảng
destructuring Tách dữ liệu từ mảng hoặc object
spread Sao chép và kết hợp dữ liệu
try, catch Xử lý lỗi
Promise, async, await Xử lý tác vụ bất đồng bộ
fetch Giao tiếp với API
DOM Thao tác nội dung và cấu trúc trang
addEventListener Xử lý tương tác người dùng
import, export Chia nhỏ và quản lý mã nguồn
class Xây dựng cấu trúc đối tượng

Cách học cú pháp JavaScript hiệu quả

Học cú pháp không nên dừng lại ở việc đọc và ghi nhớ. Cách hiệu quả hơn là học theo từng nhóm vấn đề và ngay lập tức áp dụng vào một bài toán nhỏ.

Bắt đầu từ dữ liệu và logic

Trước tiên hãy nắm chắc biến, kiểu dữ liệu, toán tử và điều kiện. Đây là nền tảng để chương trình có thể đưa ra quyết định dựa trên dữ liệu.

Tiếp tục với vòng lặp và hàm

Khi đã hiểu điều kiện, hãy học cách lặp qua dữ liệu và đóng gói logic thành hàm. Đây là giai đoạn giúp bạn chuyển từ những đoạn mã đơn giản sang cách tổ chức chương trình có cấu trúc.

Thực hành với mảng và object

Phần lớn dữ liệu trong ứng dụng thực tế đều được biểu diễn dưới dạng danh sách hoặc object. Hãy luyện tập các phương thức như map(), filter(), find() và cách kết hợp nhiều phương thức để xử lý dữ liệu.

Học DOM sau khi nắm nền tảng

Nếu mục tiêu của bạn là lập trình web, hãy tiếp tục với DOM và sự kiện. Khi đó, bạn có thể biến kiến thức JavaScript thành các tính năng trực tiếp trên giao diện như nút bấm, menu, biểu mẫu, bộ lọc hoặc hiệu ứng tương tác.

Học bất đồng bộ và API

Sau khi đã quen với JavaScript cơ bản, hãy tìm hiểu Promise, async, await và fetch. Đây là nền tảng quan trọng để xây dựng các website có khả năng lấy và xử lý dữ liệu từ máy chủ.

Kết luận

Tổng hợp cú pháp JavaScript không chỉ là một danh sách các câu lệnh cần ghi nhớ. Mỗi cú pháp giải quyết một nhóm vấn đề khác nhau trong quá trình xây dựng chương trình. Biến giúp lưu trữ dữ liệu, điều kiện giúp chương trình đưa ra quyết định, vòng lặp giúp xử lý nhiều dữ liệu, hàm giúp tái sử dụng logic, mảng và object giúp tổ chức dữ liệu, còn Promise và async await hỗ trợ những tác vụ diễn ra không đồng bộ.

Đối với người mới, cách học hiệu quả nhất là đi từ nền tảng đến thực hành: bắt đầu với biến và kiểu dữ liệu, tiếp tục với điều kiện, vòng lặp, hàm, mảng và object, sau đó chuyển sang DOM, sự kiện, API và các tính năng JavaScript hiện đại. Khi đã hiểu bản chất của từng nhóm cú pháp, việc đọc mã nguồn, tìm lỗi và xây dựng tính năng mới sẽ trở nên dễ dàng hơn rất nhiều.

Hãy xem bài viết này như một tài liệu tra cứu trong quá trình học và lập trình. Thay vì cố gắng thuộc lòng tất cả cú pháp, bạn nên thường xuyên viết mã, tự sửa lỗi và áp dụng từng kiến thức vào những dự án nhỏ. Chính quá trình thực hành liên tục sẽ giúp cú pháp JavaScript trở thành kỹ năng thực tế thay vì chỉ là kiến thức lý thuyết.

  • ★★★★★ ★★★★★
  • 0 Bình luận
Trần Thị Vân | Content Creator Web Mới
Trần Thị Vân
Trần Thị Vân là Content Creator tại Web Mới, phụ trách nghiên cứu, biên soạn nội dung và chia sẻ kiến thức về website, SEO, lập trình cùng các xu hướng công nghệ
Chia sẻ nội dung đánh giá của bạn về Tổng hợp cú pháp JavaScript
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
Đánh giá của bạn
Tên *
Email
Số điện thoại *
Bình luận, Hỏi đáp
Đăng ký tư vấn thiết kế website
Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn