Biến toàn cục và biến cục bộ trong Javascript

Trong bài này chúng ta sẽ tìm hiểu hai khái niệm biến toàn cục và biến cục bộ trong JS, qua đó sẽ giúp bạn hiểu được phạm vi hoạt động của một biến trong Javascript.

test php

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Biến toàn cục và biến cục bộ là những khái niệm mà bất kì một ngôn ngữ lập trình nào đều có và Javascript cũng không ngoại lệ. Nếu trong ứng dụng của bạn sử dụng trùng tên biến quá nhiều từ trong hàm cho đến ngoài hàm thì đôi khi dẫn đến những kết quả không mong muốn, và lỗi chính là lỗi kiểm soát được biến toàn cục và cục bộ.

1. Biến cục bộ trong Javascript

Một biến được gọi là cục bộ khi bạn khai báo biến nằm bên trong một hàm cụ thể nào đó, lúc này biến đó sẽ không sử dụng được ở bên ngoài hàm.

Ví dụ: Trong ví dụ này thì đoạn code alert(comment) phía dưới function add_comment() sẽ thông báo lỗi vì nó chưa được định nghĩa. Nhưng đoạn code alert(comment) nằm trong thân hàm add_comment thì lại đúng nhé.

Bài viết này được đăng tại [free tuts .net]

function add_comment()
{
    var comment = "Nội dung comment"; 
    
    // Đoạn code này đúng vì biến comment đã tồn tại
    alert(comment);
}
// Gọi hàm
add_comment();

// Đoạn code này sẽ sai vì không tồn tại biến comment
alert(comment);

2. Biến toàn cục trong Javascript

Biến toàn cục là biến mà bạn khai báo bên ngoài và không nằm bên trong một hàm cụ thể nào cả.

Quay lại ví dụ trong phần 1, thay vì khai báo biến bên trong hàm thì mình sẽ khai báo biến bên ngoài hàm thì chương trình không bị lỗi.

// Biến toàn cục
var comment = "Nội dung comment bên ngoài";

// Hàm có sử dụng biến toàn cục
function add_comment()
{
    alert(comment);
}

// Gọi hàm 
add_comment();

// In biến toàn cục
alert(comment);

3. Một số ví dụ biến toàn cục và biến cục bộ

Có rất nhiều lưu ý khi sử dụng biến toàn cục và biến cục bộ nên trong phần này chúng ta sẽ tìm hiểu thông qua các ví dụ nhé.

Nếu trong hàm có sử dụng từ khóa var và để tạo một biến và tên của biến đó đã tồn tại ở bên ngoài (toàn cục) thì lúc này bên trong hàm sẽ hiểu là đang sử dụng biến cục bộ nên không ảnh hưởng gì biến bên ngoài cả.

Ví dụ RUN

// Biến toàn cục
var comment = "Nội dung comment toàn cục";

// Hàm có sử dụng biến toàn cục
function add_comment()
{
  // Khai báo biến trùng với bên ngoài
  var comment = "Nội dung comment cục bộ";
  alert(comment);
}

// Gọi fuction comment
add_comment();

// In biến toàn cục
alert(comment);

Nếu bạn không sử dụng từ khóa var để khai báo biến trong hàm thì JS sẽ sử dụng biến toàn cục nên mọi thay đổi giá trị của biến comment đó sẽ được lưu lại.

Ví dụ RUN

// Biến toàn cục
var comment = "Nội dung comment trước khi thay đổi";

// Hàm có sử dụng biến toàn cục
function add_comment()
{
    comment = "Nội dung comment đa bị thay đổi";
    alert(comment);
}

// Gọi fuction comment
add_comment();

// In biến toàn cục
alert(comment);

4. Lời kết

Tóm lại biến toàn cục là biến được khai báo bên ngoài hàm và được sử dụng ở tất cả các vị trí, biến cục bộ là biến khai báo ở trong hàm và chỉ sử dụng được trong nội bộ của hàm đó thôi, sau khi hàm thực thi xong thì ngay lập tức nó sẽ bị xóa khỏi bộ nhớ. Và một chú ý quan trọng khác là ở phần ví dụ bạn cần hiểu được trường hợp ghi đè tên biến thông qua từ khóa var ở trong hàm nhé.

Bài trước Bài tiếp

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và proto trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

Hướng dẫn cách tạo một số ngẫu nhiên ...

Biến toàn cục và biến cục bộ trong Javascript

1. Biến cục bộ trong Javascript

2. Biến toàn cục trong Javascript

3. Một số ví dụ biến toàn cục và biến cục bộ

4. Lời kết

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và proto trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

Cách gộp hai object javascript lại với nhau

Cách lấy chiều dài của object trong Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Cách dùng nextSibling trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

Biến toàn cục và biến cục bộ trong Javascript

1. Biến cục bộ trong Javascript

2. Biến toàn cục trong Javascript

3. Một số ví dụ biến toàn cục và biến cục bộ

4. Lời kết

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và __proto__ trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

Cách gộp hai object javascript lại với nhau

Cách lấy chiều dài của object trong Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Cách dùng nextSibling trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

Giới thiệu

Thủ thuật

Link hay

Liên kết

Phân biệt prototype và proto trong JavaScript