Phân biệt và cách dùng var, let, và const trong JavaScript

Tóm Tắt

Chào mọi người hôm nay tôi sẽ chia sẻ thêm cho các bạn 1 bài viết cơ bản về Javascript. Phân biệt var, let, và const và cách dùng var, let, và const trong JavaScript không phải ai cũng biết.

Các bạn làm lâu năm, hoặc mới ra trường cũng cần xem qua về các kiến thức tưởng chừng như là lý thuyết này, không phải ai cũng biết, hiểu tường tận và sử dụng đúng ý nghĩa của chúng đâu nha.

Vừa mới cách đây vài phút thôi thì tôi có kiểm tra lại kiến thức cơ bản này một vài bạn lập trình viên, qua khảo sát cho thấy các bạn không có khái niệm chính xác về nó hay hiểu và sử dụng nó 1 cách rất mơ hồ và cảm tính.

Có bạn còn khẳng định với tôi rằng sử dụng Const để có thể cập nhật và thay đổi giá trị. Nếu mà bạn đó có đọc bài này thì chắc biết tôi nói ai rồi ha.

Trong JavaScript , người dùng có thể khai báo một biến bằng cách sử dụng 3 từ khóa là var, let và const . Trong bài viết này, tôi sẽ bổ sung lại kiến thức cơ bản và cho thấy sự khác biệt giữa các từ khóa var, let và const. Qua các ví dụ cụ thể và kết luận các bạn sẽ dần hệ thống hoá lại kiến thức của mình một cách cơ bản nhất.

Xem thêm: Phân biệt ISSET() - EMPTY() - IS_NULL() trong PHP

Kiến thức cơ bản về ES5

ES5 còn được gọi là ECMAScript 2009 vì nó được phát hành vào năm 2009. Nó là một chức năng nhà thầu tập trung vào cách các đối tượng được khởi tạo. Đối với ES5, bạn phải viết từ khóa hàm và trả về, được sử dụng để định nghĩa hàm, giống như ngôn ngữ JavaScript thông thường.

Tiêu chuẩn Ecma này xác định Ngôn ngữ ECMAScript 2015. Đây là ấn bản thứ sáu của Đặc tả Ngôn ngữ ECMAScript. Kể từ khi xuất bản phiên bản đầu tiên vào năm 1997, ECMAScript đã phát triển trở thành một trong những ngôn ngữ lập trình đa năng được sử dụng rộng rãi nhất trên thế giới. Nó được biết đến nhiều nhất như là ngôn ngữ nhúng trong trình duyệt web nhưng cũng đã được chấp nhận rộng rãi cho các ứng dụng máy chủ và nhúng. Ấn bản thứ sáu là bản cập nhật mở rộng nhất cho ECMAScript kể từ khi xuất bản ấn bản đầu tiên vào năm 1997.

Đối với ES5, bạn phải viết từ khóa hàm và trả về, được sử dụng để định nghĩa hàm, giống như ngôn ngữ JavaScript chung thông thường.

Kiến thức cơ bản về ES6

ES6 còn được gọi là ECMAScript 2015 vì nó được phát hành vào năm 2015. Lớp của nó cho phép các nhà phát triển khởi tạo một đối tượng bằng toán tử mới, sử dụng hàm mũi tên, trong trường hợp không cần sử dụng. từ khóa chức năng để xác định chức năng, cũng có thể tránh từ khóa trả về để tìm nạp giá trị máy tính.

Một trong những tính năng nổi bật của ES6 đó là sự bổ sung let và const phục vụ cho việc khai báo biến dữ liệu. Vậy tại sao lại cần tới let và const dù trước đó đã có var để khai báo biến, thì ở bài viết này chúng ta sẽ cùng tìm hiểu lý do của từng kiểu khai báo biến.

Sự khác biệt giữa ES5 và ES6

Về so sánh sự khác biệt của ES5 và ES6 mời cá bạn xem bảng so sánh dưới đây để hiểu hơn nhé.

SR.NO.	ES5	ES6
1.	Tập lệnh ECMA là một đặc tả ngôn ngữ kịch bản đã đăng ký nhãn hiệu do Ecma quốc tế xác định. Phiên bản thứ năm của cùng tên được gọi là ES5	Tập lệnh ECMA là một đặc tả ngôn ngữ kịch bản đã đăng ký nhãn hiệu do Ecma quốc tế xác định. Phiên bản thứ sáu của cùng tên được gọi là ES6
2.	Nó đã được giới thiệu vào năm 2009.	Nó đã được giới thiệu vào năm 2015.
3.	Nó hỗ trợ các kiểu dữ liệu nguyên thủy là chuỗi, số, boolean, null và không xác định.	Trong ES6, có một số bổ sung cho các kiểu dữ liệu JavaScript. Nó đã giới thiệu một kiểu dữ liệu nguyên thủy mới 'biểu tượng' để hỗ trợ các giá trị duy nhất.
4.	Chỉ có một cách để xác định các biến bằng cách sử dụng từ khóa var.	Có hai cách mới để xác định các biến là let và const.
5.	Nó có hiệu suất thấp hơn so với ES6.	Nó có hiệu suất cao hơn ES5.
6.	Thao tác đối tượng tốn nhiều thời gian trong ES5.	Thao tác đối tượng ít tốn thời gian hơn trong ES6.
7.	Trong ES5, cả từ khóa hàm và từ khóa trả về đều được sử dụng để định nghĩa một hàm.	Hàm mũi tên là một tính năng mới được giới thiệu trong ES6 mà chúng tôi không yêu cầu từ khóa function để xác định hàm.
8.	Nó cung cấp nhiều hỗ trợ cộng đồng hơn so với ES6	Nó cung cấp ít hỗ trợ cộng đồng hơn so với ES5

Khai báo với từ khoá var

var là từ khóa lâu đời nhất để khai báo một biến trong JavaScript

Phạm vi hoạt động của từ khoá Var

Phạm vi toàn cầu hoặc phạm vi Function (hàm). Phạm vi của từ khóa var là phạm vi toàn cục hoặc phạm vi Function (hàm). Nó có nghĩa là các biến được định nghĩa bên ngoài hàm có thể được truy cập trên toàn cục và các biến được xác định bên trong một hàm cụ thể có thể được truy cập bên trong hàm. Hãy xem các ví dụ của LPTech dưới đây

Ví dụ 1 về từ khoá Var

Biến 'a' được khai báo trên toàn cục. Vì vậy, phạm vi của biến 'a' là toàn cục và nó có thể được truy cập ở mọi nơi trong chương trình.

<script>
    var a = 10
        function f(){
            console.log(a)
        }
    f();
    console.log(a);
</script>

Kết quả:

10
10

Ví dụ 2 về từ khoá Var

Biến 'a' được khai báo bên trong hàm. Nếu người dùng cố gắng truy cập nó bên ngoài function, nó sẽ hiển thị lỗi. Người dùng có thể khai báo 2 biến trùng tên bằng từ khóa var .

Ngoài ra, người dùng có thể gán lại giá trị vào biến var.

<script>
	function f() {

		// Nó có thể được truy cập bất kỳ đâu trong hàm này
		var $lptech = 10;
		console.log($lptech)
	}
	f();

	// biến $lptech không thể truy cập được bên ngoài function
	console.log($lptech);
</script>

Kết quả:

10
ReferenceError: $lptech is not defined

Ví dụ 3 về từ khoá Var

Người dùng có thể khai báo lại biến bằng var và người dùng có thể cập nhật biến var.

<script>
	var $lptech = 10

	// Người dùng có thể khai báo lại biến $lptech sử dụng var
	var $lptech = 8

	// Người dùng có thể cập nhật biến $lptech bằng var
	$lptech = 7
</script>

Kết quả

Ví dụ 4 về từ khoá Var

Nếu người dùng sử dụng biến var trước khi khai báo, biến này sẽ khởi tạo với giá trị không xác định .

<script>
	console.log($lptech); // Biến $lptech chưa được khai báo mà được gọi ra
	var $lptech = 10;
<script>

Kết quả

undefined

Khai báo với từ khoá let

Từ khóa let là phiên bản cải tiến của từ khóa var.

Phạm vi hoạt động của từ khoá Let

Phạm vi của một biến let chỉ là phạm vi khối. Nó không thể truy cập được bên ngoài khối cụ thể ({block}). Hãy xem các ví dụ của LPTech dưới đây.

Ví dụ 1 về từ khoá let

<script>
	let $lptech_one = 10;
	function f() {
		let $lptech_two = 9
		console.log($lptech_two);
		console.log($lptech_one);
	}
	f();
</script>

Kết quả

9
10

Ví dụ 2 về từ khoá let

Đoạn mã trả về lỗi vì chúng ta đang truy cập biến let bên ngoài khối hàm.

<script>
	let $lptech_one = 10;
	function f() {
		if (true) {
			let $lptech_two = 9

			// in ra 9
			console.log($lptech_two);
		}

		// Nó đưa ra lỗi vì biến $lptech_two được định nghĩa trong khối if
		console.log($lptech_two);
	}
	f()

	// In ra 10
	console.log($lptech_one)
</script>

Kết quả

9
ReferenceError: $lptech_two is not defined

Ví dụ 3 về từ khoá let

Người dùng không thể khai báo lại biến đã định nghĩa với từ khóa let nhưng có thể cập nhật lại.

<script>

	let $lptech_one = 10

	// Không được phép khai báo lại, bên trên đã khai rồi mà ??
	let $lptech_one = 10

	// Chỉ cho phép update giá trị
	$lptech_one = 10
</script>

Kết quả

Uncaught SyntaxError: Identifier '$lptech_one' has already been declared

Ví dụ 4 về từ khoá let

Người dùng có thể khai báo biến trùng tên ở các khối khác nhau bằng từ khóa let .

<script>
let $lptech_one = 10
if (true) {
	let $lptech_one=9
	console.log($lptech_one) // In ra 9
}
console.log($lptech_one) // In ra 10
</script>

Kết quả

9 
10

Ví dụ 5 về từ khoá let

Nếu người dùng sử dụng biến let trước khi khai báo, nó không khởi tạo với undefined giống như biến var và trả về một lỗi.

<script>
	console.log($lptech_one);
	let $lptech_one = 10;
        // Lỗi liền, nó sẽ báo là biến $lptech_one được gọi tra trước khi khởi tạo
</script>

Kết quả

Uncaught ReferenceError: Cannot access '$lptech_one' before initialization

Khai báo với từ khoá const

Từ khóa const có tất cả các thuộc tính giống như từ khóa let , ngoại trừ người dùng không thể cập nhật nó.

Phạm vi hoạt động của từ khoá Const

Khi người dùng khai báo một biến const , họ cần khởi tạo nó, nếu không, nó sẽ trả về một lỗi. Người dùng không thể cập nhật biến const sau khi nó được khai báo. Hãy xem các ví dụ của LPTech dưới đây

Ví dụ 1 về từ khoá const

Chúng tôi đang thay đổi giá trị của biến const để nó trả về một lỗi.

<script>
	const $lptech_one = 10; // Khai báo toàn cục trước
	function f() {
		$lptech_one = 9 // cập nhật giá trị
		console.log($lptech_one)
                // Lỗi, nó chưởi liền: Mày không thể cập nhật giá trị cho 1 biến hằn số thằng l*l
	}
	f();
</script>

Kết quả

a=9 TypeError:Assignment to constant variable.

Ví dụ 2 về từ khoá const

Người dùng không thể thay đổi thuộc tính của đối tượng const , nhưng họ có thể thay đổi giá trị thuộc tính của đối tượng const .

<script>
	const $lptech_one = {
		prop1: 10,
		prop2: 9
	}
	
	// Cho phép cập nhật giá trị bên trong thuộc tính của hằng số
	$lptech_one.prop1 = 3
        // Cho phép bạn cập nhật giá trị cho prop1 = 3, chứ không cho phép thay đổi prop1 thành prop3 hay thêm cấu trúc nha

	// Kiểu như vầy là nó không cho nè
	$lptech_one = {
		b: 10,
		prop2: 9
	}
        // Hằng số $lptech_one bị thay đổi giá trị bên trong là b, mà b làm gì được khai báo trước đâu, nên chuyện này không được nha.
