DEV Community 👩‍💻👨‍💻

Discussion on: The Difference Between Null and Undefined in JavaScript

zahrakhadijha profile image
Zahra Khan Author

This is incredible feedback and so good to learn!

Yeah I've watched some videos on the topic where it's best practice to use undefined over null but I love your explanation!

Thank you!

peerreynders profile image
peerreynders • Edited on

One caveat about undefined:

const obj = {
  nil: null,
  nothing: undefined,

console.log(obj.nil == undefined);          // true  (non-strict equality)
console.log(obj.nothing === undefined);     // true
console.log(obj.zilch === undefined);       // true

console.log(obj.hasOwnProperty('nil'));     // true
console.log(obj.hasOwnProperty('nothing')); // true
console.log(obj.hasOwnProperty('zilch'));   // false

const array = [null, ,undefined];

console.log(array[0] == undefined);         // true  (non-strict equality)
console.log(array[1] === undefined);        // true
console.log(array[2] === undefined);        // true
console.log(array[3] === undefined);        // true

console.log(array.hasOwnProperty(0));       // true  (value `null`)
console.log(array.hasOwnProperty(1));       // false (hole, empty)
console.log(array.hasOwnProperty(2));       // true  (value `undefined`)
console.log(array.hasOwnProperty(3));       // false (out of bounds)
Enter fullscreen mode Exit fullscreen mode

An undefined value is inconclusive with regards to the existence of the property/element within an object/array.

Also note that browser developer tools will mark "holes" in arrays with empty.


> console.log([0,,2]);
    (3) [0, empty, 2]
Enter fullscreen mode Exit fullscreen mode


> console.log([0,,2]);
    Array(3) [ 0, <1 empty slot>, 2 ]
Enter fullscreen mode Exit fullscreen mode

ECMAScript 6: holes in Arrays

The void operator returns undefined.

let count = 0;
const result = void(count += 1);
console.log(count);  // 1
console.log(result);  // undefined
Enter fullscreen mode Exit fullscreen mode
Thread Thread
lukeshiru profile image
Luke Shiru

Yup, Arrays are a special case because when you create a new one, it uses "empty" instead of undefined, because unless you assign an actual value to it, to save memory it doesn't assign anything to it (not even undefined), which is kinda tricky:

const array = new Array(1); // Logs as [empty]
array[0] === undefined; // true; // nothing logs 🤦🏻
Enter fullscreen mode Exit fullscreen mode

Don't get me wrong, I'm not saying undefined is perfect by any means, but from my point of view at least, is far better than null for the reasons I listed. Before ES6, the global undefined was a regular value, so you were able to reassign its value to whatever you want. So yeah, far from perfect, but at least better than his little brother, at least for me.