Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to get the first non-null/undefined argument in JavaScript?
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 arguments</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>
Arguments: null, undefined, "Hello", "World" First Non-Null Argument: Hello
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 arguments</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-null argument: " + findFirstNonNullArgument(null, undefined, "Hello", "World");
</script>
</body>
</html>
Arguments: null, undefined, "Hello", "World" First non-null argument: Hello
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>
Hello
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.
Comparison
| Method | Performance | Readability | Returns on empty |
|---|---|---|---|
Array.find() |
Fast - stops at first match | Excellent | undefined |
Array.filter()[0] |
Slower - processes all elements | Good | undefined |
| for loop | Fastest - manual control | Good | undefined |
Conclusion
In this article, we looked at three different methods that can be used to get the first non-null/undefined argument in JavaScript. The Array.find() method is recommended for its balance of performance and readability, stopping execution as soon as it finds the first valid argument.
4K+ Views