</script>

Kết quả

Uncaught SyntaxError:Unexpected identifier

Một hằng số, trong toán học, là một giá trị không thay đổi. Hằng số là một giá trị cố định. Tất cả các số của chúng tôi được coi là điều khoản không đổi

NÓI TÓM LẠ NHỚ DÙM TÔI LÀ: HẰNG SỐ LÀ KHÔNG THỂ THAY ĐỔI GIÁ TRỊ.

Sự khác biệt giữa var, let và const

Lưu ý: Đôi khi, người dùng gặp sự cố khi làm việc với biến var khi họ thay đổi giá trị của nó trong khối cụ thể. Vì vậy, người dùng nên sử dụng từ khóa let và const để khai báo một biến trong JavaScript.

VAR	LET	CONST
Phạm vi của một biến var là phạm vi Function (hàm).	Phạm vi của một biến let là phạm vi khối.	Phạm vi của một biến const là phạm vi khối.
Nó có thể được cập nhật và khai báo lại.	Nó có thể được cập nhật nhưng không thể được khai báo lại.	Nó không thể được cập nhật hoặc khai báo lại.
Nó có thể được khai báo mà không cần khởi tạo.	Nó có thể được khai báo mà không cần khởi tạo.	Nó không thể được khai báo mà không có khởi tạo.
Nó có thể được truy cập mà không cần khởi tạo vì giá trị mặc định của nó là "undefined".	Nó không thể được truy cập mà không có khởi tạo, vì nó trả về một lỗi.	Nó không thể được truy cập mà không có khởi tạo, vì nó không thể được khai báo mà không có khởi tạo.

Bài viết này tôi xin dừng tại đây, nhắc lại đừng bỏ qua kiến thức cơ bản, nó sẽ làm bạn không nắm chắt và sử dụng chúng 1 cách đúng nhất.

Nếu bạn có yêu cầu hướng dẫn về chủ đề nào khác vui lòng đừng ngại gửi mail cho tôi nha: phu.lv@lptech.asia tôi sẽ dành thời gian viết bài hướng dẫn cho các bạn.

Phân biệt và cách dùng var, let, và const trong JavaScript

Kiến thức cơ bản về ES5

Kiến thức cơ bản về ES6

Sự khác biệt giữa ES5 và ES6

Khai báo với từ khoá var

Phạm vi hoạt động của từ khoá Var

Ví dụ 1 về từ khoá Var

Ví dụ 2 về từ khoá Var

Ví dụ 3 về từ khoá Var

Ví dụ 4 về từ khoá Var

Khai báo với từ khoá let

Phạm vi hoạt động của từ khoá Let

Ví dụ 1 về từ khoá let

Ví dụ 2 về từ khoá let

Ví dụ 3 về từ khoá let

Ví dụ 4 về từ khoá let

Ví dụ 5 về từ khoá let

Khai báo với từ khoá const

Phạm vi hoạt động của từ khoá Const

Ví dụ 1 về từ khoá const

Ví dụ 2 về từ khoá const

Sự khác biệt giữa var, let và const

Thông tin tác giả

LÊ VĂN PHÚ

Phân biệt và cách dùng var, let, và const trong JavaScript

Kiến thức cơ bản về ES5

Kiến thức cơ bản về ES6

Sự khác biệt giữa ES5 và ES6

Khai báo với từ khoá var

Phạm vi hoạt động của từ khoá Var

Ví dụ 1 về từ khoá Var

Ví dụ 2 về từ khoá Var

Ví dụ 3 về từ khoá Var

Ví dụ 4 về từ khoá Var

Khai báo với từ khoá let

Phạm vi hoạt động của từ khoá Let

Ví dụ 1 về từ khoá let

Ví dụ 2 về từ khoá let

Ví dụ 3 về từ khoá let

Ví dụ 4 về từ khoá let

Ví dụ 5 về từ khoá let

Khai báo với từ khoá const

Phạm vi hoạt động của từ khoá Const

Ví dụ 1 về từ khoá const

Ví dụ 2 về từ khoá const

Sự khác biệt giữa var, let và const

Thông tin tác giả

Bài cùng chuyên mục