Biến trong JavaScript

Ngày đăng: 22/09/2020   -    Cập nhật: 22/09/2020


Xin chào! Hôm nay mình sẽ hướng dẫn bạn tìm hiểu về biến trong JavaScript. Trong bài này, bạn sẽ học được cách khai báo biếnsử dụng biến trong lập trình JavaScript.

Biến trong JavaScript

1. Khai báo biến với từ khóa var và let


Biến dùng để lưu trữ giá trị các dữ liệu, hay các đối tượng. Giá trị của biến tùy bạn thay đổi trong quá trình chương trình làm việc để đáp ứng yêu cầu riêng của bạn.

Trong JavaScript có hai kiểu khai báo biến là letvar.


1.1. Khai báo biến với từ khóa var


Cú pháp khai báo biến trong JavaScript bằng từ khóa var:


var ten_Bien_Aten_Bien_B, ...;
 

Trong đó:

  • var: từ khóa khai báo biến.
  • ten_Bien_A, ten_Bien_B, … là danh sách tên biến. Bạn cũng có thể chỉ khai báo 1 biến.

1.2. Khai báo biến với từ khóa let


Cú pháp khai báo biến trong JavaScript bằng từ khóa let:


let ten_Bien_Aten_Bien_B, ...;
 


Trong đó:

  • let: từ khóa khai báo biến.
  • ten_Bien_A, ten_Bien_B, … là danh sách tên biến. Bạn cũng có thể chỉ khai báo 1 biến.

1.3. Sự khác nhau của từ khóa let và var


Đối với biến khai báo bằng từ khóa var:



// Khi khai báo bằng var thì biến đó có thể được
// khai báo lại sau khi đã được khai báo trước đó.
var x = 5;
// ...
var x = 10// Khai báo lại sẽ không có vấn đề gì
 

Đối với biến khai báo bằng từ khóa let:


// Khi khai báo bằng let thì biến đó không được khai báo nữa.
let x = 5;
//….
let x = 10// Khai báo lại sẽ báo lỗi
 

Tóm lại , khai báo bằng let và var khác nhau:

  • var cho phép khai báo lại một biến, let thì biến chỉ được khai báo 1 lần, nếu khai báo lại sẽ bị lỗi.
  • Biến được khai báo bằng let thì phạm vi hiệu lực trong khối lệnh { } mà nó khai báo, var thì hiệu lực toàn cục.

> Lưu ý: JavaScript hỗ trợ cả gán giá trị cho biến khi khai báo và gán giá trị sau khi khai báo.


// Vừa khai báo vừa gán giá trị
let x = 10;

// Khai báo biến
let y;
// Gán giá trị cho biến
y = 10;
 

1.4. Phạm vi của biến là gì?


Trong lập trình nói chung và lập trình JavaScript nói riêng, bạn sẽ thường nghe thấy khái niệm "Cục bộ" và "Toàn cục".

Tên như ý nghĩa của nó, cục bộ có nghĩa là một phạm vi nhỏ còn toàn cục thì có nghĩa là ảnh hưởng đến toàn bộ.

Vì thế...


  • Biến cục bộ (local variable): Biến này chỉ có hiệu lực trong hàm (khối lệnh) nó khai báo (sang bài hàm mình sẽ nói rõ hơn), khi ra khỏi hàm nó sẽ hết hiệu lực.
  • Biến toàn cục (global variable): Biến có hiệu lực toàn bộ code, có thể truy cập ở bất kỳ đâu. Biến này không khai báo trong hàm mà khai báo bên ngoài.

2. Gán giá trị cho biến


Trong JavaScript, toán tử gán là dấu bằng = giống như trong toán học.

Ví dụ x = y là gán giá trị y cho biến x.

Khi khai báo biến bạn có thể không cần thiết phải gán giá trị cho nó, vì bạn sẽ gán sau này trong các vị trí code khác, ví dụ biến đó chờ dữ liệu người dùng nhập vào.

Khi biến khai báo mà không gán giá trị thì nó có giá trị mặc định là undefined.

Ví dụ gán giá trị cho biến:



// Ví dụ gán giá trị cho biến
let thongBao = "Học lập trình JavaScript";

let tuoi = 18;

let diem = x;

x = 20;
 

> Tìm hiểu thêm về các loại toán tử trong JavaScript

3. Cách sử dụng biến trong JavaScript


Khi chúng ta đã có được biến, chúng ta có thể sử dụng chúng ở rất nhiều nơi.

Ví dụ sau gán giá trị vào biến, sau đó in giá trị biến ra trình duyệt:



<script>
    let x = 5;
    document.write(x);
</script>
 


Trong đó:

  • document.write(): Hàm này sử dụng để in giá trị ra trình duyệt.
  • Kết quả in ra số 5 ở trình duyệt.
  • Bạn hãy chú ý giữa các câu lệnh sẽ phân cách nhau bằng ký hiệu ; (dấu chấm phẩy). Trong JavaScript không bắt buộc phải có dấu chấm phảy, nhưng ĐỪNG BAO GIỜ QUÊN CHẤM PHẢY.

4. Cách đặt tên biến trong JavaScript


Đặt tên biến là một việc cực kỳ quan trọng trong lập trình, đặt tên biến tốt sẽ giúp chương trình của bạn không bị lỗi, khả năng đọc tốt, dễ dàng duy trì và phát triển sau này.

Quy tắc, cách đặt tên biến trong JS:


  • Trong JavaScript phân biệt chữ thường và chữ hoa. Nên biến x sẽ khác biến X.
  • Bắt đầu bằng một chữ cái hoặc _ hoặc $. Tiếp theo là chuỗi các ký tự chữ, số, gạch dưới, dollar
  • Không được bắt đầu bằng số
  • Không được chứa các ký hiệu toán học, logic ví dụ *, +,…
  • Không được chứa khoảng trắng

