Two ways I discovered to pass dynamic (arrow and non-arrow) function parameters

In my attempt to understand how the clsx utility is written by looking at its source code, I found that clsx does not have function parameters declared.

How is it possible to access the parameters without declaring them? clsx expects dynamic parameters. Below is an usage example from the docs

Build shadcn-ui/ui from scratch.

Then, I looked at the function code and from the lines below, it was apparent that through arguments variable, it is possible to access the function parameters.

export function clsx() {
 var i=0, tmp, x, str='', len=arguments.length;

I searched on Google with this query “arguments without paramters in nodejs” and clicked on the first Stackoverflow link.

As per documentation:

arguments is an Array-like object accessible inside functions that contains the values of the arguments passed to that function.

The arguments object is a local variable available within all non-arrow functions.

First way of accepting dynamic function parameters (non-arrow):

The arguments object is useful for functions called with more arguments than they are formally declared to accept. This technique is useful for functions that can be passed a variable number of arguments.

Using arguments only works in non-arrow functions.

Second way of accepting dynamic function parameters (arrow):

I read in some open source code sometime ago (I think, it is nextjs source code), don’t exactly remember but, you could use spread operator to accept dynamic function parameters. I found this stackoverflow question.

const childFunc = (str1, str2, str3) => `${str1} ${str2} ${str3}`;
 
const parentFunc = (...args) => childFunc('foo', ...args);
 
console.log(parentFunc('bar', 'fizz'));

Since arguments variable does not work in arrow functions, I would choose a spread operator like shown in the above code snippet.

Conclusion:

Use arguments in non-arrow functions and a single parameter with a spread operator in arrow functions to accept dynamic function parameters.

About me:

Hey, my name is Ramu Narasinga. I study large open-source projects and create content about their codebase architecture and best practices, sharing it through articles, videos.

I am open to work on interesting projects. Send me an email at ramu.narasinga@gmail.com

My Github —  https://github.com/ramu-narasinga

My website —  https://ramunarasinga.com

My Youtube channel —  https://www.youtube.com/@ramu-narasinga

Learning platform —  https://thinkthroo.com

Codebase Architecture —  https://app.thinkthroo.com/architecture

Best practices —  https://app.thinkthroo.com/best-practices

Production-grade projects —  https://app.thinkthroo.com/production-grade-projects

References:

1. https://github.com/lukeed/clsx/blob/master/src/index.js

2. https://github.com/lukeed/uvu/blob/master/docs/cli.md

3. https://stackoverflow.com/questions/59315539/why-can-arguments-be-passed-to-a-function-that-has-no-parameter-in-javascript

4. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments

5. https://stackoverflow.com/questions/45217420/in-node-js-how-do-i-dynamically-pass-function-arguments-to-a-child-function

6. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters