Phạm vi hoạt động của biến trong Javascript

Ở bài Tìm hiểu kiểu dữ liệu trong Javascript chúng ta đã được biết qua cách để khai báo và sử dụng Javascript rồi. Trong đó, chúng ta cũng tìm hiểu sơ lược về các kiểu dữ liệu phổ biến bên trong Javascript cũng như đại đa số các ngôn ngữ lập trình khác đều có. Thì trong bài học này, chúng ta sẽ tìm hiểu về phạm vi hoạt động của biến.

Khi định nghĩa một biến trong Javascript, chúng ta cần phải quan tâm đến phạm vi hoạt động của biến. Bởi vì nếu định nghĩa trùng, có khả năng ứng dụng của chúng ta có thể chạy sai vì phạm vi hoạt động của nó đến toàn ứng dụng. Và khi đó, điều mà các bạn cần quan tâm nhất đó chính là khi khởi tao biến có từ khóa “var” hay không có từ khóa “var” sẽ như thế nào trong Javascript.

Lưu ý: Nếu bạn chưa có khái niệm về Hàm hay Function trong các ngôn ngữ lập trình, có thể tạm thời bỏ qua bài viết này để xem tới Bài 5: Hàm trong Javascript để hiểu về Hàm hơn.

Định nghĩa biến có từ khóa “var”

1. Định nghĩa biến “a” và dùng hàm “func()” để trả về giá trị của biến “a”:

(Vui lòng bật F12 trên Chrome/Firefox và chuyển sang Tab Console để thấy kết quả)

<script type="text/javascript">
	var a = 'Hello World!';
	function func() {
		return a;
	}
	console.log(func());
</script>

Kết quả:

Hello World!

• Khi định nghĩa biến “a” bằng từ khóa “var” và nó được định nghĩa bên ngoài hàm “func()” thì lúc đó biến “a” sẽ được xem là biến toàn cục của hàm “func()”. Vì thế để truy cập vào biến “a”, chúng ta chỉ đơn giản gọi tên biến “a” bên trong hàm thì tự động nó sẽ hiểu đó chính là biến “a” mà chúng ta đã định nghĩa bên ngoài hàm.

2. Định nghĩa biến “a” bằng từ khóa “var” và can thiệp biến “a” bên trong “func()”:

<script type="text/javascript">
	var a = 'Hello World!';	
	function func() {
		a = 'Good Bye!';
		return a;
	}
	console.log(func());
	console.log(a);
</script>

Kết quả:

Good Bye!
Good Bye!

• Ví dụ trên cho chúng ta thấy việc chúng ta sử dụng lại biến “a” không có từ khóa “var” bên trong hàm “func()” có thể giúp chúng ta can thiệp vào giá trị của biến “a” đã được định nghĩa bên ngoài hàm “func()” mà không gặp trở ngại nào. Và kết quả trả về là 2 chuỗi “Good Bye!” vì biến “a” bên ngoài hàm “func()” cũng đã bị thay đổi.

3. Định nghĩa biến “a” bằng từ khóa “var” và trong hàm “func()” cũng dùng từ khóa “var”:

<script type="text/javascript">
        var a = 'Hello World!';
	function func() {
		var a = 'Good Bye!';
		return a;
	}
	console.log(func());
	console.log(a);
</script>

Kết quả:

Good Bye!
Hello World!

• Ví dụ này cho chúng ta thấy rất rõ về phạm vi sử dụng biến khi có từ khóa “var” sẽ hoạt động như thế nào. Các bạn có thể thấy rằng biến “a” được định nghĩa bên ngoài hàm “func()” hoàn toàn không bị ảnh hưởng gì khi nó được định nghĩa lại với từ khóa “var” bên trong hàm “func()”.
• Kết quả cũng trả về cho chúng ta 2 chuỗi khác biệt, khi chúng ta gọi hàm “func()” đầu tiên và nó đã định nghĩa lại biến “a” bên trong nó, sau đó chúng ta kiểm tra lại giá trị của biến “a” được định nghĩa bên ngoài hàm “func()” có thay đổi hay không thì kết quả cho ta thấy các biến “a” hoàn toàn không bị ảnh hưởng lẫn nhau.

Định nghĩa biến không dùng từ khóa “var”

1. Định nghĩa biến “a” và dùng hàm “func()” để trả về giá trị của biến “a”:

<script type="text/javascript">
	a = 'Hello World!';
	function func() {
		return a;
	}
	console.log(func());
</script>

Kết quả:

Hello World!

• Như vậy, cách định nghĩa biến “a” không dùng từ khóa “var” vẫn không khác với việc chúng ta sử dụng từ khóa “var” trong trường hợp này.

2. Định nghĩa biến “a” không dùng từ khóa “var” và can thiệp biến “a” bên trong hàm “func()”:

<script type="text/javascript">
	a = 'Hello World!';
	function func() {
		a = 'Good Bye!';
		return a;
	}
	console.log(func());
	console.log(a);
</script>

Kết quả:

Good Bye!
Good Bye!