Ngoài ra khi đặt tên biến bạn không được sử dụng các từ khóa sau (Nó đã được JavaScript Engine chiếm rồi, cố tình khai báo sẽ dẫn đến lỗi)

Danh sách các từ khóa của JavaScript

Những từ khóa phía trên được JavaScript sử dụng cho mục đích khác.

> Lưu ý một lần nữa: Cách đặt tên rất quan trọng trong lập trình, đặc biệt quan trọng trong quá trình maintain sau này. Vì thế hãy suy nghĩ thật kỹ trong vấn đề đặt tên để sao cho dễ đọc, dễ hiểu, logic.


5. Hằng số trong JavaScript


Hằng số được khai báo phải khởi tạo ngay với từ khóa const, sau khi khai báo và gán thì giá trị sẽ không được thay đổi nữa.

Từ khóa const là trường hợp đặc biệt của biến.

Cú pháp:



const tenHangSo = giaTriHangSo;
 


Trong đó:

  • const: là từ khóa khai báo hằng số
  • tenHangSo: là tên của hằng số
  • giaTriHangSo: là giá trị của hằng số

Ví dụ:


const PI = 3.1415;
const BRAND = "NIIT - ICT HÀ NỘI";
 

> Mẹo: Thông thường, hằng số sẽ được đặt tên bằng chữ viết HOA để phân biệt với các biến khác (Không bắt buộc)

Tổng kết


Như vậy, qua bài học này mình đã giới thiệu các bạn về biến trong JavaScript, cách khai báo biến, gán giá trị cho biến cũng như cách đặt tên biến đúng quy tắc...

Bạn hãy xem lại các ví dụ và thực hành lại nhé. Hẹn gặp lại các bạn ở bài học tiếp theo.

PS: HỌC LẬP TRÌNH là một quá trình rèn luyện gian khổ, thành công hay không hầu hết phụ thuộc vào việc luyện tập. Càng luyện tập thật nhiều càng có tỷ lệ thành công cao. Kể cả những thứ khó hiểu, cứ làm đi làm lại nhiều sẽ hiểu (Cho dù làm theo mẫu. Hầu hết đều thế mà =)) )

Bình luận Facebook
Đăng ký tư vấn
Nhân viên gọi điện tư vấn miễn phí sau khi đăng ký
Được cập nhật các ưu đãi sớm nhất
Hotline: 0383180086
Tên không được để trống
Số điện thoại không được để trống
Email không được để trống
Hãy đăng ký để nhận những thông tin mới nhất về học bổng mới nhất tại NIIT - ICT Hà Nội
top
Đóng lại Đăng ký học tại NIIT - ICT Hà Nội
6260+ học viên đã theo học tại NIIT - ICT Hà Nội và có việc làm tốt trong ngành lập trình. Nắm lấy cơ hội ngay hôm nay!
Chọn khóa học
  • KHÓA HỌC LẬP TRÌNH FRONT END VỚI REACT.JS
  • KHÓA HỌC LẬP TRÌNH PHP WEB
  • Khóa học PHP Full stack [2023] cho người mới bắt đầu
  • Khóa học BIG DATA với Hadoop và Spark
  • Khóa học Lập trình Android tại Hà Nội
  • [Tuyển sinh 2023] Lập trình viên Quốc tế DigiNxt
  • Khóa học Tiền lương & Phúc lợi (C&B Excel) tại Hà Nội
  • LẬP TRÌNH GAME
    • Khóa học Lập trình Game Unity
  • LẬP TRÌNH WEB FRONT END
    • KHÓA HỌC PYTHON HƯỚNG ĐỐI TƯỢNG
    • KHÓA HỌC ANGULAR & TYPESCRIPT (FRONT END)
  • LẬP TRÌNH WEB BACK END
    • LẬP TRÌNH JAVA WEB VỚI FRAME WORK
    • Lập trình Web với Django
    • Lập trình PHP với Laravel Framework
  • CHƯƠNG TRÌNH ĐÀO TẠO ỨNG DỤNG CÔNG NGHỆ
    • Khóa học Tiền lương & Phúc lợi (C&B Excel) tại TP HCM
  • LẬP TRÌNH WEB FULL STACK
    • Khóa học Java Full stack (IJFD)
  • LẬP TRÌNH MOBILE
    • FRONT-END VỚI REACTJS VÀ REACT NATIVE
    • Lập trình Android Nâng cao
  • ĐÀO TẠO CHO DOANH NGHIỆP
    • KHÓA HỌC BUSINESS ANALYSIC TỪ CƠ BẢN ĐẾN NÂNG CAO 2023
    • Khóa học Magento: Làm chủ CMS TMĐT lớn nhất
    • Khóa học IOT: Xây dựng Sản phẩm IOT với Raspberry Pi
    • Khóa học Automation Testing Chuyên nghiệp
  • KHÓA HỌC DỰ ÁN
    • Học sử dụng bộ Office: Word, Excel, Power Point, Mail chuyên nghiệp
  • KHÓA HỌC KHÁC
    • VBA Excel Toàn Tập (Cơ Bản - Nâng Cao)
    • VBA Excel Nâng cao
    • Khóa học JMeter: Performance Testing
    • Khóa học Tester đạt chuẩn Quốc tế ISTQB Foundation Level
    • Khoá Học Tester đạt chuẩn quốc tế ISTQB Advanced Level
Bạn chưa chọn khóa học cần đăng ký
Tên không được để trống
Số điện thoại không được để trống
Email không được để trống
Đăng ký học thành công!
Cảm ơn bạn đã đăng ký học tại NIIT - ICT HÀ NỘI!