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 have provided an explanation with some code examples on Codepen to explore the concept further.

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

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 the '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

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 the 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.

Hope you enjoyed the simple article. Don't forget to subscribe to my newsletter and follow me on Twitter @skaytech

You might also be interested in the following:

• Docker Fundamentals
• Understanding Closures
• 5 Must-Read Tips to write a Killer Blog Article
• Build a Custom SPA Router using VanillaJS
• A Practical Guide to stay more productive and organized
• IIFE - Immediately Invoked Function Expressions
• JS Design Patterns: Module & Revealing Module Pattern
• ES6 - var, let & const
• ES6 - setTimeout vs setInterval