What is the difference between null and undefined in JavaScript?

Question

I want to know what the difference is between null and undefined in JavaScript.

Answer 1

Both special values imply an empty state.

The main difference is that undefined represents the value of a variable that wasn’t yet initialized, while null represents an intentional absence of an object.

The variable number is defined, however, is not assigned with an initial value:

let number;
number; // => undefined

number variable is undefined, which clearly indicates an uninitialized variable

The same uninitialized concept happens when a non-existing object property is accessed:

const obj = { firstName: 'Dmitri' };
obj.lastName; // => undefined

Because lastName property does not exist in obj, JavaScript correctly evaluates obj.lastName to undefined.

In other cases, you know that a variable expects to hold an object or a function to return an object. But for some reason, you can’t instantiate the object. In such a case null is a meaningful indicator of a missing object.

For example, clone() is a function that clones a plain JavaScript object. The function is expected to return an object:

function clone(obj) {
  if (typeof obj === 'object' && obj !== null) {
    return Object.assign({}, obj);
  }
  return null;
}
clone({name: 'John'}); // => {name: 'John'}
clone(15);             // => null
clone(null);           // => null

However, clone() might be invoked with a non-object argument: 15 or null (or generally a primitive value, null or undefined). In such case, the function cannot create a clone, so it returns null - the indicator of a missing object.

typeof operator makes the distinction between the two values:

typeof undefined; // => 'undefined'
typeof null;      // => 'object'

The strict quality operator === correctly differentiates undefined from null:

let nothing = undefined;
let missingObject = null;
nothing === missingObject; // => false