JavaScript: Cách viết comment (nhận xét) trong JavaScript


Khóa học qua video:
Lập trình Python All Lập trình C# All SQL Server All Lập trình C All Java PHP HTML5-CSS3-JavaScript
Đăng ký Hội viên
Tất cả các video dành cho hội viên

Giới thiệu

Trong lập trình, sự cân nhắc đầu tiên của chúng ta thường là máy - cách máy tính đọc và diễn giải mã chúng ta viết. Tuy nhiên, điều quan trọng không kém là xem xét những người sẽ đọc và làm việc với mã. Cho dù bạn đang làm việc với một nhóm hay một mình, bạn sẽ cần phải học cách nhận xét và cấu trúc mã của mình một cách phù hợp cho người đọc.

Chú thích là chú thích trong mã nguồn của chương trình bị trình dịch bỏ qua và do đó không ảnh hưởng đến kết quả thực của mã. Nhận xét có thể vô cùng hữu ích trong việc giải thích mục đích của mã của bạn là gì hoặc nên làm gì.

Là một nhà phát triển, có thể khó chịu khi đi sâu vào mã do người khác viết mà không được nhận xét đúng cách và rất dễ quên mã của chính bạn có nghĩa là gì khi bạn không còn đắm mình trong bối cảnh của một chương trình. Nhận xét mã của bạn sớm sẽ củng cố thói quen lập trình tốt trong suốt sự nghiệp của bạn để tránh những vấn đề này sau này.

Cú pháp nhận xét (comment)

Chúng ta hãy xem xét nhanh hai loại cú pháp nhận xét JavaScript khác nhau.

Nhận xét một dòng được viết với hai dấu gạch chéo về phía trước (forward slash) ( //):

// Đây là một comment

Tất cả các ký tự ngay sau // cho đến cuối dòng sẽ bị JavaScript bỏ qua.

Nhận xét khối, đôi khi được gọi là nhận xét trên nhiều dòng, được viết bằng thẻ mở (/*) và thẻ đóng (*/). Nếu bạn đã biết về CSS, thì bạn đã quen thuộc với các nhận xét cấp khối.

/* Đây là
một comment */

Mọi thứ giữa thẻ mở và thẻ đóng trong khối mã trên sẽ bị bỏ qua.

Cả nhận xét một dòng và nhiều dòng đều được viết bên trên mã mà chúng được chỉ định để giải thích, như được minh họa trong ví dụ “Hello, World!” như sau:

// Print "Hello, World!" to the console
console.log("Hello, World!");

Khi viết nhận xét, hãy thụt lề chúng ở cùng mức với mã ngay bên dưới chúng:

// Tạo một hàm

function alphabetizeOceans() {

// Tạo biến tên oceans để lưu danh sách chuỗi

const oceans = ["Pacific", "Atlantic", "Indian", "Antarctic", "Arctic"];


// In mảng ở dạng được sắp xếp ra console

console.log(oceans.sort());

}

Lưu ý rằng các nhận xét cũng giống như một phần của mã như chính chương trình. Các bình luận lỗi thời có thể gây hại hơn là không có bình luận nào, vì vậy hãy nhớ duy trì và cập nhật các bình luận thường xuyên cùng với mọi thứ khác.

Nhận xét nội tuyến (Inline comment)

Nhận xét một dòng được gọi là nhận xét nội tuyến khi chúng xuất hiện ở cuối dòng mã.

let x = 99;    // gán một số cho x
let y = x + 2; // gán tổng x + 2 cho y

Nhận xét nội tuyến có thể được sử dụng để chú thích nhanh về các đoạn nội dung nhỏ, cụ thể. Vì nhận xét chỉ nên liên quan đến dòng chính xác mà nó được viết, nên đây là loại nhận xét rõ ràng nhất.

Hãy nhớ rằng không có cách nào để kết thúc một dòng nhận xét trên một dòng, vì vậy hãy đảm bảo không đặt bất kỳ mã nào sau //, như trong ví dụ bên dưới.

for (let i = 0; i === 10; i++) // vòng lặp for chạy 10 lần {

// thực thi khối lệnh nhưng cú pháp sai

}

Mặc dù các nhận xét nội tuyến có thể hữu ích, nhưng chúng nên được sử dụng một cách tiết kiệm - mã được bao phủ bởi vô số nhận xét nội tuyến sẽ nhanh chóng trở nên lộn xộn và do đó khó đọc.

Chặn nhận xét

Nhận xét cấp khối, hoặc nhận xét nhiều dòng, là các chú thích dạng dài được sử dụng để giới thiệu và giải thích một phần mã. Thường thì những loại nhận xét này được đặt ở đầu tệp hoặc trước một khối mã đặc biệt phức tạp.

/* Tạo và gọi hàm greetUser

để gán tên của người dùng thánh một hằng và

in ra một greeting. */


function greetUser() {

const name = prompt("What is your name?");

console.log("Hello ," + name + "! How are you?");

}


greetUser();
Đôi khi bạn cũng có thể thấy một phiên bản sửa đổi một chút của cú pháp nhận xét khối, bắt đầu bằng /** và bao gồm dấu hoa thị ở khắp bên trái của nhận xét khối.
/**
 * Tạo một hằng với một mảng chuỗi.
 * Lặp qua từng phần tử trong mảng và in
 * nó ra console.
 */

const seaCreatures = ["Shark", "Fish", "Octopus"];

for (const seaCreature of seaCreatures) {
  console.log(seaCreature);
}

Đôi khi loại nhận xét này cũng sẽ bao gồm thông tin chi tiết về tệp lập trình, bao gồm tên, phiên bản và tác giả của tập lệnh.

Nếu bạn là người mới bắt đầu sử dụng JavaScript, bạn có thể viết càng nhiều càng tốt để học và hiểu mã bạn viết. Khi bạn tiến bộ với tư cách là nhà phát triển JavaScript, bạn sẽ tìm cách trả lời mục đích hoặc lý do đằng sau mã, trái ngược với cách thức hoặc điều gì.

Chú thích code (rào code) để thử nghiệm

Chú thích cũng có thể được sử dụng để nhanh chóng và dễ dàng ngăn chặn việc thực thi mã cho mục đích thử nghiệm và gỡ lỗi. Điều này được gọi là "Rào code".

Nếu có lỗi trong một số mã bạn đã viết, bạn có thể rào đoạn code đó để ngăn chúng chạy và có thể hữu ích trong việc xác định nguồn gốc của vấn đề. Bạn cũng có thể sử dụng nó để chuyển đổi giữa các đoạn code để kiểm tra các kết quả khác nhau.

// Hàm cộng hai số
function addTwoNumbers(x, y) {
  let sum = x + y;
  return sum;
}

// Hàm tính tích hai số
function multiplyTwoNumbers(x, y) {
  let product = x * y;
  return product;
}

/* Trong ví dụ này, ta sẽ rào lời gọi hàm addTwoNumbers
, như vậy thì hàm sẽ không được thi. Only có hàm
multiplyTwoNumbers là được gọi */

// addTwoNumbers(3, 5);
multiplyTwoNumbers(5, 9);

Cả nhận xét một dòng và nhận xét khối đều có thể được sử dụng để nhận xét mã, tùy thuộc vào kích thước của phần được chuyển đổi.

Lưu ý : Việc rào code chỉ nên được thực hiện trong mục đích thử nghiệm. Đừng để lại các đoạn mã đã nhận xét trong tập lệnh cuối cùng của bạn.

Khi tìm ra logic của một chương trình, thì việc rào code có thể hữu ích khi bạn xác định vị trí của lỗi hoặc đánh giá các dòng mã cung cấp tiện ích nhất.

Kết luận

Mã JavaScript được máy tính thông dịch, nhưng sẽ luôn được đọc bởi các lập trình viên khác, bao gồm cả bản thân bạn trong tương lai. Dành thời gian để lại chú thích thích hợp về các phần mã phức tạp sẽ mang lại lợi ích trong tương lai, giúp bạn và các cộng tác viên hiểu được ý định của mã bạn đã viết dễ dàng hơn.

» Tiếp: Tìm hiểu về hàm hủy (destructuring), tham số rest và cú pháp spread trong JavaScript
« Trước: Tìm hiểu về cú pháp và cấu trúc lập trình trong JavaScript
Khóa học qua video:
Lập trình Python All Lập trình C# All SQL Server All Lập trình C All Java PHP HTML5-CSS3-JavaScript
Đăng ký Hội viên
Tất cả các video dành cho hội viên
Copied !!!