Bắt Đầu với Javascript (P2)

Trong phần này sẽ nói về một số ngữ pháp cơ bản, khai báo biến của JavaScript.

1. Basic.

JavaScript mượn hầu hết cú pháp của nó từ Java, nhưng cũng chịu ảnh hưởng của Awk, Perl và Python.

JavaScript phân biệt chữ hoa chữ thường và sử dụng bộ ký tự Unicode.

Trong JavaScript, các câu lệnh và được phân tách bằng dấu chấm phẩy (. Khoảng trắng, các tab và các ký tự xuống dòng mới được gọi là khoảng trống. Văn bản nguồn của các tập lệnh JavaScript được quét từ trái sang phải và được chuyển đổi thành một chuỗi các phần tử đầu vào là các token, các ký tự điều khiển, line terminators, các comment hoặc khoảng trắng. ECMAScript cũng định nghĩa một số từ khóa và literals nhất định và có các quy tắc cho việc chèn tự động các dấu chấm phẩy (ASI) để kết thúc các câu lệnh. Tuy nhiên, bạn nên luôn luôn thêm dấu chấm phẩy để kết thúc các câu lệnh của bạn. Để biết thêm thông tin, xem tài liệu tham khảo chi tiết về ngữ pháp từ vựng của JavaScript.

2. Comments

Cú pháp của comment giống với C++ và nhiều ngôn ngữ khác:

// a one line comment
 
/* this is a longer, 
   multi-line comment
 */
 
/* You can't, however, /* nest comments */ SyntaxError */

3. Declarations

Có 3 kiểu khai báo trong javascript:

• var: khai báo một biến, tùy chọn khởi tạo cho nó một giá trị.
• let: khai báo một biến chỉ có thể truy cập được trong block bao quanh nó, khác với var - tạo ra một biến có phạm vi truy cập xuyên suốt function chứa nó.
• const: dùng để khai báo một hằng số - là một giá trị không thay đổi được trong suốt quá trình chạy.

3.1. Variables

Bạn sử dụng các biến như tên biểu tượng cho các giá trị trong ứng dụng của mình. Tên của các biến, được gọi là định danh, phù hợp với quy tắc nhất định:

• Tên biến phải bắt đầu bằng một chữ cái hoặc ký tự gạch dưới ("_") hoặc dấu ($)
• Tên biến có thể chứa chữ số, dài ngắn tùy ý.
• JavaScript phân biệt rõ chữ hoa và chữ thường, vì vậy tên biến bao gồm các ký tự từ "A" đến "Z" (chữ hoa) và các ký tự từ "a" đến "z" (chữ thường)

ví dụ tên biến: Number_hits, temp99, $credit, _name, ...

3.2. Declaring variables

Bạn có thể khai báo một biến theo ba cách:

• Với từ khóa var. Ví dụ, var x = 42. Cú pháp này có thể được sử dụng để khai báo cả biến địa phương và toàn cục.
• Bằng cách gán nó một giá trị. Ví dụ, x = 42. Điều này luôn khai báo một biến toàn cục, nếu nó được khai báo bên ngoài bất kỳ hàm nào. Nó tạo ra một cảnh báo JavaScript nghiêm ngặt. Bạn không nên sử dụng biến này.
• Với từ khóa cho. Ví dụ let y = 13. Cú pháp này có thể được sử dụng để khai báo một biến địa phương khối. Xem phạm vi biến bên dưới.

3.3. Evaluating variables.

Một biến được khai báo sử dụng câu lệnh var hoặc let không có giá trị được gán nào được mặc định có giá trị undefined.

Nếu bạn cố gắng truy cập vào một biến chưa được khai báo sẽ sinh ra một ngoại lệ ReferenceError:

var a;
console.log('The value of a is ' + a); // The value of a is undefined

console.log('The value of b is ' + b); // The value of b is undefined
var b;

console.log('The value of c is ' + c); // Uncaught ReferenceError: c is not defined

let x;
console.log('The value of x is ' + x); // The value of x is undefined

console.log('The value of y is ' + y); // Uncaught ReferenceError: y is not defined
let y;

Bạn có thể sử dụng undefined để xác định xem một biến có giá trị hay không. Trong đoạn mã sau đây, đầu vào biến không được gán giá trị, và câu lệnh if:

var input;
if (input === undefined) {
  doThis();
} else {
  doThat();
}

Giá trị undefined hành xử như false khi được sử dụng trong ngữ cảnh boolean. Ví dụ, trong đoạn code sau thức hiện chức năng myFunction bởi vì phần tử myArray là undefined:

var myArray = [];
if (!myArray[0]) myFunction();

Giá trị undefined chuyển thành NaN khi được sử dụng khi tính toán với số.

var a;
a + 2;  // Evaluates to NaN

Khi một biến được gán là null, giá trị null có thể là 0 trong bối cảnh số và tương ứng false trong bối cảnh boolean. Ví dụ:

var n = null;
console.log(n * 32); // Will log 0 to the console

3.4. Variable scope.

Khi bạn khai báo một biến bên ngoài bất kỳ hàm nào, nó được gọi là một biến toàn cục, bởi vì nó có thể sử dụng cho bất kỳ đoạn code nào khác trong document hiện tại. Khi bạn khai báo một biến trong một hàm, nó được gọi là một biến địa phương, bởi vì nó chỉ có thể sử dụng bên trong hàm đó.

Một biến được khai báo trong một khối sẽ có phạm vi là trong một hàm mà khối đó nằm trong hàm đó. Ví dụ, biến x được khai báo trong khối lệnh if, nhưng nó được sử dụng bên ngoài khối lệnh if, trong hàm mà nó đc khai báo:

if (true) {
  var x = 5;
}
console.log(x);  // x is 5

Nó sẽ thay đổi nếu bạn sử dụng let để khai báo biến trong khối, hãy xem ví dụ sau:

if (true) {
  let y = 5;
}
console.log(y);  // ReferenceError: y is not defined

3.4. Variable hoisting.

Một điều bất thường khác về các biến trong javascript là bạn có thể tham chiếu đến một biến đã đc khai báo sau đó, mà ko nhận đc một ngoại lệ. Khái niệm được biết như hoisting; các biến trong javascript là trong một "hoisted hoặc đưa lên trên đầu các function hoặc statement. Tuy nhiên, các biến mà được đưa lên sẽ trả về một gía trị undefined. Vì vậy ngay cả khi bạn khai báo và khởi tạo sau đó bạn sử dụng hoặc tham chiếu đên biến này, nó vẫn sẽ là undefined.

/**
 * Example 1
 */
console.log(x === undefined); // true
var x = 3;

/**
 * Example 2
 */
// will return a value of undefined
var myvar = 'my value';
 
(function() {
  console.log(myvar); // undefined
  var myvar = 'local value';
})();

Những ví dụ trên sẽ được giải thích tương tự như sau:

/**
 * Example 1
 */
var x;
console.log(x === undefined); // true
x = 3;
 
/**
 * Example 2
 */
var myvar = 'my value';
 
(function() {
  var myvar;
  console.log(myvar); // undefined
  myvar = 'local value';
})();

Bởi vì, tất cả các lệnh var trong một function nên được đặt phía trên cùng của hàm các tốt. Thức tế nó làm tăng tính rõ ràng của code.

3.5. Function hoisting.

Đối với hàm thì bạn có thể dùng lời gọi hàm ở phía trên định nghĩa, khai báo hàm.

/* Function declaration */

foo(); // "bar"

function foo() {
  console.log('bar');
}


/* Function expression */

baz(); // TypeError: baz is not a function

var baz = function() {
  console.log('bar2');
};

3.6. Global variables.

Biến toàn cục là thuộc tính của đối tượng toàn cục. Trong trang web đối tượng toàn cục là window, vì vậy bạn có thể thiết lập và truy cập đến các biến bằng cách sử dụng: window.variable syntax

Do đó, bạn có thể truy cập các biến toàn cục được khai báo trong một window hoặc frame từ window hay frame khác bằng cách chỉ định tên window hoặc frame. Ví dụ: nếu một biến được gọi phoneNumber được khai báo trong một document, bạn có thể tham chiếu nó từ một iframe như sau: parent.phoneNumber

3.7. Constants.

Bạn có thể tạo một read-only, đặt tên hằng số với từ khóa const. Cấu trúc đặt tên hằng số là giống với cách đặt tên biến: nó phải bắt đầu bằng một chữ, dấu gạch dưới hoặc ký hiệu ($) và có thể chứa các chữ cái, số hoặc dấu gạch dưới.a

const PI = 3.14;

Hằng số không thể thay đổi giá trị thông qua việc gán hoặc được tái khai báo trong khi tập lệnh đang chạy. Nó phải được khởi tạo với một giá trị.

Các quy tắc phạm vi cho các hằng số giống như các quy tắc khối-phạm vi của biến. Nếu từ khoá const bị bỏ qua, thì định danh được giả định là đại diện cho một biến.

Bạn không thể khai báo một hằng có cùng tên với hàm hoặc biến trong cùng một phạm vi. Ví dụ:

// THIS WILL CAUSE AN ERROR
function f() {};
const f = 5;

// THIS WILL CAUSE AN ERROR ALSO
function f() {
  const g = 5;
  var g;

  //statements
}

Tuy nhiên, các thuộc tính của các đối tượng được gán cho các hằng số không được bảo vệ, do đó câu lệnh sau được thực hiện mà không có vấn đề.

const MY_OBJECT = {'key': 'value'};
MY_OBJECT.key = 'otherValue';

Trên đây là một số kiến thức cơ bản về cú pháp và khai báo biến, hằng số trong javascipt. Cảm ơn vì đã theo dõi bài viết. Mong rằng bài viết có thể giúp ích cho các bạn.

Tham khảo: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types