Skip to main content

JavaScript: Why do I prefer 'undefined' over the 'null'?

This interesting thing came up with one of our libraries that a colleague found out when he got stuck. I am just here to amplify and talk about it.

The Problem:

The issue was related to the server-side rendering of a react application. When attempting to render a page on the server side, one of our internal libraries kept giving a "not defined" error on the window object causing a failure in the server-side rendering of a page.

This was the code that caused the "not defined" error:


Now, before getting into what's wrong with the above code, we need to understand the difference between "undefined" and "not defined" in Javascript.

"undefined" vs "not defined"

When a variable is declared but is not initialised to any value, then by default it holds "undefined" as the value. This "undefined" is one of the primitive data types in Javascript that is used as a default value for a declared but not initialised variable. If a variable has "undefined" as its value, it doesn't throw an error upon usage.

Whereas, "not defined" means that the variable isn't declared at all and that Javascript couldn't find its existence. This scenario always leads to the error seen in the above code sample.

Summarizing this as a code sample:


So, that is why the internal library threw a ReferenceError for the window object.

Better Approach:

This approach is based on how my colleague fixed it and a few things I thought of. This is where we have to think about which is better in Javascript. "null" or "undefined"?

The solution to this issue was to change the if condition to do a typeof check like this:


This brings us down to the debate of "null" vs "undefined"

"null" vs "undefined"

I am standing at the "undefined" side here because, in JavaScript, when an object is declared, by default it takes undefined as the value and not null. Similarly, if there's an object with some attributes and one of the attributes is removed by doing a delete operation, the value becomes undefined and not null.

Thus, null is a value that has to be explicitly set and checked while undefined is the default way of doing it in JavaScript. Additionally, while typeof undefined is "undefined" while typeof null is "object".

A code example of all of the above:


Here's a screenshot from the Browser console for the above code:


We cannot do a typeof check on a variable that holds null because you wouldn't know if the object is a null object or a valid object.

And finally, apart from the not defined issue, why are typeof checks better than doing a plain check like the one in the problem section? The condition won't be proper if the value becomes a number and the assigned number is 0. Let us look at the example for the same:


In this scenario, the aim of our function is to simply check if the variable is initialised or not. While the variable x passed correctly, y failed even though it was initialised. This is because of the obvious that in a conditional statement, JavaScript considers 1 as true and 0 as false.

Therefore, changing the condition with a typeof check would give the expected result:


Henceforth, I rest my case with a conclusion that
  1. undefined is better than null.
  2. Do typeof checks rather than plain checks

Comments

Popular posts from this blog

Git magic - Squash commits

Back with another git magic. When it comes to merging a pull request on Github, there are two options Rebase and Merge Squash and Merge What is Rebase and Merge? When one chooses Rebase and Merge, all the commits in the PR are added to the target branch. For example, if the PR has 5 commits, all of those commits will be visible in the PR history of the target branch. What is Squash and Merge? When a PR is merged by choosing Squash and Merge, all the commits in the PR are combined into one PR and then added to the target branch. Once again, if the PR has 5 commits or any number of commits, they are combined and added to the target branch. Therefore, this is what Squash means. Combining 'n' different commits into one single commit is called squashing. In this blog post, we will go through the commands that can squash commits.  Advantages of Squashing commits No more redundant commits In a pull request, one may have 'n' different commits for one change. They might have bee

Git worktree - guide to flexible folder structure

As always, let's start with a story why I have written this one down. I have been using git for almost 5 years now and in one of my work places I had to work on the same project but different features in parallel.  Switching between branches back and forth was a costly operation given that I didn't discover commit amend until recently. Even though I'd have discovered commit amend, I'd still have did this. Still did what? I can sense that question deep from your throats. So, whenever I am in a situation to work on multiple features or a feature and a bug fix, I'd have two clones of my repo each with different branches, Whenever a feature is merged or the fixes are merged, I'll delete the clone in my machine and branch in my origin (Gitlab / Github etc.,) Recently when I started writing these git articles, my manager suggested me to learn about Git Worktree and it'll be useful. And when I got free and good understanding of git commit, rebase and stuff, I decid

Confluence: 5 quick things that you need

As part of my work experiments, this week I would like to write down the things that one needs to know in confluence that can up-skill their documentation works. I will cover the following 5 things, How to Anchor link a title? How to Anchor link to a section? How to create a dashing dashboard? Panel - Confluence Macro Layouts - Confluence Tools Content by Label - Confluence Macro 1. How to Anchor link a title? This is the most required thing. Most useful when one has to refer to a section internally on the same confluence page. Let's consider you have a page with three different sections and titles as shown below, In this, if you want to add an internal anchor from a text in paragraph 3 to a title in paragraph 1, you can add it as follows, Choose the word that needs Anchor Click on the link icon from the Toolbar above In the link box, enter #Page Title 1 Click Insert That is it. Your anchor from the selected text to Page Title 1 is ready. This can be tested out in the preview itsel