Khai báo biến trong JavaScript: Chi tiết các cách phổ biến

Biến được sử dụng để lưu trữ dữ liệu và giá trị có thể tái sử dụng trong JavaScript. Nắm rõ về cách khai báo biến sẽ giúp bạn có đủ tự tin để thực hiện viết một đoạn mã JavaScript tuyệt vời. Vậy cách khai báo biến trong JavaScript như thế nào?

Đọc bài viết sau đây để được giải đáp chi tiết hơn về:

• Định nghĩa của khai báo biến trong JavaScript
• Các cách khai báo biến và cách hoạt động

Định nghĩa về khai báo biến trong JavaScript

Trong JavaScript, biến là một container dùng để lưu trữ các giá trị dữ liệu như số, chuỗi, boolean, đối tượng,… Việc khai báo biến là bước đầu tiên trong quá trình lập trình, nó cho phép lưu trữ tạm thời các giá trị cần thiết để thực hiện các phép tính, so sánh và điều khiển luồng của chương trình. 

Hiện tại, JavaScript cung cấp ba cách khai báo biến chính là var, let và const. Mỗi cách có những đặc điểm và phạm vi hoạt động khác nhau.

Xem thêm: JavaScript là gì? Học JavaScript cơ bản với lộ trình dễ hiểu nhất

Khai báo biến trong JavaScript bằng từ khóa var

Từ khóa var trong JavaScript được sử dụng để khai báo các biến có phạm vi hàm (function) hoặc toàn cục (global). Trước ES6, var là từ khóa duy nhất để khai báo mà không có phạm vi khối (block) như let và const. 

Hiện nay, các lập trình viên thường khuyên bạn nên sử dụng let hoặc const khi làm việc cùng JavaScript thay vì var. Bởi vì let và const cung cấp phạm vi khối (block scope) và tránh được một số lỗi phổ biến liên quan đến việc khai báo biến.

Cú pháp cơ bản của var như sau: 

var variableName = valueOfVar;

Khi bạn khai báo một biến bằng var, biến đó sẽ được “hoisted” và khởi tạo trong bộ nhớ là undefined trước khi mã được thực thi. Vì vậy, bạn có thể truy cập biến trước khi khai báo, nhưng kết quả trả về sẽ là undefined. 

Khi quá trình thực thi được bắt đầu và đến dòng nơi biến được khai báo, nó sẽ thay thế giá trị trong bộ nhớ bằng giá trị của biến. Ví dụ như: 

var strawberry;
console.log(strawberry); // undefined
strawberry = '🍓';
console.log(strawberry); // 🍓

Với ví dụ trên, bạn có thể sử dụng biến strawberry trước khi khai báo, nhưng kết quả sẽ trả về undefined. Điều này sẽ khiến chương trình chạy mà không có lỗi, tuy nhiên trong một số trường hợp có thể dẫn đến kết quả không muốn. 

Khai báo biến trong JavaScript bằng từ khóa let

Từ khóa let trong JavaScript được sử dụng để tạo các biến có phạm vi khối (block scope) mà chúng được khai báo. Sau khi đã sử dụng let để định nghĩa một biến, bạn không thể khai báo lại biến đó trong cùng một khối. Điều quan trọng là phải khai báo các biến let trước khi sử dụng chúng.

let variable_name = value;

Ví dụ như: 

let x = 5;
let y = 6;
let z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;

Kết quả hiển thị:

Ví dụ khác về phạm vi khối của let, biến num có phạm vi khối và không thể truy cập bên ngoài khối. Nếu bạn cố gắng truy cập biến bên ngoài khối, nó sẽ ném ra kết quả lỗi tham chiếu. 

{
    let num = 10;
    console.log(num)
}
console.log(num)

Kết quả hiển thị:

Khai báo biến trong JavaScript bằng từ khóa const

Từ khóa const trong JavaScript được sử dụng để định nghĩa các biến không thể thay đổi sau khi chúng được gán giá trị. Điều này sẽ ngăn chặn sự sửa đổi đối với giá trị của biến. Ngoài ra, const không cho phép khai báo lại cùng một biến trong cùng một khối và nó cung cấp phạm vi khối (block scope), được giới thiệu trong ES2015 để tạo các biến không thể thay đổi. 

Cú pháp cơ bản của từ khóa const như sau: 

const const_name;
const x;

const fruit = “apple”;

const flower = “rose”;

Ngoài ra, không thể gán lại giá trị cho biến được khai báo bằng const. Nếu bạn cố tình gán lại giá trị, chúng sẽ gây ra lỗi “Assignment to constant variable”

const x = 12;
x = 13;
x += 1;

Kết quả hiển thị khi gán lại giá trị const:

Một ví dụ mô tả const chứa trong block scope như sau:

const x = 22;
{
    const x = 90;
    console.log(x);
    {
        const x = 77;
        console.log(x);
    }
    {
        const x = 45;
        console.log(x);
    }
}
console.log(x);

Kết quả hiển thị:

Khai báo lại biến trong JavaScript bằng var

