Arguments Object và Array-like Object trong JavaScript

Trong JavaScript có cung cấp một biến “bí mật” tồn tại ở trong các function, đó chính là biến arguments. Arguments Object là một Array-like object có khả năng truy cập bên trong hàm và chứa các giá trị được truyền vào bên trong hàm đó.

Bài viết này sẽ giúp mọi người hiểu rõ về biến arguments này và ứng dụng của nó nhé. Để hiểu rõ được biến arguments thì đầu tiên chúng ta cần hiểu về khái niệm array-like object.

Array-like object là gì?

Array-like object là một object giống như array nhưng không phải là array. Array-like object có thuộc tính length để biểu thị số lượng các thuộc tính trong object. Các thuộc tính của object này lần lượt là index (giống như một array, bắt đầu từ 0). Dưới đây là ví dụ của một array-like object.

const animals = {
  0: 'Dog',
  1: 'Cat',
  2: 'Mouse',
  length: 3
}Code language: JavaScript (javascript)

Tại sao array-like object là một array?

Duyệt qua từng phẩn tử của array-like object này cũng giống như duyệt qua mảng.

for (let i = 0; i < animals.length; i++)
  console.log(animals[i])Code language: JavaScript (javascript)

Kết quả.

//1

Tại sao array-like object không phải là một array?

Nếu như nó là một array thì chắc chắn sẽ sử dụng được các method của array đúng không ? Câu trả lời là không sử dụng được.

let cat = animals.find(function(animal) {
  return animal == "Cat"
})Code language: JavaScript (javascript)

Tất nhiên là báo lỗi rồi.

//4

Arguments Object

Có bao giờ bạn thắc mắc làm thế nào để viết một function có thể nhận vào n đối số chưa ? Trong JavaScript, biến arguments object này sẽ giải quyết thắc mắc của bạn.

Như các ngôn ngữ lập trình khác, một function trong Javascript có thể nhận vào các tham số và xử lý trong function đó.

// function tính tổng hai số
function sum(a, b) {
  console.log(a+b);
}

sum(3,4);Code language: JavaScript (javascript)

Trong function sum ở trên, lần lượt truyền vào hai giá trị là 3 và 4 tương ứng với a và b. Tuy nhiên, hai giá trị 3 và 4 này cũng được lưu trong một array-like object chính là biến arguments object.

function sum(a, b) {
  console.log(arguments);
  console.log(a+b);
}

sum(3, 4)Code language: JavaScript (javascript)

Kết quả in ra màn hình.

//2

Để lấy ra độ dài của array-like object trên, ta có thể dùng thuộc tính length như của mảng.

function sum(a,b) {
  console.log(arguments.length);
  console.log(a+b);
}Code language: JavaScript (javascript)

Biến arguments object lần lượt lưu giá trị nhận vào, như một mảng, phần tử đầu tiên có key là 0, phần tử thứ hai có key là 1,…

Bất kể truyền vào bao nhiêu tham số đi chăng nữa, thì tất cả tham số truyền vào đều lưu vào biến arguments object.

function sum() {
  console.log(arguments)
}

sum(1, 3, 5, 7, 9)Code language: JavaScript (javascript)

Kết quả.

//3

Với kết quả trên thì làm sao ta có thể tính tổng các giá trị truyền vào ?

Có 2 cách.

Một là chúng ta cứ xem nó như là một array và duyệt qua để tính bình thường.

function sum() {
  let sum = 0;

  for(let i = 0; i < arguments.length; i++)
    sum+= arguments[i]

  console.log(sum)
}

sum(1, 3, 5, 7, 9)
// Kết quả in ra màn hình là 25Code language: JavaScript (javascript)

Hai là nếu chúng ta muốn sử dụng những method của array thì ta cần chuyển array-like object trên về array. 

Trong ES6, chúng ta có thể convert một array-like object về array bằng Array.from(arguments).

function sum() {
  let sum = 0;
  const array = Array.from(arguments);

  sum = array.reduce(function(sum, num) {
    return sum+num
  }, 0)
  
  console.log(sum)
}

sum(1, 3, 5, 7, 9)
// Kết quả in ra màn hình là 25Code language: JavaScript (javascript)

Từ ES5 trở xuống, ta có thể sử dụng Array.prototype.slice.call(arguments).

Để hiểu rõ hơn về các method của array, chúng ta có thể tham khảo tại đây.

Tạm kết

Trên đây là khái niệm về array-like object và arguments object, hy vọng giúp ích cho những ai đang học về JavaScript. Nếu có ý kiến gì về bài viết của mình thì hãy bình luận bên dưới nhé, cảm ơn mọi người rất nhiều. Chúc mọi người học tốt.

Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.

---

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.