- Series Javascript thần thánh – Javascript từ một ngôn ngữ sida trở thành bá chủ như thế nào?
- Series Javascript thần thánh – Giải ngố về ES6, ES8, ES 2017, ECMAScript ?
- Series Javascript thần thánh – Phạm vi biến cực dị của Javascript
- Series Javascript thần thánh – ES7 bổ sung nhẹ vài tính năng cho Javascript
- Series Javascript thần thánh – Bối rối vì quá nhiều cách xử lí bất đồng bộ trong Javascript?
Trong bài viết trước, mình đã giới thiệu sơ qua về các phiên bản nâng cấp của Javascript. Trong đó, ở phiên bản ES6 có bổ sung thêm từ khóa let. Từ khóa let sẽ bổ sung thêm phạm vi khối (block scope) cho Javascript.
Vậy phạm vi là gì? Ngoài phạm vi khối ra thì còn phạm vi nào khác nữa không? 🤔
Mục lục
Thuở ban đầu:
Ban đầu lúc được thiết kế thì Javascript chỉ có 2 phạm vi duy nhất là phạm vị toàn cục (global scope) và phạm vi địa phương (local scope).
Global scope:
Các biến có phạm vi toàn cục sẽ có thể truy xuất ở bất kì đâu.
Ví dụ đơn giản:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
var a = 10; function doSomething(){ console.log(a); // có thể truy cập a } function doAnotherThing(){ console.log(a); // có thể truy cập a } doSomething(); doAnotherThing(); |
Local scope:
Các biến chỉ tồn tại bên trong các hàm (function), local scope còn được gọi là function scope vì lẽ này. Mỗi hàm có phạm vi cục bộ riêng của nó, do đó một hàm không thể truy cập các biến cục bộ của một hàm khác.
Ví dụ:
|
1 2 3 4 5 6 7 8 9 |
function doSomething(){ var a = 10; } function doAnotherThing(){ console.log(a); // không thể có thể truy cập biến A. Lỗi: ReferenceError: a is not defined } doAnotherThing(); |
Từ năm 2015 trở đi với ES6:
ES6 bổ sung thêm từ khóa let cho javascript. Các biến khai báo với từ khóa let sẽ có phạm vị khối (block scope).
Phạm vị khối (block scope) là một biến được khai báo trong 1 khối lệnh nào đó, ví dụ: câu lệnh điều kiện (if) hoặc vòng lặp (for). Thực sự thì phạm vi khối không có gì lạ đối với các ngôn ngữ hướng đối tượng như Java, C#, tuy nhiên đối với Javascript thì hơi “dị”. 🤨
OK, bàn tí về sự khác nhau của var và let.
var và let:
Ta xem ví dụ bên dưới:
|
1 2 3 4 5 6 7 8 |
if(true){ let a = 10; var b = 20; } //Có thể truy cập b nhưng không thể truy cập a console.log(b); // in ra 10 console.log(a); // Lỗi: a is not defined |
Trong ví dụ trên, biến a khai báo với let sẽ có phạm vị khối lệnh. Do đó, bên ngoài khối lệnh if thì không thể truy xuất được. Trong khi đó, biến b khai báo bằng từ khóa var sẽ có phạm vị hàm, đo đó, vẫn có thể truy xuất bên ngoài khối lệnh if.
const:
Ta mở rộng vấn đề với việc bàn thêm về từ khóa const.
Cái này cực kì dễ hiểu, tương tư như các ngôn ngữ lập trình khác thì const dùng để khai báo hằng số. Một biến khi khai báo là const, nếu bị gán vào giá trị mới thì sẽ bị lỗi là TypeError: Assignment to constant variable.
|
1 2 |
const x = 1; x = 100; // Lỗi Uncaught TypeError: Assignment to constant variable |
Khi nào nên dùng var hoặc let hoặc const?
Theo kinh nghiệm của cái nhân mình thì: ưu tiên dùng const. Kế đến là dùng let và cố gắng không dùng var. Quá đơn giản phải không nào. 😋
Kết:
Qua bài này bạn đã hiểu thêm về 3 phạm vi biến trong Javascript là: global, local và block. Ngoài ra, quan trọng nhất là biết khi nào nên dùng let, var và const: “Ưu tiên dùng const. Kế đến là dùng let và cố gắng không dùng var”.
Trong bài viết tiếp theo, chúng ta sẽ bàn về các nâng nấp của phiên bản ES7 (ra đời năm 2016) nhé.
Bài viết giúp phân biệt rõ ràng var, let và const. Em góp ý ví dụ phân biệt thực tế rất cần thiết giữa var và let là khi dùng với for mà có callback. Nếu trong callback có dùng tới biến var trong for thì sẽ nhận giá trị cuối cùng của var, ngược lại nếu dùng let thì mỗi callback sẽ có giá trị let riêng.
Cảm ơn Tuấn Anh vì đã đóng góp 😄
Chúc anh có nhiều bài viết chất lượng hơn nha, sau này thành blogger nổi tiếng cho đàn em noi theo hihi