Keep reading for several examples of validation techniques you can use in your code to prevent crashes and hangups. Each example builds off the last, and we will discuss what works, what doesn’t, and why, to help you get a better understanding of what’s going on behind the scenes.
In Example 1, we are checking to see if the length of the array is equal to 0.
In this example, you can see two separate calls to the function named processRecords. One call is at line 14, and one is at line 20.
The first time we call it, we include a three-element array for the function to process. The second time we call processRecords, we send no array.
- The first time we call processRecords, we assign three elements (foo, bar, and baz) to the array records. This array passes to the function where it is first used by the if statement. The if statement uses the length property of the records array to make sure that the array is not empty. In this case, the length is equal to three. Since the Length is not equal to zero, we skip the rest of the if statement and move on to the forEach statement. The forEach statement then uses consol.log to print each element in the array to the screen.
- The second time we call processRecords, we don’t assign any values to the records array. This empty array passes to the function where it is met by the if statement. The if statement uses the length property on the records statement, and sees that it is equal to zero. Since the length of the records array is zero, the if statement uses console.log to print the message “No records to process” before ending the processRecords function.
In Example 2, we are checking to make sure the array is not empty by using something called Truthy Falsy.
This example is very similar to Example 1, but it uses a little less code and is more efficient. In the last example, we had to check to see if the length of the array is equal to zero because an array with zero elements is empty.
This time we use the code !records.length to validate the array, which means “if the array named records has no length.” If we wrote records.length instead, we would be saying “if the array named records has any length.”
This technique is truthy falsy because other values can mean the array is empty besides zero, like undefined, and NULL.
In Example 3, we demonstrate how truthy falsy has some drawbacks. The main disadvantage is that we can check to see if the length is truthy, but not if it’s an array. In this example, we are going to attempt to pass an object to the processRecords function instead of an array.
If we run this code, you will see if the records object makes it past the if statement that checks to see if records length is truthy, which it is because it contains the length property of the object. When we get to the forEach loop, it causes an error, and the code breaks because there are no array elements to iterate through, only an object. Therefore, you must exercise care when using this technique to ensure that only an array will get passed.
In Example 4, we are going to look at how we can fix the code in Example 3 to check that the variable named records is an array and not an object.
This time, the first thing we do in the processRecords function is to use an if statement to check to see if records is an array. We use truthy falsy again and the expression instanceof for this task. It reads !(records instanceof Array), and it means “if the value of records is not an instance of an array.”
If records turns out to be an object or some other non-array, the if statement will use consol.log to print an error message and exit the function. Otherwise, it will continue with the code from Example 3 to make sure the array is not empty, and then iterate through the elements.
In Example 5, we use the same code as in Example 4, but this time, we’ll try passing different things to the function to see how our code reacts. In each case, our first if statement catches the non-arrays before they break the code. Without the first if statement, each of these next examples would pass through our second if statement, and go on to break the code.
- The first thing we pass is the object with the length property from Example 3. This time though, instead of an error message, our code catches the object.
- The next thing we pass is a boolean value.
- Next is a string
- Next is a value
- Finally, we leave the value undefined
In Example 6, we see a perfect example of how helpful Lodash can be. With this library loaded, we can use .isArray to make sure only arrays get passed to the rest of the function. It’s similar to instanceof but more precise.
The problem with isArray is that it’s relatively new and is only now supported by most browsers. Therefore, many developers shy away from this method for the time being, while there are still plenty of legacy browsers in use.
If you have any questions or comments, please let us know and please share these validation techniques on Facebook and Twitter.