Javascript

Arguments parameter of function in JS

Arguments parameter of function in js

1. Mở đầu

Như mình đã nói ở phần đầu khi mở bài, khi mà nhìn vào các anh, chị đi trước code. Mình không cần anh chị phải chỉ bảo tận tay mà khi quan sát a/c ý làm thôi là cũng đã học được rất nhiều rồi. Một trong số đó là cách debbug sao cho dễ nhìn, cho hay và một trong số đó là dùng Arguments trong function nhé.

Nhưng trong bài này mình sẽ còn nói nhiều hơn thế nữa về Arguments function nhé, mong rằng bạn sẽ có thu hoạch gì đó cho mình.

2. Chi tiết

Arguments parameter of function là gì?

Arguments là một feature trong function JS cho phép bạn thao tác với tất cả các Parameter được truyền vào bên trong một function. Cụ thể hơn bạn hãy nhìn vào ví dụ bên dưới nhé.

function func(name, address) {
    console.log("name", name);
    console.log("address", address);
    console.log("arguments", arguments);
}

func("chamdev", "chamdev.com");
// chamdev
// chamdev.com
// Arguments(2) ["chamdev", "chamdev.com", callee: ƒ, Symbol(Symbol.iterator): ƒ]

Như vậy các bạn đã thấy điểm thú vị ở đây chưa nào, mình không hề khai báo một biến nào là Arguments nhưng chúng ta vẫn log ra được các giá trị param đã truyền vào bên trong function ^^. Và tận dụng tính chất này, khi làm việc với các library dùng các hàm, nếu các bạn chưa chắc hàm callback bên trong nó cần giá trị gì để truyền vào thì hãy đặt log ra (Đây chính là điều mình đã học được đó). Tuy nhiên, đây chỉ là một phần rất nhỏ mà chúng ta có thể làm với Arguments thôi nhé.

function func(name, address) {
    console.log("arguments", arguments);
}

func();
// Arguments [callee: ƒ, Symbol(Symbol.iterator): ƒ]
//  callee: ƒ func(name, address)
//  length: 0
//  Symbol(Symbol.iterator): ƒ values()
//  __proto__: Object

Vậy có bạn lại hỏi, thế có dùng arguments với Arrow function được hay không? Câu trả lời là không nhé, lí do rất đơn giản là nó không có @@, mình đã GG rất nhiều nhưng vẫn chưa tìm được câu trả lời thỏa đáng tại sao nó không có. Nếu bạn biết câu trả lời hãy comment xuống bên dưới cho mình biết với nhé.

const func = (name, address) => {
    console.log("arguments", arguments);
}

func(); // ReferenceError: arguments is not defined

Hãy chú ý thêm một chút nữa có một cái khá SIDA (^^) đó là Arguments nó như là một Array, có length, có index nhưng nó lại không có các phương thức của Array object. Ahaha, hay chưa nào.

function func(name, address) {
    console.log("arguments[0]", arguments[0]);
    console.log("arguments[1]", arguments[1]);
    console.log("arguments.length", arguments.length);
    console.log("arguments.push", arguments.push(1));
};

func("chamdev", "chamdev.com");
// arguments[0] chamdev
// arguments[1] chamdev.com
// arguments.length 2
// Uncaught TypeError: arguments.push is not a function

Lợi ích.

Lợi ích của Arguments như mình đã nói rồi đó, ngoài để debbug thì các bạn cũng có thể truyền tham số mà không cần định nghĩa từ trước, nó sẽ làm cho function của bạn trở lên Flexible hơn cực nhiều, tuy nhiên nó cũng một phần nào đó làm cho function của bạn lỏng lẻo quá. Tùy trường hợp mà bạn cân nhắc nhé – cái gì cũng có cái giá của nó.

function func() {
    console.log("arguments[0]", arguments[0]);
    console.log("arguments[1]", arguments[1]);
    console.log("arguments", arguments);
};

func("chamdev", "chamdev.com");
// arguments[0] chamdev
// arguments[1] chamdev.com
// Arguments(2) ["chamdev", "chamdev.com", callee: ƒ, Symbol(Symbol.iterator): ƒ]

Điểm yếu và cách khắc phục.

Như mình đã nói ở trên, Arguments có điểm yếu là nó một Array có index, length nhưng nó lại không phải là một Array hay nó không thể dùng với Arrow function. Đúng là thật là thú vị quá đi mà, và để khắc phục 2 điều trên thì có 1 cách hết sức đơn giản mà cực hiệu quả đó là dùng Rest parameters – Một tính năng mới của ES6.

Đối với chuyển Arguments thành Array Object: Chúng ta chỉ cần viết như sau.

function func(...args) {
    console.log("args[0]", args[0]);
    console.log("args[1]", args[1]);
    console.log("args", args);
    console.log("args.push", args.push(1));
    console.log("args.push result", args);
};

func("chamdev", "chamdev.com");
// args[0] chamdev
// args[1] chamdev.com
// args ["chamdev", "chamdev.com"]
// args.push 3
// args.push result (3) ["chamdev", "chamdev.com", 1]

Và như vậy, bạn đã chuyển sang dùng một biến khác đó chính là args(bạn muốn nó tên là gì cũng được nhưng đừng đặt là arguments là được – tránh conflict) có tính chất như Arguments nhưng mạnh mẽ hơn nhiều.

Tuy nhiên có bạn lại hỏi, thế nếu không dùng Rest parameters thì có cách nào dùng các Method của Array vào Arguments không? Mình xin trả lời là có nhé. Ở đây bạn có thể dùng Call và Apply, hoặc bất kì một phương thức nào của Array mà có thể chuyển Arguments thành Array thì bạn dùng thôi, nhưng thường thì hay dùng Call và Apply nhé.

function func() {
    var args = Array.apply(null, arguments);
    // var args = Array.call(null, arguments[0], arguments[1]);
    console.log("args.push", args.push(1));
    console.log("args.push result", args);
};

func("chamdev", "chamdev.com");

// args.push 3
// args.push ["chamdev", "chamdev.com", 1]

Đối với hạn chế của Arguments trong Arrow function: Cũng rất đơn giản là hãy dùng Rest parameters của Es6 và cũng đương nhiên là không gắn mượn Methods của Array như ví dụ trên đâu nhé, vì Arrow function làm gì có Arguments cho chúng ta gắn.

const func = (...args) => {
    console.log("args.push", args.push(1));
    console.log("args.push result", args);
};

func("chamdev", "chamdev.com");
// args.push 3
// args.push result ["chamdev", "chamdev.com", 1]

3. Kết luận

Như vậy, mình đã giới thiệu với các bạn khá chi tiết về Arguments cùng như các khía cạnh xoay quanh nó.

Đây là một phần cũng không phải các bạn hay gặp lắm khi làm việc, tuy nhiên là phần rất hay hỏi trong các bài test JS, chủ yếu để đánh giá bạn hiểu JS đến đâu và bạn có nghiêm túc với nó hay không.

Cuối cùng, SEE YOU SOON!!!!

4. Tham khảo

# The Ultimate Guide to JavaScript Rest Parameters
# Parameters & Arguments in JavaScript
# The arguments object
# JavaScript Function Parameters

Tagged , , ,
0 0 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments