JavaScript: Tìm hiểu về cú pháp và cấu trúc lập trình trong JavaScript

Giới thiệu

Trước khi học viết bằng ngôn ngữ nói, trước tiên bạn phải học các quy tắc ngữ pháp. Dưới đây là một vài ví dụ về các quy tắc bạn có thể tìm thấy bằng tiếng Anh:

• Một câu bắt đầu bằng một chữ cái viết hoa.
• Một câu kết thúc bằng một dấu chấm.
• Một đoạn văn mới được thụt lề.
• Lời thoại được đặt trong dấu ngoặc kép.

Tương tự như vậy, tất cả các ngôn ngữ lập trình phải tuân theo các quy tắc cụ thể để hoạt động. Tập hợp các quy tắc xác định cấu trúc chính xác của ngôn ngữ lập trình được gọi là cú pháp . Nhiều ngôn ngữ lập trình bao gồm phần lớn các khái niệm tương tự với các biến thể về cú pháp.

Trong bài hướng dẫn này, chúng ta sẽ xem xét nhiều quy tắc và quy ước về cú pháp và cấu trúc mã JavaScript.

Chức năng và khả năng đọc

Chức năng và khả năng đọc là hai lý do quan trọng để tập trung vào cú pháp khi bạn bắt đầu làm việc với JavaScript.

Có một số quy tắc cú pháp bắt buộc đối với chức năng JavaScript. Nếu chúng không được tuân theo thì console sẽ thông báo lỗi và tập lệnh sẽ ngừng thực thi.

Hãy xem xét một lỗi cú pháp trong chương trình "Hello, World!":

// Ví dụ về một chương trình JavaScript lỗi
console.log("Hello, World!"

Lệnh trên thiếu dấu ngoặc đóng và thay vì in dòng "Hello, World!" vào bảng điều khiển, lỗi sau sẽ xuất hiện:

Phần còn thiếu ) phải được thêm vào trước khi tập lệnh tiếp tục chạy. Đây là một ví dụ về cách một lỗi trong cú pháp JavaScript có thể phá vỡ tập lệnh, vì phải tuân theo cú pháp chính xác để mã chạy được.

Một số khía cạnh của cú pháp và định dạng JavaScript dựa trên các trường phái suy nghĩ khác nhau. Có nghĩa là, có các quy tắc hoặc lựa chọn phong cách không bắt buộc và sẽ không dẫn đến lỗi khi mã được chạy. Tuy nhiên, có nhiều quy ước chung hợp lý để tuân theo, vì các nhà phát triển giữa các dự án và cơ sở mã sẽ quen thuộc hơn với phong cách này. Việc tuân thủ các quy ước chung dẫn đến khả năng đọc được cải thiện.

Hãy xem xét ba ví dụ sau đây về phép gán biến.

const greeting="Hello";         // không có dấu space giữa biến và chuỗi
const greeting =       "Hello"; // có quá nhiều dấu spce sau phép gán
const greeting = "Hello";       // có một dấu space giữa biến và chuỗi

Mặc dù cả ba ví dụ trên sẽ cho kết quả hoàn toàn giống nhau, nhưng tùy chọn thứ ba greeting = "Hello" là cách được sử dụng phổ biến nhất và là cách dễ đọc nhất để viết mã, đặc biệt là khi xem xét nó trong ngữ cảnh của một chương trình lớn hơn.

Điều quan trọng là phải giữ cho toàn bộ phong cách của dự án mã hóa của bạn nhất quán. Từ tổ chức này sang tổ chức khác, bạn sẽ gặp phải các nguyên tắc khác nhau để tuân theo, vì vậy bạn cũng phải linh hoạt.

Chúng ta sẽ xem qua một số ví dụ mã bên dưới để bạn tự làm quen với cú pháp và cấu trúc của mã JavaScript và tham khảo lại bài viết này khi có thắc mắc.

Khoảng trắng (whitespace)

Khoảng trắng trong JavaScript bao gồm space, tab và dòng mới (nhấn ENTER trên bàn phím). Như đã trình bày trước đó, JavaScript bỏ qua quá nhiều khoảng trắng bên ngoài chuỗi và khoảng trắng giữa các toán tử và các ký hiệu khác. Điều này có nghĩa là ba ví dụ sau đây về phép gán biến sẽ có cùng một đầu ra được tính toán chính xác:

