Null vs Undefined

Is UNDEFINED same as NULL? Or if both are interchangeable?

TL;DR

Imagine a function with the default argument. Sometimes you want the function to take defaults and sometimes you wanted it to be in an empty state. That’s where so-called twins Null and Undefined differs.

Prologue

This topic is about what made me write this blog, feel free to skip to basics of null vs undefined if you are running out of time.

So, its new year eve and I was writing a code and it has to be in production on the same day. As a part of the job, I’ve to get the first name from the given name. So, I wrote the following code.

function getFirstName(name=''){
   return name.split(' ')[0]
}

I know for a fact that either name will be a string or an empty value. And this code makes sense because if args is left empty defaults comes into rescue. But… it's not. As well, it's a bit awkward that I never learnt this basic though I graduated from the world’s best university (Internet 😜).

Dude uses JS everywhere including space and this is how it treats you back… 🤯

Basics on Null vs Undefined

console.log(typeof(null)) // object
console.log(typeof(undefined)) // undefined
console.log(typeof(NaN)) // number

Null is of type object and undefined is well undefined.

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

If you declare a variable its will be assigned undefined by default.

console.log(Boolean(undefined)) // false
console.log(Boolean(null)) // false
console.log(undefined == null) // true
console.log(undefined === null) // false

And both values produces falseness

For primitive type

== does typecast to the same type and compare by its value '6' == 6 is True

=== does both type and value comparison '6' === 6 is False

For objects, it deserves a separate blog.

Differences between Null and Undefined

Try to find the answers

Thanks 🙏 to medium for having a feature like this. How about a code being a featured image?

Space before spoiler

Got it…….

So, the way JS works it will take default args only if they see undefined. For everything else, it goes with the parameter.

An exercise to readers

let name = {firstName: null, lastName: undefined, honorific: ''}
console.log(name?.firstName ?? '')
console.log(name?.lastName ?? '')
//Read twice.. Not the same as above
console.log(name?.honorific || 'Dr.')
const {firstName = '', lastName = '',honorific='Dr.' } = name
console.log(firstName)
console.log(lastName)
console.log(honorific)

For those who are wondering… ?. and ?? are called Nullish coalescing and optional chaining. It's introduced to avoid the shortcoming of short circuting.

Bonus

For those who came this far, well a piece on python

name = {'firstName': '', 'middleName': None,'lastName': None}
print(name.get('firstName', 'Python'))
print(name.get('middleName', 'Beginer'))
print(name.get('lastName') or 'Friendly')
print(name.get('bio') or 'Who said python is any easy!!!')

Well, enjoy your day.