JavaScript

How to Use if Statement to Check if a Variable is undefined in JavaScript

 

This article is for JavaScript beginners and introduces three ways to check whether a variable is undefined. We also explain the benefits and caveats of each method, so you can choose the one that best suits your use case.

Contents
  1. CSS to Display the Result of the if Statement
  2. JavaScript Code to Check if a Variable is undefined
  3. Demo Page: Check if a Variable is undefined with an if Statement in JavaScript
  4. Summary

CSS to Display the Result of the if Statement

First, we use the following CSS to display the result of the if statement. Colors are added to make the output visually easy to understand. Three output patterns are prepared: .txt1, .txt2, and .txt3.

<style>
body {
  font-size: 18px;
  text-align: center;
}
h1,h2{
  text-align: center;
  font-size: 22px;
  line-height: 1.6em;
  padding-top: 20px;
}
h2{
  font-size: 20px;
  padding-bottom: 30px;
}
div{
  padding-bottom: 20px;
}
.txt1{
  color: #007FFF;
}
.txt2{
  color: #FF4D4D;
}
.txt3{
  color: #FF9326;
}
</style>

JavaScript Code to Check if a Variable is undefined

We prepare a variable test1 which is undefined.

Comparison with the Global Variable undefined

* Compare the global variable undefined with the variable test1 using an if statement. If test1 is undefined, it will match the global variable undefined. However, since the global variable undefined is writable, this method is not highly recommended.

<script type="text/javascript">
var test1;

if (test1 === undefined) {
  document.write('<div class="txt1">The variable test1 is '+test1+'. ｜ Compared with global variable undefined ｜ if (test1 === undefined) {～ </div>');
}
</script>

【Advantages of This Method】

  • Simple and easy to understand
  • Intuitive to use

【Disadvantages of This Method】

  • If undefined is overwritten, it may produce unexpected results

Compare with String “undefined” Using typeof

* Use the typeof operator to return the type of a variable as a string. If the variable test1 is undefined, typeof test1 returns the string “undefined”. We utilize this behavior.

<script type="text/javascript">
var test1;

if (typeof test1 === "undefined") {
  document.write('<div class="txt2">The variable test1 is '+test1+'. ｜ Compared with string "undefined" ｜ if (typeof test1 === "undefined") {～ </div>');
}
</script>

【Advantages of This Method】

  • Safe and reliable
  • Works even if undefined is overwritten

【Disadvantages of This Method】

  • Slightly more verbose

Comparison with null

* If the variable test1 is undefined, it will match null in an if statement using the == operator. However, it also matches if test1 is explicitly null.

<script type="text/javascript">
var test1;

if (test1 == null) {
  document.write('<div class="txt3">The variable test1 is '+test1+'. ｜ Compared with null ｜ if (test1 == null) {～ </div>');
}
</script>

【Advantages of This Method】

  • Simple and readable
  • Can check both undefined and null simultaneously

【Disadvantages of This Method】

  • Not a strict comparison
  • May obscure the difference between null and undefined

Demo Page: Check if a Variable is undefined with an if Statement in JavaScript

Demo Page: Check if a Variable is undefined with an if Statement in JavaScript

To be precise, using typeof and comparing to the string “undefined” is probably the best. However, honestly, any of the patterns work depending on your needs.

Summary

To determine whether a variable is undefined in JavaScript, it’s important to choose the appropriate method based on the situation. If you value reliability, using typeof is recommended. On the other hand, if you want to keep the code simple or check null at the same time, comparing to null is also convenient.

Feel free to use this article as a reference and apply it to your actual projects.

* If you reuse this content, please do so at your own risk. Do not reuse the Google Analytics tag inside the head tag of the demo page.

undefined
RELATED POST