skaytech

Posted on Jul 23, 2020 • Edited on Oct 2, 2020 • Originally published at blog.skay.dev

Making an argument "required" in JavaScript

#javascript #codenewbie #100daysofcode #webdev

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

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

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