How to get the first non-null/undefined argument in JavaScript?

Front End Technology Javascript Web Development

In JavaScript, there are often times when we need to find the first non-null/undefined argument in a function. This can be a tricky task, but luckily there are a few methods that can help us accomplish this

Using Array.prototype.find()

One method that can be used to get the first non-null/undefined argument in JavaScript is the Array.prototype.find() method. This method returns the value of the first element in an array that passes a given test. In our case, we can use this method to find the first non-null/undefined argument by passing a test that checks if the argument is not null/undefined.

Example

In the example below, we define a function to find the first non-null or undefined argument.

<html>
<head>
   <title>Example: finding first non-null arguements</title>
</head>
<body>
   <h2> Array.prototype.find() Method</h2>
   <div id="arguments"></div>
   <div id="result"></div>
   <script>
      function findFirstNonNullArgument(...args) {
         return args.find(arg => arg != null);
      }
      var result = findFirstNonNullArgument(null, undefined, "Hello", "World");
      document.getElementById("arguments").innerHTML = `Arguments: null, undefined, "Hello", "World"`;
      document.getElementById("result").innerHTML = "<br>First Non-Null Argument: " + result;
   </script>
</body>
</html>

As we can see from the code above, the findFirstNonNullArgument() function takes in a variable number of arguments and uses the find() method to return the first non-null/undefined argument.

Using Array.prototype.filter()

Another method that can be used to get the first non-null/undefined argument in JavaScript is the Array.prototype.filter() method. This method creates a new array with all elements that pass the given test. In our case, we can use this method to find the first non-null/undefined argument by passing in a test that checks if the argument is not null/undefined.

Example

Below is the full working code.

<html>
<head>
   <title>Example: finding first non-null arguements</title>
</head>
<body>
   <h2> Array.prototype.filter() Method</h2>
   <div id="arguments"></div>
   <div id="result"></div>
   <script>
      function findFirstNonNullArgument(...args) {
         return args.filter(arg => arg != null)[0];
      }
      document.getElementById("arguments").innerHTML = `Arguments: null, undefined, "Hello", "World"`;
      document.getElementById("result").innerHTML = "<br>First non-nul argument: " + findFirstNonNullArgument(null, undefined, "Hello", "World")
   </script>
</body>
</html>

As we can see from the code above, the findFirstNonNullArgument() function takes in a variable number of arguments and uses the filter() method to return the first non-null/undefined argument.

Using a for loop

Another method that can be used to get the first non-null/undefined argument in JavaScript is by using a for loop. This method loops through all of the arguments and checks if each argument is not null/undefined. If it finds an argument that is not null/undefined, it returns that argument.

Example

Below is the full working code −

<html>
<head>
   <title>Examples</title>
</head>
<body>
   <div id="result"></div>
   <script>
      function findFirstNonNullArgument(...args) {
          for (let arg of args) {
             if (arg != null) {
                return arg;
            }
         }
      }
      document.getElementById("result").innerHTML = findFirstNonNullArgument(null, undefined, "Hello", "World")
   </script>
</body>
</html>

As we can see from the code above, the findFirstNonNullArgument() function takes in a variable number of arguments and uses a for loop to return the first non-null/undefined argument.

Conclusion

In this article, we looked at three different methods that can be used to get the first non-null/undefined argument in JavaScript. Each method has its own advantages and disadvantages, so it is important to choose the right method for the task at hand.