const userLocation      =    "New York City, "     +  "NY";
const userLocation="New York City, "+"NY";
const userLocation = "New York City, " + "NY";

userLocation sẽ đại diện cho “New York City, NY” bất kể kiểu nào trong số này được viết bằng script, cũng không tạo ra sự khác biệt đối với JavaScript cho dù khoảng trắng được viết bằng tab hay dấu cách.

Một nguyên tắc chung để có thể tuân theo các quy ước về khoảng trắng phổ biến nhất là tuân theo các quy tắc tương tự như bạn đã quen trong toán học và ngữ pháp ngôn ngữ.

Ví dụ, let x = 5 * y là dễ đọc hơn let x=5*y.

Một ngoại lệ đáng chú ý đối với kiểu này mà bạn có thể thấy là trong quá trình gán nhiều biến. Lưu ý vị trí của = trong ví dụ sau:

const companyName         = "DigitalOcean";
const companyHeadquarters = "New York City";
const companyHandle       = "digitalocean";

Tất cả các toán tử gán (=) được xếp thẳng hàng, với khoảng trắng sau biến. Loại cấu trúc tổ chức này không được sử dụng bởi mọi cơ sở mã, nhưng có thể được sử dụng để cải thiện khả năng đọc.

Các dòng mới thừa cũng bị JavaScript bỏ qua. Nói chung, một dòng mới bổ sung sẽ được chèn phía trên nhận xét và sau khối mã.

Dấu ngoặc đơn ()

Đối với các từ khóa như if, switch và for, dấu cách thường được thêm vào trước và sau dấu ngoặc đơn. Quan sát các ví dụ sau về so sánh và vòng lặp.

// Một ví dụ về cú pháp if

if () { }

// Kiểm tra điều kiện và in 1 chuỗi ra console

if (4 < 5) {

console.log("4 is less than 5.");

}

// Một ví dụ cho cú pháp for

for () { }

// Lặp 10 lần, in từng số ra console mỗi làn lặp

for (let i = 0; i <= 10; i++) {

console.log(i);

}

// Một ví dụ về hàm

function functionName() {}


// Tạo một hàm để tính thể tích khối lập phương

function cube(number) {

return Math.pow(number, 3);

}


// Gọi hàm

cube(5);

// Một câu lệnh JavaScript
const now = new Date();

// Lấy thời gian hiện thời và in chúng ra console
const now = new Date(); console.log(now);

// Hai lệnh phân biệt nhau bằng dòng mới (xuống dòng)
const now = new Date()
console.log(now)

// Hai lệnh sau phân cách nhau bằng xuống dòng và chấm phẩy
const now = new Date();
console.log(now);

for (initialization; condition; increment) {

// run the loop

}

// Tạo một hàm để tính diện tích hình vuông

function square(number) {

return Math.pow(number, 2);

}


// Tính diện tích nếu number > 0

if (number > 0) {

square(number);

}

// Ví dụ về đối tượng

const objectName = {};


// Tạo đối tượng triangle

const triangle = {

  type: "right",

  angle: 90,

  sides: 3,

};

// Lệnh điều kiện được viết trên một dòng

if (x === 1) { /* execute code if true */ } else { /* execute code if false */ }


// Lệnh điều kiện với thụt lề

if (x === 1) {

  // thực thi khối lệnh nếu true

} else {

  // thực thi khối lệnh nếu false

}

// Điều kiện với cặp ngoặc xoắn được đặt ở dòng mới

if (x === 1)

{

  // thực thi khối lệnh nếu true

}

else

{

  // thực thi khối lệnh nếu false

}

// Tạo một hàm

function isEqualToOne(x) {

// Kiểm tra nếu x bằng 1

if (x === 1) {

  // khối lệnh và return true

  return true;

} else {

  return false;

}

}

var myVariable = 1;
var myvariable = 2;

const INSURANCE_RATE = 0.4;

// Tạo một lớp

class ExampleClass {

  constructor() { }

}

var var = "Some value";

SyntaxError: Unexpected token (1:4)