John Au-YeungJavaScript is an easy to learn programming language. It’s easy to write programs that run and does something. However, it’s hard to account for all the uses cases and write robust JavaScript code.
In this article, we’ll look at how to do value checks in less bug-prone ways.
Inequalities
We can compare if something isn’t equal with the following operators in JavaScript:
-
>— greater than -
<— less than -
<=— less than or equal to -
>=— greater than or equal to -
!==,!=— not equal
If we’re checking that something isn’t equal, then we should use the !== operator since it doesn’t do any kind of type coercion before doing the comparison.
We don’t want JavaScript to automatically convert the types for us so that we can we don’t step into traps caused by automatic type conversion.
The rules for automatic type conversion before comparison with != is complex, so we don’t want to deal with them.
With the other operations, there’re no alternatives that don’t do type conversion before comparison.
Therefore, we should be careful with them. Ideally, we convert all the operands to the same type before comparing so no one will be confused about what type of data the operands have.
For instance, the expression 2 > ‘1’ returns true as JavaScript automatically converts the string '1' into number 1.
This may seem convenient, but we can easily step into traps when we have strings that don’t have numbers or strings that have numbers mixed with other text.
Therefore, we should convert them all to the same type before doing any comparison.
In the example above, we can call the Number factory function to convert them both to numbers before comparing them. We can write:
Number(2) > Number('1')
to make sure that they’re both numbers. This is even more important if one or more operands are variables since we can’t see the value of them directly.
The principles above also apply to the < , <= and >= operators.
Checking for the Existence of Values in an Array
We can check for the existence of a value in an array in a few ways. We can use the array instance’s some or indexOf methods.
The some method checks if a given value exists and returns true if it does and false otherwise.
It takes a callback that takes the array entry as the parameter and returns the condition for the item that we’re looking for.
For instance, we can use it as follows:
const arr = [1, 2, 3];
const hasOne = arr.some(a => a === 1);
In the code above, we have an array arr , then passed in a callback to some , which returns a === 1 to specify that we’re looking for an array entry that equals 1 in the arr .
The callback can also take the index of an array itself and the array as the optional 2nd and 3rd parameters respectively.
Therefore, hasOne is true since 1 is in arr .
We can also use indexOf to check if a value is in the given array. It returns the array index of the element if it exists. If the given item isn’t in the array, then it returns -1.
It takes the item we’re looking for and searches for it by using the === operator. For instance, we can write the following code to use it:
const arr = [1, 2, 3];
const index = arr.indexOf(1);
Then index is 0 since 1 is the first entry of arr .
indexOf can also take an optional starting index as the 2nd argument to make it search from that index on.
For instance, if we write:
const arr = [1, 2, 3];
const index = arr.indexOf(1, 1);
We get that index is -1 because we started searching from index 1 to the end of the array, none of which has 1 as the value.
Conclusion
To check for values in an array, we can use the some or indexOf operator.
If we need to use the comparison operators >= , <= , > , or < , then we should convert the types explicitly ourselves if we don’t know what the operands have so that we know that they’ll be the same type when we compare them.
We don’t want to fall in the traps that are caused by automatic type conversions.
The post JavaScript Best Practices for Writing More Robust Code — Value Checks appeared first on The Web Dev.
