DEV Community

Cover image for Making an argument "required" in JavaScript
skaytech
skaytech

Posted on • Updated on • Originally published at blog.skay.dev

Making an argument "required" in JavaScript

Introduction

My friend Simon Hoiberg, had recently made a super cool video tweet and provided an excellent tip on how to make an argument in JavaScript as a "required" field.

In this article, I'm providing a few code examples that can be bookmarked and referenced later.

Arguments passed to a JavaScript function is Optional by default

The arguments passed to a JavaScript function is optional by default. Let us look at the code example below to understand the default behavior.

//someFunction is an ES6 Arrow function that accepts 'name' as a parameter and returns the string
//By default, the parameter name is optional
const someFunction = (name) => {
  return `My name is ${name}`;
};

//Invoking the 'someFunction()'
const output = someFunction();

console.log(output);

//Output -> My name is undefined
Enter fullscreen mode Exit fullscreen mode

Things to note:

  • Since no argument is passed to the function 'someFunction()', a default value of 'undefined' is assigned to the 'name' argument by the JavaScript engine.
  • Hence, the value of 'output' variable outputs to the console as 'My name is undefined'

You can play with the code over here.

How to make the Argument passed to a JavaScript function mandatory?

A very simple technique is to assign a default value to the argument. This default value will be a function that will simply throw an error with the message 'Argument is required'.

Let us look at the code example below, to see that in action.

//The function isRequired() throws an Error with the msg 'Argument is required'
const isRequired = () => {
  throw Error('Argument is required');
};

//someFunction is an ES6 Arrow function that accepts 'name' as a parameter and returns the string
//The parameter name is 'Mandatory' by assigning a default value of the function 'isRequired()'
const someFunction = (name = isRequired()) => {
  return `My name is ${name}`;
};

try {
  //Invoking the 'someFunction()'
  const output = someFunction();

  //Append the value of output to the HTML
  document
    .querySelector('#output')
    .appendChild(document.createTextNode(output));
} catch (err) {
  console.log(err.message);
}

// Output -> Argument is required
Enter fullscreen mode Exit fullscreen mode

Things to note:

  • When the someFunction() is invoked without passing the arguments, the default value assigned to the 'name' argument is invoked.
  • The default value assigned to the 'name' argument is the function 'isRequired()'.
  • When the function 'isRequired()' is invoked, the error 'Argument is required' is thrown.
  • The error is caught within the catch block and the output 'Argument is required' displays on console.

You can play with the code over here

Conclusion

Thanks to my friend Simon for this simple, yet, powerful tip on how to make JavaScript argument mandatory when passing it to a function.

You can watch the video explanation of this tutorial from the tweet below.

Thanks for taking the time to read this article. Please share your comments & feedback.

You might also be interested in the following:

Top comments (2)

Collapse
 
z2lai profile image
z2lai

Woah, awesome tip! I've never even heard of this idea before, let alone a neat implementation! Another high value article!

Collapse
 
skaytech profile image
skaytech

Thank you! Well, even I did not know this until I saw Simon's tweet. I am glad I could make a quick post of this and share it across.