107

JavaScript — Null vs. Undefined – codeburst

 7 years ago
source link: https://codeburst.io/javascript-null-vs-undefined-20f955215a2?gi=c28c99f98184
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

JavaScript — Null vs. Undefined

Learn the differences and similarities between null and undefined in JavaScript

1*MoAuGg1Ircb9KqRbWXs-QA.png

At first glance, null and undefined may seem the same, but they are far from it. This article will explore the differences and similarities between null and undefined in JavaScript.

What is null?

There are two features of null you should understand:

  • null is an empty or non-existent value.
  • null must be assigned.

Here’s an example. We assign the value of null to a:

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

What is undefined?

Undefined most typically means a variable has been declared, but not defined. For example:

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

You can also explicitly set a variable to equal undefined:

let c = undefined;console.log(c);
// undefined

Finally, when looking up non-existent properties in an object, you will receive undefined:

var d = {};console.log(d.fake);
// undefined

Similarities between null and undefined

In JavaScript there are only six falsy values. Both null and undefined are two of the six falsy values. Here’s a full list:

  • false
  • 0 (zero)
  • “” (empty string)
  • null
  • undefined
  • NaN (Not A Number)

Any other value in JavaScript is considered truthy.

If you’re not familiar with truthy/falsy values in JavaScript, I recommend reading my previous article: JavaScript — Double Equals vs. Triple Equals

Also in JavaScript, there are six primitive values. Both null and undefined are primitive values. Here is a full list:

  • Boolean
  • Null
  • Undefined
  • Number
  • String
  • Symbol

All other values in JavaScript are objects (objects, functions, arrays, etc.).

Interestingly enough, when using typeof to test null, it returns object:

let a = null;
let b;console.log(typeof a);
// objectconsole.log(typeof b);
// undefined

This has occurred since the beginning of JavaScript and is generally regarded as a mistake in the original JavaScript implementation.

If you’re not familiar with data types in JavaScript, I recommend reading my previous article: JavaScript Data Types Explained

null !== undefined

As you can see so far, null and undefined are different, but share some similarities. Thus, it makes sense that null does not strictly equal undefined.

null !== undefined

But, and this may surprise you, null loosely equals undefined.

null == undefined

In JavaScript, a double equals tests for loose equality and preforms type coercion. This means we compare two values after converting them to a common type.

Practical Differences

All of this is great, but what about a practical difference between null and undefined?

Consider the following code snippet:

let logHi = (str = 'hi') => {
  console.log(str);
}

The code above creates a function named logHi. This function requires one parameter and sets the default of that parameter to hi if it isn’t supplied. Here’s what that looks like:

logHi();
// hi

We can also supply a parameter to overwrite this default:

logHi('bye');
// bye

With default parameters, undefined will use the default while null does not.

logHi(undefined);
// hilogHi(null);
// null

Thanks to Tim Branyen for the code inspiration.

Summary

  • null is an assigned value. It means nothing.
  • undefined typically means a variable has been declared but not defined yet.
  • null and undefined are falsy values.
  • null and undefined are both primitives. However an error shows that typeof null = object.
  • null !== undefined but null == undefined.

Closing Notes:

Thanks for reading! If you’re ready to finally learn Web Development, check out: The Ultimate Guide to Learning Full Stack Web Development in 6 months.

If you’re working towards becoming a better JavaScript Developer, check out: Ace Your Javascript Interview — Learn Algorithms + Data Structures.

I publish 4 articles on web development each week. Please consider entering your email here if you’d like to be added to my once-weekly email list, or follow me on Twitter.

If this post was helpful, please click the clap 👏 button below a few times to show your support! ⬇⬇


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK