Are You Using Null And Undefined Wrong?

Null and undefined may seem like the same thing, but they are actually quite different. In this video I cover all the similarities and differences between null and undefined.

📚 Materials/References:

🌎 Find Me Here:

⏱️ Timestamps:

00:00 - Introduction
00:52 - Similarities
01:44 - What Is Null
02:33 - What Is Undefined
03:08 - Tricky Parts

#Null #Undefined #NullVsUndefined

[satyasrikar]

“Everything is undefined until you define it”
-Kyle, 2021

[maelstrom]

Another big difference is that in an arithmetic operation, null essentially behaves like 0 while undefined will make the result NaN.

1 + null === 1;
1 * null === 0;
1 + undefined; // NaN

[katemc]

well I hope those who ask this question at a job interview understands the difference themselves lol

[krtirtho]

You can explain that pretty easily with a JSON file. Where if you do:
*JSON.stringify({foo: undefined})* // outputs "{}"
but if do this:
*JSON.stringify({foo: null})* //outputs '{"foo": null}'

This perfectly describes the behavior of null & undefined simply

[reach]

This is a basic concept, but many people are still confusing about it. Thank you for explaining in a clear and easy way to understand.

[EscherSketcher]

One gotcha is with Default Function Parameters. Null would not get the default value, but undefined will.

function log(a = 'hi') { console.log(a) }

const u = undefined
log(u) // 'hi'

const n = null
log(n) // null

[smartypantscoder]

I use null as a third value to the booleans apart from true and false.
Assigning a null value to a boolean in my book means, we checked but couldn't be sure if it was true or false.
While undefined variable could mean we didn't bother checking anything in the first place.

It's a handy convention.

[sumitmukharjee]

Currently, I am binge-watching your Javascript videos like this and yeah, I have learned many simple things which were tricky to understand. Thank you so much!!

[TanelM]

JSON doesn't have the "undefined" value, so JSON.stringify({a: undefined}) will result in an empty object, not the case with null tho.
In addition ({a: will return true AND [undefined].length will return 1.
So in JS there's even a difference between a value that's not defined and a value that's defined as undefined.
What's even more funny is that JSON.stringify([undefined]) returns "[null]" 😅

[adityatripathi]

Anyone who started learning programming with a strongly typed language should know this already. Your hard work didn't go in vain my fellow comrades.

[friedec]

Null is bad enough that people nowadays don't use it.
Javascript: introduce undefined

[michellegiacalone]

"I am naming this dog 'Unnamed'."
"Well, now Unnamed is a name."
"Oh. Uh..."

[necrorifter]

I just assume the difference is that null means there is nothing while undefined means there is a variable or something but there is nothing attached to them or otherwise "empty".

[mdyarafat]

Hea, i've started learning js, you upload it the in the right time

[markmathur]

What you say makes soooo much sense!! Thanks for the enlightenment!

[geekthegeek]

😍 dude you are really simplifying the web

[this.channel]

Great job at explaining the differences.

[cs-codemon]

Day by day wds's video are becoming more funny 😄 I liked the start

[NetherworldBibliotek]

When my console logs 'x is undefined' it usually means there's a typo in my code.

[thethirdrace]

While the semantics totally makes sense, in reality you rarely need to know if the variable has been defined with no value or if the variable has NOT been defined at all.

What you really need to know in practice is if the variable or property has a value or not.

Given this concept, using `null` has huge downsides:
- you introduce a third typing to your variables => a lot more code to validate (ex: string | undefined | null)
- you're actually hinting that you made sure to actually define a variable with no value, meaning I should check if there was a reason for that => I'm gonna waste a huge amount of time chasing ghosts because you couldn't be bothered to tell me explicitly that initializing the variable had no meaning beside your own personal preferences

`null` is for a very very specific case: you want to track that the variable exists AND that you specifically set it to no value. This will actually happen maybe 10 times in your entire JS/TS career.

My advice is to stop over-complicate things and just use `undefined`. It will simplify testing conditions everywhere.

And a bit off-topic but related, try as much as possible to define your data with as less typings as possible.
[ Examples ]
`string | undefined` is much simper at every level than `string | undefined | null`. Not to mention `string | null` would be an atrocity because it's pretty sure at some point a property in an object would be undefined so it will eventually turn to `string | undefined | null` and you'll be back to the huge pile of problems.

`boolean` with a default value is always better than `boolean | undefined`. Pick a default value and deal with it at one place instead of having to test the typings at every single condition throughout your code.

Same with `Array` or `[ ]`. Never use `undefined`, always use an empty array instead. You'll deal with the problem once at initialization instead of having to test if the array is undefined everytime you want to use the data.

It's always better to deal with the problem at the source than patching everywhere down the line...