Named function arguments in JavaScript

Amit Merchant · September 4, 2020 ·

A function in JavaScript is a set of statements that performs a task or calculates a value and return it based on the input which is been given to it.

For instance, let’s say I have this User function which accepts different arguments and logs those details into the console.

const User = (name, age) => {
    console.log(name, age)    
};

And you can call it like so.

User('Amit', '30'); // 'Amit' '30'

Simple, no? But there is a problem over here and that is by looking at the function call, you can’t figure out the intention behind all the arguments. For that, you’ll need to navigate where the function is defined.

This can get complex if your function has more than two arguments and you just can’t wrap your head around all these arguments. How can you solve this? Well, it turns out, you can use JavaScript’s object destructuring to make this more readable.

Named arguments

What you’ll need to do is to use JavaScript objects to name the arguments. So, our previous example can be re-written using an object like so.

const User = ({name, age}) => {
    console.log(name, age)    
};

And this is how we can call the function which will use JavaScrip’s destructing to resolve the arguments into the function.

User({
  name: 'Amit',
  age: '30'
});

// 'Amit' '30'

Looks more readable, right? Now you can easily identify which argument is intended for what purpose without even navigating to the function definition.

Default argument values

Now, if you want to assign default values to arguments, you can do it like so.

const User = ({name, age, occupation = 'Tester'}) => {
    console.log(name, age, occupation)    
};

Here, the occupation has the default value Tester, so if you don’t pass in the occupation while calling the function, it’s default value will be Tester.

User({
  name: 'Amit',
  age: '30',
});

// 'Amit' '30' 'Tester'

And when you pass in the occupation, it will override the default value like so.

User({
  name: 'Amit',
  age: '30',
  occupation: 'Engineer'
});

// 'Amit' '30' 'Engineer'

Hi there! I'm Amit. I write articles about all things web development. If you like what I write and want me to continue doing the same, I would like you buy me some coffees. I'd highly appreciate that. Cheers!