Phân biệt let, var, const và xử lý mảng trong Javascript

Lê Hữu Tuấn

• 5 min read
Phân biệt let, var, const và xử lý mảng trong Javascript

1. Phân biệt biến let, var và const trong javascript

  • 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 và điểm khác nhau giữa chúng
  • Biến var
    • Với từ khóa var chúng ta có thể khai báo các kiểu biến như number, string, boolean,... Trừ trường hợp biến được khai báo bên trong một function(khi đó biến var sẽ có scope là function/locally scoped), biến var sẽ có scope là globally scoped. Đặc biệt, biến var còn có thêm tính năng hoisting: nghĩa là dù khai báo ở đâu thì biến đều sẽ được đem lên đầu scope trước khi code được thực hiện
    • ví dụ:
   console.log (greeting); 
   var greeting = "say hello";

Sẽ được biên dịch là:

var greeting;
console.log(greeting); // greeting is undefined
greeting = "say hello";

Nhưng có một vấn đề với var. Giả sử có ví dụ

   var greeting = "hey hi";
   var times = 4;
   if (times > 3) {
   var greeting = "say Hello instead"; 
    }
   console.log(greeting); //"say Hello instead"

Vì thỏa mã điều kiện if nên greeting khi này sẽ có giá trị là "say Hello instead" và sẽ vẫn giữ nguyên giá trị sau khi thoát khỏi block

  • Biến let
    • Một trong những nguyên nhân khiến let có thể thay thế var để xử lý vấ đề nêu trên là vì biến let được khai báo sẽ có scope là block scoped chứ không phải globally hay locally scoped.
    let greeting = "say Hi";
    let times = 4;
    if (times > 3) {
        let hello = "say Hello instead";
        console.log(hello); // "say Hello instead"
    }
    console.log(hello); // hello is not defined
  • Chúng ta có thể thấy la đối với biến scope là block scoped nếu ra khỏi scope được khai báo thì sẽ không thể sử dụng được nữa.
  • let cho phép chúng ta cập nhật giá trị của biến chứ không cho phép chúng ta tái khai báo lại biến đó.
      let greeting = "say Hi";
      console.log(greeting); //"say Hi"
      greeting = "say Hello instead";
      console.log(greeting); //"say Hello instead"
      -----------------------------------------------------
      let greeting = "say Hi";
      let greeting = "say Hello instead"; // error: Identifier 'greeting' has already been declared
  • Tuy nhiên, đối với các block khác nhau thì việc tái khai báo biến sẽ không sinh ra lỗi vì đối với từng scope, mỗi biến sẽ được xem xét là biến riêng khác biệt.
        let greeting = "say Hi";
        if (true) {
            let greeting = "say Hello instead";
            console.log(greeting); // "say Hello instead"
        }
        console.log(greeting); // "say Hi"
  • Giống với var, let cũng có tính hoisting tuy nhiên lại khác nhau ở chỗ thay vì var được khởi tạo với giá trị là undefined thì let sẽ không có bất kỳ giá trị khởi tạo nào. Điều này dẫn đến việc nếu chúng ta sử dụng biến let trước khi khai báo thì sẽ gặp lỗi reference error
  • Biến const
    • Tương tự với let thì const cũng có scope là block scoped và hoisting. Trong biến const nếu trường hợp kiểu của biến là primitive(bao gồm string, number, boolean, null và undefined) thì chúng ta sẽ không thể tái khai báo hay cập nhật giá trị mới để thay thế cho giá trị trước đó của biến.
           const greeting = "say Hi";
           greeting = "say Hello instead"; // error : Assignment to constant variable. 
        ------------------------------------------------
            const greeting = "say Hi";
            const greeting = "say Hello instead"; // error : Identifier 'greeting' has already been declared
  • Đối với trường hợp kiểu biến là reference(bao gồm object, array và function) thì tuy không thể tái khai báo hay cập nhật giá trị của biến nhưng chúng ta vẫn có thể cập nhật giá trị cho thuộc tính của biến đó.
              const greeting = {
                message : "Hello",
                number : "five"
               }
                greeting.message = "say Hello instead";
                console.log(greeting); // {message:"say Hello instead",number:"five"}

2. Xử lý mảng trong javascript

  • Khai báo mảng
    • Ở trong javascript chúng ta có thể khai báo mảng bằng 2 cách sau đây
      Khai báo bằng dấu []
      cú pháp:
    var arr = [value1, value2, ..., valuen];

Trong đó:
arr là tên mảng.
value1,...valuen là các giá trị của mảng mà các bạn muốn tạo

Khai báo bằng new Array()
cú pháp:

   var arr = new Array(value1, value2, ..., valuen);

Trong đó:
arr là tên biến mảng
value1,...valuen là các giá trị của mảng mà các bạn muốn tạo

  • Truy xuất mảng
    Sau khi đã tạo được mảng rồi thì chúng ta càn phải truy xuất thông tin của mảng. Để có thể lấy ra giá trị của một thành phần trong mảng thì chúng ta sử dụng cú pháp sau:
   arr[index];

Trong đó: arr là tên biến mảng, index là vị trí cảu mảng(bắt đầu từ 0)

  • Các hàm xử lý mảng
  • Sau đây mình xin tổng hợp lại một vài hàm xử lý mảng mà javascript đã tích hợp sẵn cho chúng ta
    Length
    cú pháp:
    arr.length;

Hàm join()
cú pháp:

      arr.join(string);

Hàm push()
cú pháp:

    var arr = new Array(1, 2, 4, 5, 9, 6);
    document.write(arr.join() + '<br>');
    //thêm 7 vào mảng
    arr.push(7);
    document.write(arr.join() + '<br>');
    //thêm 3,8 vào mảng
    arr.push(3,8);
    document.write(arr.join() + '<br>');

Hàm pop()
cú pháp:

      var arr = new Array(1, 2, 4, 5, 9, 6);
      document.write(arr.join() + '<br>');
      //xóa phần tử cuối
      arr.pop();
      document.write(arr.join() + '<br>');

3. Kết luận
Qua bài viết này mình và các bạn đã tìm hiểu cơ bản về var, let, const và sự khác nhau giữa chúng.Đồng thời cũng tìm hiểu luôn về xử lý mảng trong javascript. Từ đó chúng ta có một hành trang vững chắc để bước nên sử dụng các framework của javascript như là nextjs. Cảm ơn mọi người đã dành thời gian đọc bài viết

4. Tài liệu tham khảo
phân biệt let, const và var
xử lý mảng

Sign up for more like this.

Enter your email
Subscribe