Bạn có thể khai báo lại một biến được khai báo bằng var trong cùng phạm vi. Biến sẽ bị ảnh hưởng trong global scope hoặc functional scope nếu nó được khai báo trong một hàm.

Vì vậy, ngay cả khi bạn khai báo lại một biến trong phạm vi nhỏ hơn, biến sẽ thay đổi trong tất cả các phạm vi mà biến đó khả dụng.

// Global Scope
var pepper = "🌶️";

console.log(pepper); // 🌶️

// Block scope
{
  var pepper = "🌽";

  console.log(pepper); // 🌽
}

console.log(pepper); // 🌽

Ở ví dụ trên, bạn đã khai báo một biến là pepper trong block scope và gán cho nó một giá trị khác. Điều này sẽ ảnh hưởng đến biến trong global scope và bạn mất quyền truy cập vào biến trước đó.

Để tránh tình trạng này, bạn có thể thực hiện khai báo lại trong một hàm, biến bên ngoài hàm vẫn giữ nguyên và biến bên trong sẽ không thể ảnh hưởng đến nó. Với ví dụ trên, bạn có thể khai báo một biến mới là melon bên trong hàm, như vậy biến melon được khai báo trong global scope vẫn sẽ được giữ nguyên.

// Global scope
var melon = "🍉";

// Functional scope
function redeclareMelon() {
  var melon = "🍈";

  console.log(melon); // 🍈
}

console.log(melon); // 🍉

Khai báo lại biến trong JavaScript bằng let và const

Bạn không thể khai báo lại các biến được khai báo bằng let hoặc const trong cùng phạm vi. Nếu bạn cố gắng thực hiện quy trình, chương trình sẽ trả về kết quả là SyntaxError. 

Bạn có thể thực hiện khai báo lại các biến bằng let và const trong phạm vi con. Bởi vì các biến được khai báo bằng let và const là block scope và không ảnh hưởng đến phạm vi lớn hơn. 

// Global scope
const banana = "🍌";

// Block scope
{
  const banana = "🍒";

  console.log(banana); // 🍒
}

console.log(banana); // 🍌

Chẳng hạn với ví dụ trên, bạn khai báo hai biến banana với biến đầu tiên nằm trong global scope và biến thứ hai trong block scope. Biến trong global scope vẫn giữ nguyên và biến trong block scope đã được thay đổi là một biến mới độc lập.

Cách này có một nhược điểm là bạn sẽ không được chỉnh sửa biến banana trong global scope và block scope. 

Câu hỏi thường gặp về khai báo biến trong JavaScript

Var, let, const có gì khác nhau?

Nhìn chung, cả ba từ khóa đều được sử dụng để khai báo biến trong JavaScript. Tuy nhiên, chúng vẫn có cách hoạt động riêng biệt với nhau, cụ thể như sau:

Khi nào cần sử dụng var, let hoặc const?

Tùy vào mỗi trường hợp và mục đích sử dụng mà bạn có thể lựa chọn khai báo biến bằng var, let hoặc const. Vậy khi nào dùng var, let, const để khai báo biến?

• Bạn lựa chọn khai báo biến bằng const nếu giá trị không thay đổi, hoặc kiểu của biến không thay đổi như khi làm việc với mảng (array) và đối tượng (object).
• Sử dụng let nếu giá trị có thể thay đổi hoặc khi không dùng được const.
• Var vẫn được hỗ trợ cho các trình duyệt hiện đại. Tuy nhiên do các vấn đề liên quan đến phạm vi và hosting nên các lập trình viên thường ưu tiên sử dụng let hoặc const để thay thế cho var. 

Block, Global và Functional scope của biến có gì khác nhau?

Scope (phạm vi) là bối cảnh thực thi hiện tại trong đó các giá trị hoặc biểu thức “có thể nhìn thấy” hoặc có thể được tham chiếu. 

Về biến, phạm vi là nơi một số biến nhất định có sẵn, có thể truy cập các biến đã được khai báo trong phạm vi lớn hoặc nhỏ hơn. Sự khác nhau giữa ba phạm vi này như sau:

Tổng kết về cách khai báo biến trong JavaScript

Bài viết đã giới thiệu chi tiết về cách khai báo biến trong JavaScript bằng var, let và const. Tùy theo từng trường hợp và mục đích mà bạn có thể lựa chọn từ khóa khai báo phù hợp. Bên cạnh kiến thức nền tảng, bạn có thể thực hành thông qua các dự án thực tế để nâng cấp kỹ năng của bản thân cũng như cơ hội làm việc hấp dẫn nhé!

Bạn có thể kết hợp theo dõi những bài viết cơ bản về các phương thức trong JavaScript sau:

• Hướng dẫn sử dụng các lệnh if trong JavaScript chi tiết
• Return trong JavaScript: Hướng dẫn sử dụng chi tiết
• Vòng lặp trong JavaScript: Chi tiết 8 phương thức lặp kèm ví dụ
• forEach JavaScript: Một số thao tác cơ bản và ví dụ chi tiết
• Array JavaScript: Tổng hợp 12 phương thức quan trọng của array

Xem thêm: JavaScript Developer là gì? Các hướng phát triển của JavaScript Developer