Named function arguments in JavaScript

September 4, 2020 · JavaScript

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'

Previous: Re-usable Blade components for Laravel projects using Blade UI Kit Next: My workflow for publishing articles

» Share: Twitter, Facebook, Hacker News

Like this article? Consider leaving a

Tip

👋 Hi there! I'm Amit. I write articles about all things web development. You can become a sponsor on my blog to help me continue my writing journey and get your brand in front of thousands of eyes.

Become a Sponsor