Nền tảng Javascript: Cú pháp và Cấu trúc — những điều căn bản mà đôi khi bạn bỏ qua
Như với bất kỳ ngôn ngữ nào, ngôn ngữ lập trình được xác định bởi các bộ quy tắc. Các quy tắc (hoặc cú pháp) là những gì ta tuân theo khi viết code, tạo thành một cấu trúc logic của các chương trình.
Hãy tìm hiểu sâu về các nền tảng trong JavaScript. Chúng ta sẽ bắt đầu xem xét các giá trị, camelCase, unicode, chấm phẩy, thụt đầu dòng, khoảng trắng, comment, case sensitive, từ khóa, toán tử và biểu thức.
Bằng cách dành thời gian để tìm hiểu các nguyên tắc cơ bản, chúng ta sẽ có thể tiếp tục xây dựng nên những đoạn code hiệu quả và dễ đọc hơn.
Các giá trị trong JavaScript
Trong JavaScript có hai loại giá trị: Giá trị cố định (literal) và Giá trị biến (Variable).
Giá trị cố định (Literal)
Literals được định nghĩa là các giá trị được viết trong code ở dụng số, chuỗi, boolean (true hay false), cũng như object và mảng (array). Một số ví dụ:
10 // A number (can be a decimal eg. 10.5)
'Boat' // A string (can be in double "" or single '' quotes)
true // A boolean (true or false)
['a', 'b'] // An array
{color: 'blue', shape: 'Circle'} // An objectBiến (Variable)
Các biến được đặt tên là các giá trị lưu trữ dữ liệu. Trong Javascript, ta khai báo biến var, let hoặcconst từ khóa, và ta gán giá trị với dấu=.
Ví dụ,key được định nghĩa là một biến được gán giá trịabc123:
let key;key = abc123;
Khi nào thì dùng var? Đừng. Nó thực sự chỉ nên được sử dụng khi làm việc với những đoạn code thừa kế. Đó là cú pháp Pre-ES6 cũ kỹ.
Khi nào thì dùnglet? Dùng nó khi biến của bạn cần được cập nhật lại trong chương trình (có thể được chỉnh lại).
Khi nào thì dùng const? Sử dụng nó nếu biến của bạn giữ một giá trị không đổi. Nó phải được chỉ định tại thời điểm khai báo và không thể được chỉ định lại.
camelCase
Điều gì xảy ra nếu tên biến của chúng ta bao gồm nhiều hơn một từ? Ví dụ, làm thế nào để khai báo một biến mà chúng ta muốn đặt tên là “first name”?
Liệu có thể dùng dấu gạch ngang? Ví dụ:first-name không, - được dành riêng cho phép trừ trong JavaScript
Còn dấu gạch dưới thì sao? Ví dụ: first_name Có thể, nhưng điều đó sẽ làm cho code của chúng ta trông lộn xộn và khó hiểu.
Giải pháp? Đó chính là camelCase! Ví dụfirstName. Từ đầu tiên được viết thường, chữ cái đầu tiên của từ tiếp theo được viết hoa. Đây chính là quy ước.
Note: Tuy nhiên, hoàn toàn có thể chấp nhận việc đặt tên các biếnconst với chữ in hoa và dấu gạch dưới, ví dụ: const DEFAULT_PLAYBACK_SPEED = 1. Điều đó sẽ thể hiện rõ hơn việc giá trị của biến là cố định. Hoặc bạn có thể chỉ trung thành với camelCase thôi.
Unicode
JavaScript sử dụng bộ ký tự unicode. Unicode bao gồm tất cả các ký tự, dấu chấm câu và ký hiệu. Điều này thật tuyệt khi chúng ta có thể viết tên của mình bằng bất kỳ ngôn ngữ nào và thậm chí chúng ta có thể sử dụng biểu tượng cảm xúc làm tên biến (tại sao không? 🤷🏻♂️).
Dấu chấm phẩy
Các chương trình JavaScript được tạo thành từ một số instruction được biết đến như là câu lệnh:
// These are all examples of JavaScript statements:let a = 1000;a = b + c;const time = Date.now();
Các câu lệnh JavaScript thường kết thúc bằng dấu chấm phẩy ;.
Tuy nhiên, điều này không hề bắt buộc! Sẽ không có vấn đề gì trong Javascript nếu bạn không sử dụng các dấu chấm phẩy.
// Still perfectly valid!let a = 1000a = b + cconst time = Date.now()
Tuy nhiên, cũng có một số tình huống bắt buộc. Chẳng hạn, khi chúng ta sử dụng vòng lặp for, kiểu như thế này:
for (i = 0; i < .length; i++) {
// code to execute
}Tuy nhiên, khi sử dụng câu lệnh chặn, dấu chấm phẩy không được đưa vào sau dấu ngoặc nhọn, ví dụ:
if (name == "Samantha") {
// code
} // <- no ';'//or,function people(name) {
// code
} // <- no ';'
Tuy nhiên, nếu chúng ta sử dụng một object như:
const person = {
firstName: "Samantha",
lastName: "Doe",
age: 30,
eyeColor: "blue"
}; // the ';' is mandatory
Thì dấu ; là cần thiết
Dần dần, bạn sẽ bắt đầu ghi nhớ lúc nào có thể và không thể sử dụng dấu chấm phẩy. Cho đến lúc đó, hãy thật khôn ngoan khi sử dụng chúng ở cuối tất cả các câu lệnh (ngoại trừ các câu lệnh chặn!)
Thêm vào đó, nó thực sự là một quy ước phổ biến là sử dụng chúng bất kể, vì việc sự dụng dấu chấm vậy được xem là làm giảm xác suất xảy ra lỗi.
Lưu ý: Một khi bạn thực sự bắt đầu với JavaScript, hãy bắt đầu sử dụng các linter như ESLint. Nó sẽ tự động tìm lỗi cú pháp trong code của bạn và làm cho cuộc sống dễ dàng hơn nhiều!
Thụt đầu dòng
Về lý thuyết, chúng tôi có thể viết toàn bộ chương trình JavaScript trên một dòng. Tuy nhiên điều này sẽ khiến code không thể đọc và duy trì được. Đó là lý do tại sao chúng tôi sử dụng dòng và thụt đầu dòng. Hãy dụng một câu lệnh điều kiện làm ví dụ:
if (loginSuccessful === 1) {
// code to run if true
} else {
// code to run if false
}Trong trường hợp này, code được thụt đầu dòng là dòng comment // code to run if true và // code to run if false. Bạn có thể thụt đầu dòng bằng một vài khoảng trắng (2 hoặc 4 là phổ biến) hoặc một tab. Tùy bạn lựa chọn, nhưng mọi thứ phải nhất quán!
Nếu lồng thêm mã vào, ta sẽ thụt đầu dòng như thế này:
if (loginAttempts < 5){
if (loginAttempts < 3){
alert("< 3");
} else {
alert("between 3 and 5");
}
} else {
if (loginAttempts > 10){
alert("> 10");
} else {
alert("between 5 and 10");
}
}Bằng cách áp dụng thụt đầu dòng, bạn sẽ có được những đoạn code rõ ràng, dễ đọc và dễ bảo trì hơn.
Khoảng Trắng
JavaScript chỉ yêu cầu một khoảng trắng giữa từ khóa, tên và mã định danh, nếu không, mọi khoảng trắng sẽ bị bỏ qua hoàn toàn. Điều này có nghĩa là về ngôn ngữ, không có sự khác biệt giữa các câu lệnh sau:
const visitedCities="Melbourne, "+"Montreal, "+"Marrakech";
const visitedCities = "Melbourne, " + "Montreal, " + "Marrakech"Tôi chắc chắn rằng bạn sẽ tìm thấy dòng thứ hai dễ đọc hơn nhiều. Và một ví dụ khác:
let x=1*y;
let x = 1 * y;Một lần nữa, dòng thứ hai dễ đọc và debug hơn nhiều! Vì vậy, hãy tự do giải phóng code của bạn bằng những khoảng trắng theo cách có ý nghĩa! Và cũng vì lý do này, đây cũng là một cách sử dụng khoảng trắng được chấp nhận:
const cityName = "Melbourne";
const cityPopulation = 5000001;
const cityAirport = "MEL";Comment
Comment là một dang code không thể thực thi. Chúng có ích khi cung cấp giải thích về một đoạn code trong một chương trình. Hoặc có thể được dùng để đưa ra một đoạn code nhưng không thực thi — thường được sử dụng khi test một đoạn code thay thế.
Hai loại comment trong Javascript:
// Comment goes here/* Comment goes here */
Cú pháp đầu tiên là một nhận xét dòng đơn. Nhận xét ở bên phải của//
Cú pháp thứ 2 là một bình luận nhiều dòng. Nhận xét nằm ở giữa các dấu sao/* here */
Một nhận xét nhiều dòng dài hơn:
/* This is
a comment spanning
multiple lines */Identifier
Trong JavaScript, tên của một biến, hàm hoặc thuộc tính được gọi là định danh. Mã định danh có thể bao gồm các chữ cái, số, $ và _. Không có biểu tượng nào khác được cho phép và chúng không thể bắt đầu bằng một số.
// Valid :)Name
name
NAME
_name
Name1
$name// Invalid :(1name
n@me
name!
Phân biệt chữ hoa — chữ thường
JavaScript phân biệt chữ hoa và chữ thường! Một định danh có tên làtest khác vớiTest.
Ví dụ một lỗi:
function test() {
alert("This is a test!");
}function show_alert() {
Test(); // error! test(); is correct
}
Để đảm bảo code có thể đọc được, tốt nhất bạn nên thử thay đổi tên của các biến của bạn để không có định danh quá giống nhau và gây lầm lẫn.
Những từ khóa riêng
Có một số từ trong JavaScript có thể không được sử dụng làm định danh. Những từ đó được ngôn ngữ quy định là từ dành riêng, vì chúng có chức năng tích hợp. Chẳng hạn như:
break, do, instanceof, typeof, case, else, new, var, catch, finally, return, void, continue, for, switch, while, debugger, function, this, with, default, if, throw, delete, in, try, class, enum, extends, super, const, export, import.Xem full list tại đây
Bạn không cần thiết phải ghi nhớ hết danh sách này! Nếu bạn nhận được bất kỳ lỗi cú pháp lạ nào chỉ vào biến, bạn có thể kiểm tra danh sách và thay đổi tên.
Toán tử JavaScript
Toán tử số học+ - * và / được sử dụng chủ yếu khi thực hiện các phép tính trong JavaScript, ví dụ như:
(2 + 2) * 100Toán tử gán= được sử dụng để gán giá trị cho các biến của chúng ta:
let a, b, c;
a = 1;
b = 2;
c = 3;Biểu thức JavaScript
Một biểu thức được tạo ra là khi chúng ta kết hợp các giá trị, biến và toán tử để tính toán một giá trị mới (được gọi là evaluation). Chẳng hạn như:
10 * 10 // Evaluates to 100let x = 5
x * 10 // Evaluates to 50const firstName = "Samantha";
const lastName = "Doe";
firstName + " " + lastName; // Evaluates to: Samantha Doe
Kết luận
Bài viết này nhằm cung cấp một cái nhìn tổng quan về cú pháp và cấu trúc cơ bản của JavaScript. Chúng ta đã xem xét nhiều quy ước chung, tuy nhiên, hãy nhớ rằng bạn có thể linh hoạt một chút — đặc biệt là khi làm việc trong môi trường hợp tác với các tiêu chuẩn cụ thể của riêng.
Cả cú pháp và cấu trúc đều có vai trò quan trọng đối với cả chức năng của các chương trình cũng như khả năng đọc và bảo trì code.
Nguồn: ITnext
Dịch: Lecle Vietnam
LECLE is a global software — blockchain technology house headquartered in South Korea with offices in the USA, Singapore, and Vietnam.
Founded in 2014, we received an initial investment from The Ventures and went through Plug and Play’s accelerating program. Up to now, we have offered innovative solutions that are best suited to various customers in Korea. Since 2018, we have decided to shift our focus onto blockchain business while continuing to develop our outsourcing projects. Now we have been creating a blockchain platform for communities based EOS.
- Website: http://vn.lecle.co.kr/
- Facebook: https://www.facebook.com/LecleVietnam/
- Twitter: https://twitter.com/leclevn
- Linkedin: https://www.linkedin.com/company/lecle/
Please follow Lecle VietNam Blog for more information
