JavaScript defines a couple of special values that you need to be careful with when you compare them: undefined and null. The undefined value is returned when you read a variable that hasn’t had a value assigned to it or try to read an object property that doesn’t exist. Listing 5-38 shows how undefined is used in JavaScript.
Listing 5-38. The undefined Special Value in the jsdemo.html File
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<script src=”angular.js”></script>
<script type=”text/javascript”>
var myData = {
name: “Adam”,
weather: “sunny”,
};
console.log(“Prop: ” + myData.doesntexist);
</script>
</head>
<body>
This is a simple example
</body>
</html>
The output from this listing is as follows:
Prop: undefined
JavaScript is unusual in that it also defines null, another special value. The null value is slightly different from undefined. The undefined value is returned when no value is defined, and null is used when you want to indicate that you have assigned a value but that value is not a valid object, string, number, or boolean; that is, you have defined a value of no value. To help clarify this, Listing 5-39 shows the transition from undefined to null.
Listing 5-39. Using undefined and null in the jsdemo.html File
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<script src=”angular.js”></script>
<script type=”text/javascript”>
var myData = {
name: “Adam”,
};
console.log(“Var: ” + myData.weather);
console.log(“Prop: ” + (“weather” in myData));
myData.weather = “sunny”;
console.log(“Var: ” + myData.weather);
console.log(“Prop: ” + (“weather” in myData));
myData.weather = null;
console.log(“Var: ” + myData.weather);
console.log(“Prop: ” + (“weather” in myData));
</script>
</head>
<body>
This is a simple example
</body>
</html>
I create an object and then try to read the value of the weather property, which is not defined:
…
console.log(“Var: ” + myData.weather);
console.log(“Prop: ” + (“weather” in myData));
…
There is no weather property, so the value returned by calling myData.weather is undefined, and using the in keyword to determine whether the object contains the property returns false. The output from these two statements is as follows:
Var: undefined
Prop: false
Next, I assign a value to the weather property, which has the effect of adding the property to the object:
…
myData.weather = “sunny”;
console.log(“Var: ” + myData.weather);
console.log(“Prop: ” + (“weather” in myData));
…
I read the value of the property and check to see whether the property exists in the object again. As you might expect, the object does define the property, and its value is sunny:
Var: sunny
Prop: true
Now I set the value of the property to null, like this:
…
myData.weather = null;
…
This has a specific effect. The property is still defined by the object, but I have indicated it doesn’t contain a value. When I perform my checks again, I get the following results:
Var: null
Prop: true
This distinction is important when it comes to comparing undefined and null values because null is an object and undefined is a type in its own right.
1. Checking for null or undefined
If you want to check to see whether a property is null or undefined (and you don’t care which), then you can simply use an if statement and the negation operator (!), as shown in Listing 5-40.
Listing 5-40. Checking to See Whether a Property Is null or undefined in the jsdemo.html File
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<script src=”angular.js”></script>
<script type=”text/javascript”>
var myData = {
name: “Adam”,
city: null
};
if (!myData.name) {
console.log(“name IS null or undefined”);
} else {
console.log(“name is NOT null or undefined”);
}
if (!myData.city) {
console.log(“city IS null or undefined”);
} else {
console.log(“city is NOT null or undefined”);
}
</script>
</head>
<body>
This is a simple example
</body>
</html>
This technique relies on the type coercion that JavaScript performs such that the values you are checking are treated as boolean values. If a variable or property is null or undefined, then the coerced boolean value is false. The listing produces this output:
name is NOT null or undefined
city IS null or undefined
■ Tip You can use the || operator to coalesce null values and can see this technique demonstrated in Chapter 9.
You can also use the AngularJS angular.isDefined and angular.isUndefined methods, as shown in Listing 5-41.
Listing 5-41. Using the AngularJS Methods for Testing Defined Values in the jsdemo.html File
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script src=”angular.js”></script>
<script type=”text/javascript”>
var myData = {
name: “Adam”,
city: null
};
console.log(“name: ” + angular.isDefined(myData.name));
console.log(“city: ” + angular.isDefined(myData.city));
console.log(“country: ” + angular.isDefined(myData.country));
</script>
</head>
<body>
This is a simple example
</body>
</html>
These methods check only whether a value has been defined, not whether it is null, and this can be useful for differentiating between null and undefined values. In the listing I have used the angular.isDefined method to check a property that has been defined and assigned a value, a property that has been defined but is null, and an undefined value. The example produces the following console output:
name: true
city: true
country: false
Source: Freeman Adam (2014), Pro AngularJS (Expert’s Voice in Web Development), Apress; 1st ed. edition.