Hiểu cú pháp và cấu trúc mã trong JavaScript
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 luật ngữ pháp. Dưới đây là một số ví dụ về các luật 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ự, tất cả các ngôn ngữ lập trình phải tuân theo các luật cụ thể để hoạt động. Bộ luật 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 shell 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 hướng dẫn này, ta sẽ xem xét nhiều luật 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ố luật cú pháp là bắt buộc đối với chức năng JavaScript. Nếu chúng không được tuân theo, 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 câu "Hello, World!" chương trình:
// Example of a broken JavaScript program console.log("Hello, World!" Mẫu mã này thiếu dấu ngoặc đóng và thay vì in dòng "Hello, World!" vào console , lỗi sau sẽ xuất hiện:
OutputUncaught SyntaxError: missing ) after argument list Phần bị 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.
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. Nghĩa là , có những luật 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 chạy mã. 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 theo 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"; // no whitespace between variable & string const greeting = "Hello"; // excessive whitespace after assignment const greeting = "Hello"; // single whitespace between variable & string Mặc dù tất cả ba ví dụ trên sẽ hoạt động hoàn toàn giống nhau trong kết quả , tùy chọn thứ ba của câu greeting = "Hello" cho đến nay 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.
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
Khoảng trắng trong JavaScript bao gồm khoảng trắng, 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 nghĩa là ba ví dụ sau về phép gán biến sẽ có cùng một kết quả đượ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 “Thành phố New York, NY” dù 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 luật 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 dễ đọc hơn so với 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 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 một comment và sau một 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.
// An example of if statement syntax if () { } // Check math equation and print a string to the console if (4 < 5) { console.log("4 is less than 5."); } // An example of for loop syntax for () { } // Iterate 10 times, printing out each iteration number to the console for (let i = 0; i <= 10; i++) { console.log(i); } Như đã trình bày, các if tuyên bố và for vòng lặp có khoảng trắng trên mỗi bên của dấu ngoặc đơn (nhưng không phải bên trong dấu ngoặc đơn).
Khi mã liên quan đến một hàm, phương thức hoặc lớp, dấu ngoặc đơn sẽ chạm vào tên tương ứng.
// An example function function functionName() {} // Initialize a function to calculate the volume of a cube function cube(number) { return Math.pow(number, 3); } // Invoke the function cube(5); Trong ví dụ trên, cube() là một hàm và cặp dấu ngoặc đơn () sẽ chứa các tham số hoặc đối số. Trong trường hợp này, các tham number tương ứng là number hoặc 5 . Mặc dù cube () với một khoảng trống thừa hợp lệ ở chỗ mã sẽ thực thi như mong đợi, nhưng nó hầu như không bao giờ được nhìn thấy. Giữ chúng cùng nhau giúp dễ dàng liên kết tên hàm với cặp dấu ngoặc đơn và bất kỳ đối số được truyền liên quan nào.
Dấu chấm phẩy
Các chương trình JavaScript bao gồm một loạt các lệnh được gọi là các câu lệnh, cũng giống như các đoạn văn bản bao gồm một loạt các câu. Trong khi một câu sẽ kết thúc bằng dấu chấm, một câu lệnh JavaScript thường kết thúc bằng dấu chấm phẩy ( ; ).
// A single JavaScript statement const now = new Date(); Nếu hai hoặc nhiều câu lệnh nằm cạnh nhau, bắt buộc phải tách chúng bằng dấu chấm phẩy.
// Get the current timestamp and print it to the console const now = new Date(); console.log(now); Nếu các câu lệnh được phân tách bằng một dòng mới, thì dấu chấm phẩy là tùy chọn.
// Two statements separated by newlines const now = new Date() console.log(now) Một quy ước chung và an toàn là phân tách các câu lệnh bằng dấu chấm phẩy dù dòng mới. Nói chung, việc đưa chúng vào để giảm xác suất sai sót được coi là thực tiễn tốt.
// Two statements separated by newlines and semicolons const now = new Date(); console.log(now); Dấu chấm phẩy cũng được yêu cầu giữa quá trình khởi tạo, điều kiện và sự tăng giảm của vòng lặp for .
for (initialization; condition; increment) { // run the loop } Dấu chấm phẩy không được bao gồm sau bất kỳ loại câu lệnh khối nào, chẳng hạn như if , for , do , while , class , switch và function . Các câu lệnh khối này được chứa trong dấu ngoặc nhọn {} . Lưu ý các ví dụ dưới đây.
// Initialize a function to calculate the area of a square function square(number) { return Math.pow(number, 2); } // Calculate the area of a number greater than 0 if (number > 0) { square(number); } Hãy cẩn thận, vì không phải tất cả mã được đặt trong dấu ngoặc nhọn sẽ kết thúc mà không có dấu chấm phẩy. Các đối tượng được đặt trong dấu ngoặc nhọn và phải kết thúc bằng dấu chấm phẩy.
// An example object const objectName = {}; // Initialize triangle object const triangle = { type: "right", angle: 90, sides: 3, }; Thực tế được chấp nhận rộng rãi là bao gồm dấu chấm phẩy sau mỗi câu lệnh JavaScript ngoại trừ các câu lệnh khối, kết thúc bằng dấu ngoặc nhọn.
Thụt lề
Về mặt kỹ thuật, một chương trình JavaScript hoàn chỉnh có thể được viết trên một dòng. Tuy nhiên, điều này sẽ nhanh chóng trở nên rất khó đọc và duy trì. Thay vào đó, ta sử dụng dòng mới và thụt lề.
Đây là một ví dụ về câu lệnh if / else điều kiện, được viết trên một dòng hoặc với dòng mới và thụt lề.
// Conditional statement written on one line if (x === 1) { /* execute code if true */ } else { /* execute code if false */ } // Conditional statement with indentation if (x === 1) { // execute code if true } else { // execute code if false } Lưu ý bất kỳ mã nào có trong một khối đều được thụt lề. Thụt lề có thể được thực hiện với hai dấu cách, bốn dấu cách hoặc bằng cách nhấn vào ký tự tab. Việc sử dụng các tab hoặc khoảng trắng hay không là tùy thuộc vào sở thích cá nhân của bạn (cho một dự án cá nhân) hoặc hướng dẫn của tổ chức bạn (cho một dự án cộng tác).
Bao gồm dấu ngoặc nhọn ở cuối dòng đầu tiên, như trong ví dụ trên, là cách thông thường để cấu trúc các câu lệnh và đối tượng khối JavaScript. Một cách khác mà bạn có thể thấy các câu lệnh khối được viết bằng dấu ngoặc nhọn trên các dòng riêng của chúng.
// Conditional statement with braces on newlines if (x === 1) { // execute code if true } else { // execute code if false } Kiểu này ít phổ biến hơn trong JavaScript cũng như trong các ngôn ngữ khác, nhưng không phải là chưa từng thấy.
Mọi câu lệnh khối lồng nhau sẽ được thụt vào sâu hơn.
// Initialize a function function isEqualToOne(x) { // Check if x is equal to one if (x === 1) { // on success, return true return true; } else { return false; } } Việc thụt lề thích hợp cho mã của bạn là điều bắt buộc để duy trì khả năng đọc và giảm thiểu nhầm lẫn. Một ngoại lệ đối với luật này cần lưu ý là các thư viện nén sẽ bị xóa các ký tự không cần thiết, do đó, kết xuất kích thước file nhỏ hơn để cho phép thời gian tải trang nhanh hơn (như trong jquery.min.js và d3.min.js ).
Định danh
Tên của một biến, hàm hoặc thuộc tính được gọi là mã định danh trong JavaScript. Số nhận dạng bao gồm các chữ cái và số, nhưng chúng không được bao gồm bất kỳ ký hiệu nào ngoài $ và _ và không được bắt đầu bằng một số.
Trường hợp nhạy cảm
Những tên này phân biệt chữ hoa chữ thường. Hai ví dụ sau đây, myVariable và myvariable sẽ đề cập đến hai biến rõ rệt.
var myVariable = 1; var myvariable = 2; Quy ước của các tên JavaScript là chúng được viết bằng camelCase, nghĩa là từ đầu tiên là chữ thường nhưng mọi từ sau đều bắt đầu bằng chữ hoa. Bạn cũng có thể thấy các biến hoặc hằng số toàn cục được viết bằng chữ hoa, được phân tách bằng dấu gạch dưới.
const INSURANCE_RATE = 0.4; Ngoại lệ của luật này là tên lớp, thường được viết với mọi từ bắt đầu bằng chữ hoa (PascalCase).
// Initialize a class class ExampleClass { constructor() { } } Để đảm bảo mã có thể đọc được, cách tốt nhất là sử dụng các số nhận dạng rõ ràng khác nhau trong các file chương trình của bạn.
Từ khóa dành riêng
Số nhận dạng cũng không được bao gồm bất kỳ từ khóa dành riêng nào. Từ khóa là các từ trong ngôn ngữ JavaScript có chức năng tích hợp, chẳng hạn như var , if , for và this .
Ví dụ: bạn sẽ không thể gán giá trị cho một biến có tên var .
var var = "Some value"; Vì JavaScript hiểu var là một từ khóa, điều này sẽ dẫn đến lỗi cú pháp:
SyntaxError: Unexpected token (1:4) Để có tài liệu tham khảo đầy đủ, vui lòng xem danh sách các từ khóa dành riêng (MDN) này
Kết luận
Bài viết này đã cung cấp một cái nhìn tổng quan về cú pháp và cấu trúc mã cơ bản của JavaScript. Cú pháp rất quan trọng đối với việc thực thi đúng chương trình cũng như khả năng đọc và khả năng bảo trì cho cả bạn và cộng tác viên trên mã của bạn.
Ta đã xem xét nhiều quy ước chung về cú pháp và kiểu JavaScript trong bài viết này, nhưng cuối cùng điều quan trọng nhất cần nhớ là phải linh hoạt và nhất quán với group hoặc tổ chức của bạn.
Các tin liên quan
Cách thêm JavaScript vào HTML2017-06-30
Cách sử dụng control panel dành cho nhà phát triển JavaScript
2017-06-29
Cách viết comment bằng JavaScript
2017-06-20
Hiểu các loại dữ liệu trong JavaScript
2017-06-01
Phương thức chuỗi padStart và padEnd trong JavaScript
2017-02-17
Các chữ mẫu được gắn thẻ trong JavaScript (ES6 / ES2015)
2017-02-07
Bắt đầu với Trực quan hóa Dữ liệu Sử dụng JavaScript và Thư viện D3
2016-12-28
Bắt đầu với Trực quan hóa Dữ liệu Sử dụng JavaScript và Thư viện D3
2016-12-28
Cách làm việc với JSON trong JavaScript
2016-12-09
Cấu trúc đối tượng và mảng trong JavaScript với ES6
2016-12-09
