Making an argument "required" in JavaScript
Tags: javascript, codenewbie, 100daysofcode, webdev
Published: 2020-07-23 09:45:28

# Introduction

My friend [Simon Hoiberg](https://www.silind.com/), 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.

{% twitter 1286185777513345024 %}

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.

```jsx
//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 'output' variable outputs to the console as 'My name is undefined'

You can play with the code [over here]([https://codepen.io/skaytech/pen/jOWdjBy](https://codepen.io/skaytech/pen/jOWdjBy)).

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

```jsx
//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 console.

You can play with the code [over here] (https://codepen.io/skaytech/pen/PoZVMJK)

# Conclusion

Thanks to my friend [Simon](https://www.silind.com/) 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.
{% twitter 1286185777513345024 %}

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

You might also be interested in the following:
- [JavaScript Objects](https://dev.to/skaytech/javascript-objects-31lb)
- [JavaScript Functions](https://dev.to/skaytech/all-about-javascript-functions-1l5f)
- [Understanding Closures](https://dev.to/skaytech/understanding-closures-1501)
- [ES6-Understanding Destructuring](https://dev.to/skaytech/es6-understanding-destructuring-49np)
- [The WAR - var vs let vs const](https://dev.to/skaytech/the-war-var-vs-let-const-2a7l)