Modern Javascript Basics - Part III

Modern Javascript Basics - Part III

Stop using var and get the difference between null and undefined in javascript;

cyrusCodes's photo
·Mar 8, 2021·

8 min read

Subscribe to my newsletter and never miss my upcoming articles

1. Drop the use of var in javascript ;

There are various reasons why you should drop the use of var in javascript mostly related to scope as expounded in this article.

Basically, var has a lot of "sinkholes" that have proven to be quite a nightmare especially when used in production code, and it's advisable to instead use let or const. Have a look at this article that differentiates between let and const.

Did you know you can declare the keyword let as a variable using var? ie;

var let = 'cyrusCodes';

Now far from the logic of this, the fact that javascript allows it should scare you away from ever using this keyword for declarations. var basically ignores the cardinal rule of not using reserved words as identifiers, You can find more rules to remember here. I thought that's another good reason why you should drop the use of var and avoid these possible complications.

2. Null vs undefined in modern javascript ;

  • Null is one of the primitives types in javascript and basically means the absence of value.

  • undefined means that the variable has never been initialized or declared in the program. To elaborate on this, we will use an example;

console.log(name);//ReferenceError: name is not defined

This means that our variable name does not exist whatsoever, which should not be mistaken with the primitive type we are discussing of undefined. This is just a javascript error stipulating that we should declare our variables before use.

However, if we correctly declared the variable but failed to give it a value like this;

let names;
console.log(names); //undefined

Then what we have is no longer an error but a primitive type of undefined. This means that the program is aware that the variable exists i.e. it's declared, but it's not assigned to any value or initialized. To confirm this we can use typeof as follows;

let names;
console.log(typeof(names)); //undefined

We can also treat undefined as a value of variables that have not been initialized which means assigning our variable to the value of undefined as follows;

let names = undefined;
console.log(typeof(names)); //undefined

This is unnecessary since declaring our variable without assigning it a value or initializing it gives the same result as we've already covered.

Undefined can also be a result of several operations in javascript which include and not limited to;

  • The value of an object property that does not exist;
let names = {};
console.log(names.age); //undefined
  • value of a non-existent array element. Example;
let names = [];
  • Functions that do not explicitly return a value Example;
function user(name) {

console.log(typeof(user())); //undefined
  • Finally the value of function parameters for which no argument is passed as follows;
function user(name) {
user(); //undefined

Null on the other hand means no value. It's an assignment value and also an object. This means we can assign our variable to null as follows;

let names = null;
console.log(names); //null

If we check the type of null in javascript we get the following results;

let names = null;
console.log(typeof(names)); //object

When it comes to comparing between the two primitive types;

  • The equality operator considers then equal. Example;
console.log(null == undefined); //true

This simple snippet may have serious implications in your code where you may get the result of one while expecting the other. Example;

let user = null;
let users = undefined;
console.log(user == users);//true

As already discussed, we both know the two are not the same or equal but when you use the equality operator to compare the two in your code, you may spend a significant time trying to find the problem.

  • That is why To distinguish the two, it's advisable to use the strict equality operator since it can differentiate the two as follows;
console.log(null === undefined); //false

which is the same case in your code as follows;

let user = null;
let users = undefined;
console.log(user === users); //false

In javascript, it's important to differentiate between =(Assignment operator), ==(Equality operator),===(Strict equality operator) and know where best to apply each of these tools. If you are really interested read this article and you'll be surprised at how different and significant each of these tools is in javascript language.

Finally, neither null nor undefined has any properties or methods associated with them, and trying to use any in javascript will result in a type error. Examples;

console.log(null.length); //TypeError: Cannot read property 'length' of null
console.log(undefined.length); //TypeError: Cannot read property 'length' of null

This concludes the THIRD part of this amazing blog post series of basic javascript with many more to come. Click here to read the first article on this series and here to read the second article of the series if you haven't yet. I urge you to subscribe to this blog and get notified anytime a new part is complete.

You can also share this article on your social media to bookmark it for future reference or give access to your friends also working or interested in javascript language. You can follow me on Twitter , where I share countless resources and articles related to javascript and we can become lifetime friends and javascript lovers.

Finally, THANK YOU for so much for taking your time to read this article. If you are feeling more generous I'll not stop you from buying me a cup of coffee. coffee_black.png

Until the next article, KEEP CODING & SHARING.

Share this