Of Stack

Javascript Base_Simple comparison of undefined and null values

  • 2021-06-28 10:43:49
  • OfStack

There are two special values in JavaScript: undefined and null, and you need to be careful when comparing them.An undefined value is obtained when reading an unassigned variable or trying to read an attribute that the object does not have. 


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Learn4UndefinedAndNull</title>
</head>
<body>
<script>
  var myData = {
    name:"Luka",
    weather:"sunny"
  };
  document.writeln("Prop: "+myData.doesntexits);
</script>
</body>
</html>

Output results: 


Prop: undefined

Javascript also defines a special value, null, which is slightly different from undefined.The latter is a value obtained without defining a value, while the former is used to indicate that a value has been assigned but it is not a valid object, string, number, or boolean value (that is, it is defined as a non-value [no value]).

The following code uses undefined and null to demonstrate their different effects: 


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Learn4UndefinedAndNull</title>
</head>
<body>
<script>
  var myData = {
    name:"Luka"
  };
  // read  weather  attribute 
  document.writeln("Var: "+myData.weather+"<br />");
  // Determine whether an object has  weather  This property 
  document.writeln("Prop: "+("weather" in myData)+"<br /><br />");

  myData.weather = "sunny";
  document.writeln("Var: "+myData.weather+"<br />");
  document.writeln("Prop: "+("weather" in myData)+"<br /><br />");

  myData.weather = null;
  document.writeln("Var: "+myData.weather+"<br />");
  document.writeln("Prop: "+("weather" in myData)+"<br /><br />");
</script>
</body>
</html>

Output results: 


Var: undefined
Prop: false

Var: sunny
Prop: true

Var: null
Prop: true

1. Check if the variable or property is undefined or null

If you want to check whether an attribute is null or undefined (either), simply use the if statement and the logical non-operator (!).That's it. 


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Learn4UndefinedAndNull</title>
</head>
<body>
<script>
  var myData = {
    name:"Luka",
    city:null
  };

  if(!myData.name){
    document.writeln("name is null or undefined <br /><br />");
  }else {
    document.writeln("name is not null or undefined <br /><br />")
  }

  if(!myData.city){
    document.writeln("city is null or undefined <br /><br />");
  }else {
    document.writeln("city is not null or undefined <br /><br />")
  }

  if(!myData.weather){
    document.writeln("weather is null or undefined <br /><br />");
  }else {
    document.writeln("weather is not null or undefined <br /><br />")
  }

</script>
</body>
</html>

Output results: 


name is not null or undefined

city is null or undefined

weather is null or undefined

2. Distinguish null from undefined

When comparing two values, the method used should depend on your needs.If you want to treat undefined and null values equally, you should use the equality operator (==) to have Javascript type-cast.At this point, a variable with an undefined value is considered equal to a variable with an null value.If you want to distinguish null from undefined, you should use the equivalent operator (==). 


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Learn4UndefinedAndNull</title>
</head>
<body>
<script>
  var firstVal = null;
  var secondVal;

  var equality = firstVal == secondVal;
  var identity = firstVal === secondVal;

  document.writeln("Equality: "+equality+" <br />");
  document.writeln("Identity: "+identity+" <br />");
</script>
</body>
</html>

Output results: 


Equality: true
Identity: false
Related articles: