5 Simple ways to check for undefined or null values
Tags: javascript, beginners, tutorial, codenewbie
Published: 2023-03-04 14:43:43

Ever had trouble with undefined or null values?

It is a common mistake to use a value in your code without first checking whether it's null or undefined, for example, when trying to access an object's property or calling a function. 

Many of you might be familiar with the following error :

![An error caused due to undefined variable](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dmczmiphknoltd0hrtlg.png)

Sometimes, the program won't throw any errors but there might be unexpected behavior. For example:

```javascript
const data = [
  {
    name: "Voltage 1",
    reading: 0,
    unit: "V",
  },
  {
    name: "Current 1",
    reading: 30,
    unit: "A",
  },
  {
    name: "Voltage 2",
    reading: 25,
    unit: null,
  },
  {
    name: "Current 2",
    reading: 0,
    unit: "A",
  },
  {
    name: "Voltage 2",
    unit: "V",
  },
  {
    name: "Current 2",
    reading: null,
    unit: "A",
  },
];

let newData = {};

for (const item of data) {
  newData[item.name] = `${item.reading} ${item.unit}`;
}

/* Prints : 
{
  'Voltage 1': '0 V',
  'Current 1': '30 A',
  'Voltage 2': 'undefined V',
  'Current 2': 'null A'
}
*/

```
Not exactly want we wanted, is it? 

It is very important to check for such values and in this post I am going to explain 5 easy ways to achieve the same.

But before that, let me first explain what **falsy** and **nullish** values are because I have seen people do a check for falsy values when what they actually need to do is a check for nullish values (in fact, I used to do the same mistake a lot in the beginning😅).

But many of you might already be familiar with all of these, so feel free to skip ahead.  


**So, what are _falsy_ and _nullish_ values and what is the difference between them?**

According to the MDN Web Docs, a [falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy) value is *any value that is considered false when encountered in a Boolean context*.

In JavaScript, the following values are considered falsy:

![A complete list of falsy values in JavaScript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0yyql6an4t41r2fq6m1n.png)<figcaption align = "center">Image Credits : Table from MDN Docs</figcaption>

This means that 

```javascript
if (0) {
  // not reachable
}
```

is equivalent to 
```javascript
if (false) {
  // not reachable
}
```
_What are nullish values then?_

A value which is either _null_ or _undefined_ is called a [nullish](https://developer.mozilla.org/en-US/docs/Glossary/Nullish) value.

This means that out of the 9 falsy values listed above only two (null and undefined) are considered nullish.

Remember,

> **All nullish values are always falsy but not the other way around**

Now, since we have cleared that let us move onto our main topic, _the different ways we can check for falsy and nullish values..._
 

**1. Using a simple _if...else_ statement**

Checking for falsy values using if...else statement is extremely simple. All you have to do is :

```javascript
if (value) {
   // control will reach here only if value is not falsy
} else {
  //  control will reach here if value is falsy
}
```

Here _value_ is some variable.

The check for nullish values is similar, here we have to use the [Equality (==) operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Equality) since if one of the operands is null or undefined, for it to return true, the other must also be null or undefined.

```javascript
if (value == null) {
   // control will reach here only if value is nullish
} else {
  //  control will reach here if value is not nullish
}
```

**2. Using the conditional ternary operator**

 The logic used here is the same as that of if...else statement. In fact, [the conditional ternary operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) is frequently used as an alternative to an if...else statement especially when we are dealing with assignments.

Consider the code snippet given below : 

```javascript
const data = [
  {
    name: "Voltage 1",
    reading: 0,
  },
  {
    name: "Current 1",
    reading: 30,
  },
  {
    name: "Voltage 2",
    reading: 25,
  },
  {
    name: "Current 2",
    reading: 0,
  },
  {
    name: "Voltage 2",
  },
  {
    name: "Current 2",
    reading: null,
  },
];

let newData = {};

for (const item of data) {
  newData[item.name] = item.reading;
}

console.log(newData);

/* Prints : 
{
  'Voltage 1': '0',        
  'Current 1': '30',       
  'Voltage 2': 'undefined',
  'Current 2': 'null'      
}
*/

```

Now let's say I want it to print *"No Data"* when there is no actual reading instead of showing *undefined* or *null*. 

Lets try adding a check for falsy values first.

```javascript
let newData = {};

for (const item of data) {
  newData[item.name] = item.reading ? item.reading: "No Data";
}

console.log(newData);

/* Prints : 
{
  'Voltage 1': 'No Data',
  'Current 1': '30',
  'Voltage 2': 'No Data',
  'Current 2': 'No Data'
}
*/
```

Here, value of *Voltage 2* and *Current 2* are as we expected, but for *Voltage 1* it wrongly says that there is no data where in fact, we have a reading of *0*. This is because *0* is a falsy value.
Here what was required was a check for nullish values, instead we were using a check for falsy values. 
So let's correct our code and try again, shall we?

```javascript
let newData = {};

for (const item of data) {
  newData[item.name] =
    item.reading !== undefined && item.reading !== null
      ? item.reading
      : "No Data";
}

console.log(newData);

/* Prints : 
{
  'Voltage 1': '0',
  'Current 1': '30',
  'Voltage 2': 'No Data',
  'Current 2': 'No Data'
}
*/
```

Finally, we have got it right!

Here, I have used the [Strict equality (===) operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Strict_equality), but feel free to use the normal Equality operator like in the previous example for if...else. Both will give the same output.

Now is there a better way to do this? With less code? 
Actually there is!

**3. Using the nullish coalescing operator (??)**

In my opinion, using the [nullish coalescing operator (??)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_assignment) is a wonderful way to check for nullish values during assignment.

Let's see it in action first : 
```javascript
let newData = {};

for (const item of data) {
  newData[item.name] = item.reading ?? "No Data";
}

console.log(newData);

/* Prints : 
{
  'Voltage 1': '0',
  'Current 1': '30',
  'Voltage 2': 'No Data',
  'Current 2': 'No Data'
}
*/
```

That's it. Simple.

Now let me expalin how this happens.

The syntax of **nullish coalescing operator** is like this:

```javascript
expr1 ?? expr2
```
It first checks if *expr1* is *null* or *undefined*, if it is, then it returns *expr2* else returns *expr1*.

Quite neat, isn't it?

**4. Using the optional chaining operator (?.)**

Now what if our _data_ had a different format. 

Take the example below : 

```javascript
const data = [
  {
    name: "Voltage 1",
    morningReading: {
      reading: 10,
      timestamp: "",
    },
    eveningReading: {
      reading: 25,
      timestamp: "",
    },
  },
  {
    name: "Voltage 2",
    morningReading: {
      reading: null,
      timestamp: "",
    },
  },
  {
    name: "Voltage 3",
    morningReading: {
      reading: 0,
      timestamp: "",
    },
    eveningReading: {
      timestamp: "",
    },
  },
];

for (const item of data) {
  newData[`${item.name} morningReading`] =
    item.morningReading.reading ?? "No Data";
  newData[`${item.name} eveningReading`] =
    item.eveningReading.reading ?? "No Data";
}
console.log(newData);
```
What do you think will happen?

Since in the second object _"Voltage 2"_ there is no property named _"eveningReading"_, when we try to access _item.eveningReading.reading_ the program will throw an error.

One way to ensure such errors don't come is to use an _if_ condition prior to accessing chained properties. 

```javascript
for (const item of data) {
  if (item.eveningReading) {
    console.log(item.eveningReading.reading);
  }
}
/* Prints
25
undefined
*/
```

Here, _item.eveningReading.reading_ will only be evaluated if _item.eveningReading_ is not nullish, hence there won't be any errors.
You can also use conditional ternary operator to achieve a similar result. 

But we can simplify it further using the [optional chaining operator (?.)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining). 

Let's see how it's done :

```javascript
for (const item of data) {
  console.log(item.eveningReading?.reading);
}
/* Prints
25
undefined
undefined
*/
```
Here, first the program checks if _item.eveningReading_ is nullish, if it is, then the expression short-circuits with a return value of undefined else it will evaluate the whole expression _item.eveningReading?.reading_.

**5. Combining the nullish coalescing and optional chaining operators**

Now, coming back to the problem at hand, the best way to create our _newData_ variable from this new version of _data_ is to combine the nullish coalescing and optional chaining operators.

I guess at this point all of you would already know how to do it, but I'll still provide the code here.

```javascript
for (const item of data) {
  newData[`${item.name} morningReading`] =
    item.morningReading?.reading ?? "No Data";
  newData[`${item.name} eveningReading`] =
    item.eveningReading?.reading ?? "No Data";
}
console.log(newData);

/* Prints
{
  'Voltage 1 morningReading': 10,
  'Voltage 1 eveningReading': 25,
  'Voltage 2 morningReading': 'No Data',
  'Voltage 2 eveningReading': 'No Data',
  'Voltage 3 morningReading': 0,
  'Voltage 3 eveningReading': 'No Data'
}
*/
```
That's all!


To summarize, in this article we have seen what falsy and nullish values are and 5 ways in which we can add a check for them.

Now if you ask me which is the best method out of these five I have mentioned, I honestly cannot answer that because I believe there is no "one method" that is the best solution to all kinds of problems. 
What might be the best method for one type of problem could end up being the worst one for another type of problem.
So all I can say is, look at your problem closely, think about what you are trying to achieve and choose a method that you think is the most suitable.

I really hope this post was helpful and if I have made any mistakes, please do let me know, I'll correct them. And if you know any other methods to check for falsy and nullish values, do share them in the comments.

Thank you so much for reading!

**P.S.** This is my first post here in dev.to, so any suggestions on how I can improve the quality of my posts are also welcome!