• Cũng như ví dụ trước đó khi không dùng từ khóa “var” và cả khi dùng từ khóa “var” thì vẫn không có sự khác biệt khi chúng ta can thiệp vào giá trị của biến “a” bằng cách gán giá trị cho nó bên trong hàm “func()” mà không cần định nghĩa lại biến “a” bằng từ khóa “var”. Thì nó vẫn sẽ hiểu đây là biến “a” đã được định nghĩa bên ngoài hàm “func()”.

3. Định nghĩa biến “a” không dùng từ khóa “var” và can thiệp biến “a” bên trong hàm “func()” nhưng dùng từ khóa “var” để định nghĩa lại biến “a”:

<script type="text/javascript">
        a = 'Hello World!';
        function func() {
             var a = 'Good Bye!';
	     return a;
	}
	console.log(func());
	console.log(a);
</script>

Kết quả:

Good Bye!
Hello World!

• Như vậy, ví dụ này cho ta thấy rằng việc sử dụng từ khóa “var” bên trong hàm “func()” khiến biến “a” được định nghĩa không dùng từ khóa “var” bên ngoài hàm “func()” hoàn toàn bị bỏ qua và biến “a” trong hàm “func()” chỉ có hiệu lực hoạt động trong phạm vi hàm “func()” mà thôi. Và trong ví dụ này cũng không hoàn toàn khác với cách dùng từ khóa “var”.

Tuy nhiên, ví dụ cuối cùng sau đây sẽ khiến bạn không ít bối rối khi nhìn qua:

1. Có từ khóa “var”:

<script type="text/javascript">
	function func() {
		var a = 'Hello World!';
		return a;
	}
	console.log(func());
	console.log(a);
</script>

Kết quả:

Hello World!
Uncaught ReferenceError: a is not defined

• Như chúng ta thấy, thì hàm “func()” chạy hoàn toàn bình thường. Tuy nhiên, khi chúng ta truy cập biến “a” bên trong hàm “func()” bên ngoài hàm “func()” thì chúng ta đã gặp lỗi chưa định nghĩa biến “a” này. Nhưng chúng ta hãy khoan quan tâm tìm hiểu đến vấn đề vì sao chúng ta gặp lỗi mà hãy xem tiếp ví dụ sau đây.

2. Không có từ khóa “var”:

<script type="text/javascript">
	function func() {
		a = 'Hello World!';
		return a;
	}
	console.log(func());
	console.log(a);
</script>

Kết quả:

Hello World!
Hello World!

• Thật bất ngờ! Biến “a” của chúng ta đã được hiểu là biến đã được định nghĩa. Trong khi đó, biến “a” chỉ được định nghĩa khi nó trong hàm “func()” mà thôi. Và khi đó, khi hàm “func()” được gọi trước khi chúng ta dùng “console.log(a)” để kiểm tra biến “a” thì nó cũng ngầm định nghĩa luôn biến “a” như biến toàn cục chứ không còn nằm trong phạm vi của hàm “func()” nữa.

• Sau các ví dụ về cách định nghĩa biến có dùng từ khóa “var” và không dùng từ khóa “var” thì các bạn đã ít nhiều đã thấy được sự nguy hiểm khi không dùng từ khóa “var” chưa nào? Nó khiến chúng ta không thể kiểm soát được biến đó sẽ chạy ở phạm vi nào. Rất dễ gây xáo trộn dữ liệu và lỗi ứng dụng.

Tôi sẽ note lại cho các bạn các ý chính sau đây:

1. Định nghĩa biến với từ khóa “var” trong phạm vi hàm nào, thì biến đó sẽ có phạm vi sử dụng chỉ trong hàm đó hay còn gọi là biến cục bộ.
2. Khi không dùng từ khóa “var” để định nghĩa biến, thì biến đó sẽ được xem là biến toàn cục.
3. Khi sử dụng lại biến đã được định nghĩa với từ khóa “var” hay không từ khóa “var”. Tuyệt đối chỉ cần dùng lại tên biến đã định nghĩa trước đó và không được dùng lại từ khóa “var” để gọi lại biến, vì như thế sẽ vô tình khiến biến đó trở thành biến cục bộ hoặc bị ghi đè.
4. Khi viết javascript, vui lòng tắt Cache của trình duyệt để cho kết quả chính xác nhất. Vì nếu trình duyệt cache lại dữ liệu cũ. Nhiều khi các bạn sẽ sử dụng các biến không được định nghĩa nhưng vô tình do lần thử trước đó đã được lưu lại, như thế bạn sẽ không thể nhận ra được là cách viết mình có gặp lỗi hay không.

Ở bài học sau, chúng ta sẽ cùng tìm hiểu về Toán tử trong Javascript là kiến thức cần phải có của bất cứ ngôn ngữ lập trình nào.

The post Bài 2: Phạm vi hoạt động của biến trong Javascript appeared first on Thien An Blog.

