Trong JavaScript, làm việc với các hàm (function) là một điều rất quen thuộc với mỗi chúng ta. Thông thường, ta chỉ thực hiện khai báo và sau đó là gọi hàm để sử dụng chức năng của nó. Nhưng, điều mà ta thường không được biết đó là khi ta gọi một hàm nào đó trong JavaScript, ngoài các tham số được truyền vào, ta có một đối tượng bổ sung gọi là "Arguments Object" cũng đồng thời được tạo ra.

Đối tượng này chứa tất cả các đối số truyền vào hàm, bất kể có được định nghĩa tham số hay không. Arguments Object cung cấp một số cơ chế hữu ích để làm việc với các tham số không xác định, tuy nhiên, nó không phải là một mảng đầy đủ và có một số hạn chế. Trong bài này chúng ta sẽ tìm hiểu về Arguments Object và cách sử dụng nó trong JavaScript.

1. Truy cập vào Arguments Object

JavaScript cung cấp cho chúng ta một biến đặc biệt là arguments để truy cập Arguments Object trong một hàm. Biến này được tạo tự động khi hàm được gọi cho nên ta có thể sử dụng mà không cần khai báo nó.

Ta cùng xem một ví dụ của biến arguments:

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

stringeeFunc(1, 2); // Kết quả: [Arguments] { '0': 1, '1': 2 }

>>> Xem thêm bài viết về chủ đề Javascript:

- Xử lý chuỗi trong JavaScript

- Hàm trong JavaScript và cách xây dựng

- Sử dụng và tối ưu hóa vòng lặp trong JavaScript

2. Số lượng đối số và cách truy cập

Arguments Object không có bất kỳ quy tắc nào cho số lượng đối số, điều này nghĩa là biến arguments có thể chứa bất kỳ số lượng đối số nào, không cần thiết truyền đầy đủ tham số cho hàm.

function calculateSum() {
    let total = 0;
    for (let i = 0; i < arguments.length; i++) {
        total += arguments[i];
    }
    return total;
}

console.log(calculateSum(1, 2, 3)); // Kết quả: 6
console.log(calculateSum(10, 20, 30, 40, 50)); // Kết quả: 150

3. Arguments Object và Rest Parameters

ES6 giới thiệu cho chúng ta Rest Parameters, đây là một cách khai báo tham số hữu ích trong trường hợp các hàm có số lượng đối số không xác định trước. Rest Parameters cho phép chúng ta gom nhóm các đối số không xác định vào một mảng tham số.

function calculateSumWithRestParams(...args) {
    let total = 0;
    for (let i = 0; i < args.length; i++) {
        total += args[i];
    }
    return total;
}

console.log(calculateSumWithRestParams(1, 2, 3)); // Kết quả: 6
console.log(calculateSumWithRestParams(10, 20, 30, 40, 50)); // Kết quả: 150

Chú ý: Khi khai báo, Rest Parameters luôn phải đặt ở vị trí cuối cùng.

function exampleFunction(...b, c) {
    console.log(arguments);
}
/**
 * This error Syntax:
 * SyntaxError: Rest parameter must be last formal parameter
 *     at internalCompileFunction (node:internal/vm:73:18)
 *     at wrapSafe (node:internal/modules/cjs/loader:1178:20)
 *     at Module._compile (node:internal/modules/cjs/loader:1220:27)
 *     at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
 *     at Module.load (node:internal/modules/cjs/loader:1119:32)
 *     at Module._load (node:internal/modules/cjs/loader:960:12)
 *     at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
 *     at node:internal/main/run_main_module:23:47
 */

4. Hạn chế của Arguments Object

Song song với những lợi ích của Arguments Object, nó cũng có một số hạn chế. Điều ta thường bị lầm tưởng nhiều nhất đó là Arguments Object là một mảng. Nhưng, chính xác thì Arguments Object không phải là một đối tượng mảng đầy đủ. Điều này ta có thể thấy rõ qua một số ví dụ sau:

  • Arguments Object có thể lặp qua các phần tử tương tự như một mảng. Ví dụ:
function stringeeFunc() {
    for (let i = 0; i < arguments.length; i++) {
        console.log(`Phần tử Arguments Object thứ ${i}:`, arguments[i]);
    }
}

stringeeFunc(1, 2);
/**
 * Kết quả:
 * Phần tử Arguments Object thứ 0: 1
 * Phần tử Arguments Object thứ 1: 2
 */
  • Tuy nhiên, việc lặp qua như một mảng không đồng nghĩa Arguments Object có thể sử dụng được các phương thức làm việc với mảng như: map(), filter(), forEach(), ... trực tiếp trên Arguments Object.
function stringeeFunc() {
    arguments.map((r, i) => {
        console.log(`Phần tử Arguments Object thứ ${i}:`, r)
        return r;
    })
}

stringeeFunc(1, 2);
/**
 * This error TypeError:
 * TypeError: arguments.map is not a function
 *     at stringeeFunc (/tmp/y7sLA0igMQ.js:7:15)
 *     at Object.<anonymous> (/tmp/y7sLA0igMQ.js:13:1)
 *     at Module._compile (node:internal/modules/cjs/loader:1256:14)
 *     at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
 *     at Module.load (node:internal/modules/cjs/loader:1119:32)
 *     at Module._load (node:internal/modules/cjs/loader:960:12)
 *     at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
 *     at node:internal/main/run_main_module:23:47
 */
  • Để có thể sử dụng các phương thức của mảng với Arguments Object thì ta cần chuyển nó về một mảng thực sự. Sau đó ta có thể thao tác với Arguments Object như một mảng bình thường.
// Đối với ES6
function stringeeFunc() {
    let sum = 0;
    const argsArray = Array.from(arguments);
    sum = argsArray.reduce((sum, r) => {
        return sum + r;
    }, 0);
    
    console.log(sum); // Kết quả: 3
}

stringeeFunc(1, 2);

// Đối với ES5 trở xuống
function stringeeFunc() {
    let sum = 0;
    const argsArray = Array.prototype.slice.call(arguments);;
    sum = argsArray.reduce((sum, r) => {
        return sum + r;
    }, 0);
    
    console.log(sum); // Kết quả: 3
}

stringeeFunc(1, 2);

Tổng kết

Arguments Object trong JavaScript là một đối tượng bổ sung tự động tạo ra khi một hàm được gọi, chứa tất cả các đối số được truyền vào hàm. Arguments Object đã từng được sử dụng rất nhiều khi làm việc với các đối số không xác định trước. Tuy nhiên, với sự giới thiệu của Rest Parameters, đây là một sự lựa chọn tốt hơn để làm việc với các trường hợp tương tự. Đồng thời, Rest Parameters sẽ giúp cho chúng ta dễ dàng sử dụng và giữ mã dễ đọc hơn.

Stringee Communication APIs là giải pháp cung cấp các tính năng giao tiếp như gọi thoại, gọi video, tin nhắn chat, SMS hay tổng đài CSKH cho phép tích hợp trực tiếp vào ứng dụng/website của doanh nghiệp nhanh chóng. Nhờ đó giúp tiết kiệm đến 80% thời gian và chi phí cho doanh nghiệp bởi thông thường nếu tự phát triển các tính năng này có thể mất từ 1 - 3 năm.

Bộ API giao tiếp của Stringee hiện đang được tin dùng bởi các doanh nghiệp ở mọi quy mô, lĩnh vực ngành nghề như TPBank, VOVBacsi24, VNDirect, Shinhan Finance, Ahamove, Logivan, Homedy,  Adavigo, bTaskee…

Quý bạn đọc quan tâm xin mời đăng ký NHẬN TƯ VẤN TẠI ĐÂY: