Sling Academy
Home/JavaScript/null, undefined, NaN, and false in Javascript

null, undefined, NaN, and false in Javascript

Last updated: February 20, 2023

This concise and straight-to-the-point article is about null, undefined, NaN, and false in JavaScript.

Overview

null and undefined are both used to represent the absence of a value, but null is usually used when you intentionally want to set a variable or property to have no value, whereas undefined is usually used to indicate that a variable or property has not been assigned a value.

NaN (stands for not a number) and false are both used to represent a non-true condition, but NaN specifically represents an invalid number result, while false represents a boolean value.

Here’s a table summarizing the comparison and differences:

ValueRepresentsTypeUsage
nullAbsence of any valueobjectExplicitly set a variable or property to no value
undefinedAbsence of a valueundefinedVariable or property has not been assigned a value
NaNInvalid number valuenumberResult of operation with non-numeric values
falseFalse conditionbooleanBoolean value in logical expressions and conditionals

Now, let’s discuss these values one by one in detail, with practical code examples.

null

In JavaScript, null is a special value that represents the absence of any object value. It is often used to indicate that a variable or property has no value or that a function has no return value.

Example:

let myVariable = null;
console.log(myVariable);
console.log(typeof myVariable);

Output:

null
object

To check if a value is null, you can use the === operator to check for strict equality with the null value:

let myVariable = null;

if (myVariable === null) {
  // do something if myVariable is null
}

Note that checking for null using the == operator will return true if the value is either null or undefined. Don’t do that.

undefined

undefined is another special value in JavaScript that represents the absence of a value. It is often used to indicate that a variable has not been assigned a value or that a property does not exist.

Example:

let myVariable;
console.log(myVariable);
console.log(typeof myVariable);

Output:

undefined
undefined

To check if a value is undefined or not, you can also use the === operator to check for strict equality with the undefined value:

let myVariable;

if (myVariable === undefined) {
  // do something if myVariable is undefined
}

Note that if a variable is declared but not initialized, it will have an initial value of undefined.

NaN

NaN stands for “Not a Number” and is a special value in JavaScript that represents an invalid number. It is often the result of an operation that involves non-numeric values or undefined variables.

Example:

let myVariable = "Sling Academy" / 2 + 4;
console.log(myVariable);
console.log(typeof myVariable);

Output:

NaN
number

To check whether a value is NaN, you can use the isNaN() function, which returns true if the argument is not a valid number:

let myVariable = "not a number";

if (isNaN(myVariable)) {
  // do something if myVariable is NaN
}

Note that isNaN() will also return true for undefined values.

false

false is a boolean value in JavaScript that represents a false condition. It is often used in logical expressions and conditional statements.

Example:

let myVariable = 2 > 5;
console.log(myVariable); 
console.log(typeof myVariable);

Output:

false
boolean

To check if a value is false, you can use the === operator to check for strict equality with the false value:

let myVariable = false;

if (myVariable === false) {
  // do something if myVariable is false
}

It’s important to know that any other value, including 0, null, undefined, and NaN, will be considered “truthy” and will evaluate to true in a boolean context.

Best Practices & Common Pitfalls

When working with null, undefined, NaN, and false in JavaScript, it’s important to keep in mind a few best practices to avoid common pitfalls and ensure your code is clear and easy to maintain:

  • Always initialize variables: When you declare a variable, make sure to give it an initial value. This can help avoid issues with undefined values and make your code more clear.
  • Use strict equality (===): When comparing values, it’s often best to use strict equality === instead of loose equality ==. This is because loose equality can treat different types of values as equivalent, which can lead to unexpected results.
  • Handle errors: When working with potentially invalid data, it’s important to check for errors and handle them gracefully. For example, if you’re parsing user input into a number, make sure to handle cases where the input is not a valid number (e.g., NaN).
  • Don’t use NaN as a sentinel value: While NaN can be a useful indicator of an invalid numeric value, it’s generally not a good idea to use it as a sentinel value to represent other types of data. This can make your code harder to understand and maintain.
  • Be consistent: Make sure to use the same terminology and conventions throughout your codebase when referring to null, undefined, NaN, and false. This can help avoid confusion and make your code more readable.

Next Article: JavaScript console.table() method (with examples)

Previous Article: Let, Const, and Var in Modern JavaScript

Series: JavaScript Basics

JavaScript

You May Also Like

  • Handle Zoom and Scroll with the Visual Viewport API in JavaScript
  • Improve Security Posture Using JavaScript Trusted Types
  • Allow Seamless Device Switching Using JavaScript Remote Playback
  • Update Content Proactively with the JavaScript Push API
  • Simplify Tooltip and Dropdown Creation via JavaScript Popover API
  • Improve User Experience Through Performance Metrics in JavaScript
  • Coordinate Workers Using Channel Messaging in JavaScript
  • Exchange Data Between Iframes Using Channel Messaging in JavaScript
  • Manipulating Time Zones in JavaScript Without Libraries
  • Solving Simple Algebraic Equations Using JavaScript Math Functions
  • Emulating Traditional OOP Constructs with JavaScript Classes
  • Smoothing Out User Flows: Focus Management Techniques in JavaScript
  • Creating Dynamic Timers and Counters with JavaScript
  • Implement Old-School Data Fetching Using JavaScript XMLHttpRequest
  • Load Dynamic Content Without Reloading via XMLHttpRequest in JavaScript
  • Manage Error Handling and Timeouts Using XMLHttpRequest in JavaScript
  • Handle XML and JSON Responses via JavaScript XMLHttpRequest
  • Make AJAX Requests with XMLHttpRequest in JavaScript
  • Customize Subtitle Styling Using JavaScript WebVTT Integration