ES6 - variables phân biệt var - let - const

• ES6 có thể cách khai báo giá trị cho một biến bằng cách sử dụng: var, let, const. Tùy vào điều kiện cụ thể mà sử dụng cách khai báo cho phù hợp.
  • var đã có từ các phiên bản Javascript trước đây, khai báo có 2 dạng toàn cục - global (ảnh hưởng mọi nơi) và địa phương - local (chỉ ảnh hưởng bên trong function).
  • let có từ phiên bản ES6, sử dụng như var, tuy nhiên có tác dụng phạm vi bên trong một khối (như bên trong câu điều kiện if, vòng lặp for, ...).
  • const sử dụng như let, tuy nhiên const có giá trị không đổi trong suốt ứng dụng.
• Để hiểu rõ hơn về var, let, const ta xem các trường hợp bên dưới nhé.

ES6 khai báo giá trị với var

Khai báo toàn cục

Biến được khai báo sẽ ảnh hưởng trong toàn bộ ứng dụng.

var x = 10;
function myFnc(){
  console.log(x); /* output: 10, x có ảnh hưởng tới Function */
}
console.log(x); /* output: 10, x có ảnh hưởng khắp nơi */
myFnc();

• Xem kết quả: nhấn F12, chọn Console.
• Ta thấy x ảnh hưởng cả bên trong và bên ngoài function.

Khai báo địa phương

Biến được khai báo chỉ ảnh hưởng trong function được khai báo.

var x = 10;
function myFnc(){
  var y = x + 5 /* y được khai báo trong Function */
  console.log(y); /* output: 15, y chỉ có ảnh hưởng bên trong Function */
}
console.log(y); /* output: Error */
myFnc();

• Ta thấy y được khai báo bên trong function nên chỉ ảnh hưởng bên trong function, nếu sử dụng bên ngoài sẽ báo lỗi.

ES6 khai báo giá trị với let

Để hiểu rõ, trước tiên ta xét var bên trong câu điều kiện if.

var với khối (block)

var x = 10;
if (x === 10) {
  var x = 20; /* x được gán giá trị mới là 20 */
  console.log(x); /* output: 20 */
}
console.log(x);  /* output: 20 */

• x bên trong câu điều kiện if sẽ cho kết quả 20.
• x bên ngoài if sẽ bị ảnh hưởng kết quả từ bên trong if nên cũng cho kết quả 20.

let với khối (block)

let x = 10;
if (x === 10) {
  let x = 20; /* x được let với giá trị mới là 20 */
  console.log(x); /* output: 20, giá trị mới chỉ có tác dụng trong if */
}
console.log(x);  /* output: 10, x bên ngoài if, nên không bị ảnh hưởng giá trị mới */

• x bên trong câu điều kiện if sẽ cho kết quả riêng là 20.
• x bên ngoài if sẽ cho kết quả riêng (được gán ban đầu) là 10.

ES6 khai báo giá trị với const

Sử dụng đơn giản như sau:

const x = 10;
console.log(x);  /* output: 10 */

Tuy nhiên nếu đặt lại const tương tự sẽ báo lỗi:

const x = 10;
console.log(x);  /* output: 10 */
if (x === 10) {
  x = 20;
  console.log(x); /* output: Error */
}

• const chỉ mang duy nhất một giá trị, nếu giá trị thay đổi sẽ báo lỗi.

Theo https://hocwebchuan.com

Theo Học Web chuẩn.