• JavaScript, theo phiên bản hiện hành, là một ngôn ngữ lập trình kịch bản dựa trên đối tượng được phát triển từ các ý niệm nguyên mẫu. Ngôn ngữ này được dùng rộng rãi cho các trang web, nhưng cũng được dùng để tạo khả năng viết script sử dụng các đối tượng nằm sẵn trong các ứng dụng. Nó vốn được phát triển bởi Brendan Eich tại Hãng truyền thông Netscape với cái tên đầu tiên Mocha, rồi sau đó đổi tên thành LiveScript, và cuối cùng thành JavaScript. Giống Java, JavaScript có cú pháp tương tự C, nhưng nó gần với Self hơn Java. .js là phần mở rộng thường được dùng cho tập tin mã nguồn JavaScript.

• Phiên bản mới nhất của JavaScript là phiên bản 1.5, tương ứng với ECMA-262 bản 3. ECMAScript là phiên bản chuẩn hóa của JavaScript. Trình duyệt Mozilla phiên bản 1.8 beta 1 có hỗ trợ không đầy đủ cho E4X – phần mở rộng cho JavaScript hỗ trợ làm việc với XML, được chuẩn hóa trong ECMA-357.

(Theo Wikipedia)

Cách khai báo Javascript

Javascript có thể thực thi thông qua cách viết sau trong HTML:

<script type=”text/javascript”>
	//Đoạn code cần thực thi
	alert(“Hello World!”);
</script>

Đoạn code trên sẽ hiển thị thông báo với dòng chữ “Hello World!” đã được định nghĩa.

Ngoài ra, Javascript còn được thực thi những dòng lệnh thông qua cách triệu gọi file Javascript được viết trước đó và lưu vào một file riêng với định dạng “.js”. Và cách gọi file Javascript sẽ được viết như sau:

<script type="text/javascript" src="http://www.TenWebsite.com/ThuMucChuaFile/TenFile.js"></script>

Câu hỏi: Vậy khi nào thì ta sử dụng cách viết trực tiếp trong HTML, khi nào thì ta nên viết trong file?

Trả lời: Khi cần thực hiện những công việc có quy mô và thời gian thực hiện ngắn thì chúng ta có thể viết trực tiếp trong HTML, nhưng ngược lại thì ta nên viết trong file và lưu lại như vậy sẽ tối ưu hơn.

Biến

Biến được dùng để lưu lại dữ liệu vào bộ nhớ nhằm xử lý một tác vụ nào đó. Và trong Javascript, biến có thể chứa nhiều kiểu dữ liệu khác nhau.

Cú pháp:

(Vui lòng bật F12 trên Chrome/Firefox và chuyển sang Tab Console để thấy kết quả)

<script type="text/javascript">
	var a = 'Hello World!';
	console.log(a);
</script>

Kết quả:

Hello World!

Định nghĩa một biến bằng từ khoá “var” và “tênBiến” và sau đó chúng ta có phép gán là “=” để gán giá trị cho biến vừa đặt.

• Lưu ý thứ 1: javascript cho phép đặt tên biến không cần từ khoá “var”. Tuy nhiên, phạm vi hoạt động của tên biến sẽ không giống nhau.
• Lưu ý thứ 2: “console.log()” được sử dụng trong các trình duyệt hiện đại sau này (Chrome, Firefox, Opera). Và được xuất ra trong Console chứ không phải trên màn hình trình duyệt.

Kiểu dữ liệu

Kiểu dữ liệu trong Javascript rất đa dạng, vì thế nó cũng ít nhiều gây khó khăn với những người mới khi bước chân sâu vào Javascript.

Kiểu Số:

<script type="text/javascript">
	var a = 5 + 10;
	console.log(a);
</script>

Kết quả:

15

Kiểu chuỗi:

<script type="text/javascript">
	var a = "Hello World!";
	console.log(a);
</script>

Kết quả:

Hello World!

Kiểu Mảng:

<script type="text/javascript">
	var a = [5, "Hello World!", 10];
	console.log('a[0]: ' + a[0]);
	console.log('a[1]: ' + a[1]);
	console.log('a[2]: ' + a[2]);
</script>

Kết quả:

a[0]: 5
a[1]: Hello World!
a[2]: 10

Kiểu đối tượng:

<script type="text/javascript">
	var giay = {
		color: 'red',
		size: 38,
		quantity: 2
	};
	console.log('Color: ' + giay.color);
	console.log('Size: ' + giay.size);
	console.log('Quantity: ' + giay.quantity);
</script>

Kết quả:

Color: red
Size: 38
Quantity: 2

Sau khi xem qua các kiểu dữ liệu cơ bản, chắc hẳn cũng khiến các bạn đôi phần thích thú về cách sử dụng giá trị bên trong Javascript rồi đúng không nào? Khá giống với cách sử dụng của PHP khi không cần phải định nghĩa chính xác kiểu biến được sử dụng (Integer, Float, Double…) như thế nào. Thay vào đó, chúng ta hoàn toàn có thể gán cho nó bất kể giá trị nào, kể cả một array, object hay thậm chí là function (Vấn đề này sẽ nói ở các bài học sau).

Trong bài sau, chúng ta sẽ đọc tiếp tới bài Phạm vi hoạt động của biến để có thể hiểu rõ hơn về cách sử dụng biến trong Javascript.

The post Bài 1: Tìm hiểu kiểu dữ liệu trong Javascript appeared first on Thien An Blog.