Hasty Treat - A Podcast About Nothing

Monday. Monday. Monday.

Open wide dev fans. Get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing, soft skill, web development, the hastiest, the craziest, the tastiest TS, web development treats coming in hot. Here is Wes, Barracuda, Boss, and Scott, El Toro Loco, Tolinski.

What's the deal with void? In this episode of Syntax. This is gonna be the show about nothing, and that's the Seinfeld joke off the top for you. That was my my best Jerry that I could do.

CSF.

Yep. We're gonna be talking all about nothing in this episode, and I'm not talking about absolutely nothing. I'm talking about No, undefined, void, false, 0, none none none bread, empty arrays, empty objects, never. All sorts of values that could mean things that do not exist. In fact, I would love to have a 0 zip, not a inside of JavaScript as well. My name is Scott Tolinski. I'm a full stack developer from Denver, Colorado, and with me as always is the Wes Bos. Hey, everybody. Today, we are sponsored

by 2 awesome companies, Prismic and LogRocket.

Let me tell you a little bit about Prismic.

Well, you know Prismic. It's a headless CMS. It gives you a GraphQL API. You log in, integrate your content types, and it gives you API out the other end. They have a A new ish feature that is called slices. I'm gonna talk to you about that. And they allow you to define dynamic Zones to allow your content writers to compose richer page layouts. So this is actually a problem I used to have in a lot of CMSs where You want to allow people to click together different pieces of content in order to make a page. Right? Mhmm. And if that's the case, You can't just give them very rigid, like, here is your title. Here is your hero.

You can upload 1 image and a call to action text. Right? You You want to be like, alright. Well, I want a call to action button here, and I wanna embed a video here, and I wanna have a gallery where I can upload multiple pieces. That's not like a content type. Those are just collections of different parts of a page that can be added in any order. So it's really slick because Prismic has added this thing called slices that allow you to Have both nonrepeatable and repeatable pieces of content that can be added in any given time, and It makes it I think it kinda makes it like a a page builder. So I want you to check out Prismic and their new slices feature at prismic.ioforward/syntax, and they've got A whole bunch of really good examples on there. Thanks so much to Prismic for sponsoring. Cool. And this show is also sponsored by LogRocket at logrocket.comforward/syntax.

This is the place where you can See, all of your bugs happen in a visual scrubbable video replay.

Gives you access to the network log, The error log, the Redux store, if you have 1. It also connects with all of these services that you know and love. In fact, there are so many services that it connects with. You can just Check out their list on logrocket.com, and it's gonna show you exactly how it can connect it with all of these services that you probably It may already have in your application already. Now it also works on premise or in the cloud. I use the on cloud version myself.

It is very easy to get up and started. So check it out at log rocket.comforward/syntax, and you will get 14 days for Free. So check it out.

Alright.

Let's get into this whole thing about nothing. Right? And I think the easiest one to start off with is undefined.

Now sometimes people feel like undefined is, like, A value. I mean, it can be set as a value, but, like, undefined means that the variable has been created, but it has Not been given a value. It is undefined.

It does not have a definition.

So if you are to create a variable, let's Say you say var Scott.

That's it. Var Scott semicolon.

The value of Scott therefore then becomes

undefined. The variable has been created, but not yet set. Same thing with a function that returns nothing will return undefined to you, meaning that it did not return anything. So I like the thing of undefined as being implicitly nothing, meaning that you've created it, but you've not yet set anything to it. So it is implicitly nothing. Whereas on the flip side, we also have null, and null is a value of nothing. Yeah. It's a show about nothing, so that is Explicitly nothing. Nothing is null until you explicitly go and set that thing to be null. So what's the difference between null and undefined? Null explicitly has a value of nothing.

Undefined does not have a value. So null is a value of nothing. Undefined does not have a value.

You can set variables to be either, but that's where it gets confusing to people because, like, okay. I get it. But what about if I wanna set something to be nothing? Like, I have a variable. I wanna set it to be nothing.

You can set either to be undefined or null. And the way I think about it is if you wanna set, Like a score variable to nothing, then you set it to null. If you wanna unset something, meaning bring it back To its original state of not being set, then you set it to be undefined.

And then finally, I always like to mention this when we about them, the double equals, that's the one time where you could use a double equals, and that will allow you to check if a value is either set to null or undefined. Let's talk

about void. Now I don't know how much you've seen void in just normal JavaScript because I see it all the time in type definitions.

You know me, I've been used things like, React 3 Fiber, React Spring a lot. Yeah. And the guy who created both of those, Paul Henchel, He uses void somewhat frequently in his JavaScript code, so it's very funny. Sometimes I'll be on, like, code sandbox to look at a An example of code that he's written. It's funny that I pull out him directly as an example. I don't know if he would even see himself this way, but, like, As if this is some sort of an identity. But I, I noticed the most that I saw void being used was in a lot of his CodePens, and I would always be like, what what is this void? Like, what's going on with void? So what is void? Void is basically, In my understanding of it, at least the way that I've used is you use void when you want to say this function that returns void. It returns absolutely nothing. And, primarily, you'll see it being used a lot in TypeScript capacity, being used in, like maybe you have, like, a React State function, where that state function is setting the state, but it's not necessarily returning anything. So when that function gets passed into another component, you would define that as, Well, it could be just a function that accepts these parameters that returns void. Yes. It returns nothing. So in JavaScript,

Avoid can be used to ignore the returned values of a function, which is kinda interesting. I've never used it myself. But if you have a function that returns 3, a number, you can before you call it, you can write like, let's say you have a function called get a number, and that function returns 3. You could say void, get a number, and then that will always return undefined no matter what that function does. So it allows you to mark it as that. One kinda neat example I did see I asked on Twitter is that you can pop it in front of a in a sync function Inside of a useEffect.

So with useEffect, if your useEffect function returns anything, that is then used as the cleanup function. When this thing Unmounted, run this function, and that can get you in hot water if you have an async function as your useEffect function because And the sync function, even if it returns nothing, it always returns a promise. Right? Because if you mark a function as a sync, It will immediately return a promise. Right? That's the default there. That gets into trouble because you can't have an async function and use effect, which is weird. So some people said if you just wanna do something on component mount and you don't care about updating and you don't care about unmounting or or Cleaning up, then you can pop a void in front of it, like fetching a list of people or fetching some data on mount. You could pop a void in front of it, which I thought was interesting.

The last 1 we have here is people all the time, they say put it on a link like a ref equals JavaScript Void. Oh, yeah. I guess I have seen it that way. Yeah. You shouldn't be doing that, though, because if your links go to nowhere, They shouldn't be links. Right. They should be that's accessibility issue that screws with people's tabs. It should be a button if that's what you wanted to do. So you can do that. And another thing people said is you can do, like, a quick and easy prevent default on forms.

So if you have a form where You don't want it to submit normally.

You normally put a prevent default on the on submit, but you could also use JavaScript void On the on submit, I don't think I would use that because I if I don't want the form to submit normally, then I'd code up on submit handler and and prevent default anyways, but Kinda interesting. Interesting.

Totally. Yeah. Alright. Well, let's talk about the next one, which is going to be within TypeScript specifically, and this is the never type.

No. Never is interesting to me because every time I see it pop up, I'm like, I don't necessarily understand in which case you would create something that will never.

It's a little bit confusing because never it really means exactly like what it will sound like. So the way I see it is that Some functions will never return, and that's not to say some functions return nothing. That's undefined.

That's what void is. A void is when You don't care about what comes back or it returns nothing undefined, but never is when the function will Never return anything. In the cases of that happening are if the function throws an error. If you throw an error, that function doesn't return anything. It it's frozen error, and you have to deal with the error. Or if you have infinite loops like a while loop, that's when you would use it. And then, finally, I found if you have an unreachable variable Oh. Like, if you have an if statement, If true is equal to false, then let var equals this will never be set, then I don't know. I've never run into that. I've Never run into that. Yeah. But that is the reason why they are there, and I could see it with functions. There's a differentiation between void, Which is that you don't care about the return, and it is on a fine and never meaning that function will never actually return a value.

Yeah. And I've never written a never type myself.

Me neither. A lot of the tools that I've used to generate them or generate types have popped in and never here and there, and I see it in my own types or I see it in third party libraries types. And I'm like, okay. It never has a value or I think think I understand it a little bit better now after talking about this. I don't know if I would jump to write it. Maybe it's one of those things at the moment you have a use case for it that all just clicks into place.

So you have a note here that we wanted to talk about faulty values now, and, like, this is just sort of, like, other faulty values.

And this is really funny here. So, like, 0 and negative 0, I did not know that you could have a negative 0. Yeah. Me neither. I don't think I have ever had that. I've never even thought about the idea of negative zero, And really spending too much time thinking about negative 0 is gonna put me into a weird place mentally.

CSF. So JavaScript does have this concept of falsie values, meaning that, like, we obviously have false values, which is false, But then we also have other values which are equate to false, meaning that if you use them in a conditional, like an if statement or something like that, They will evaluate to being false. I mean, 0 negative 0. I also learned 0 n, which is the big int. If you're ever working with big numbers in JavaScript, there's some max value that numbers will go to in JavaScript. If you need to go bigger than that, you have to use BigInt, and 0 n is the 0 equivalent in BigInt. So I thought that was interesting.

Now it's interesting here. I have an obscure falsie value for you. Yeah. False.

Yeah. Yes. False. False is falsie. Which is so as an empty string, which is, You know, I always love when an empty string is equated to false because, like, it makes it a lot easier to not have to check for the length things or whatever.

It's just one of those things where you're like, oh, yeah. Strings have got my back. An empty string, obviously, it's gonna be falsy. Right? Other things we have people asked The boat was, empty array is not falsy. An empty array is a value. It's just empty. Right? But if you wanna check If an array is empty, an array has nothing in it, then you check for the length attribute, and that will return a number. And then like we said, 0 is a falsie value. So an empty array on its by itself, not a falsie value, but its length of 0 is falsie value. Yeah. If you ever see that if And if statement, and they're just checking for if blank dot length, then they're basically saying, hey. Is this thing empty or not? And, likewise, an empty object is a truthy value. An empty object is still a thing. It still exists. Right? Unlike, an empty string which Exists as the thing, but it equates to false. An empty value will exist as an object, and, therefore, it is equal to true. If you want to check if an object has things in it, you can just use dot keys or object dot keys and pass the object. And what that will do is it will return you an array of all of the properties or keys on an object, and then that will. Furthermore, you can use the length on that to check if there are values. So you would say if object dot keys my object dot length, And that will tell you if there is anything that has been set on the actual object. And you also don't have to worry about like prototype pollution. That used to be the case when we used 4 of loops In objects, if you had any custom prototype methods on that object, then that object might not have the property itself. But the thing that it it was Instantiated from or constructed from will have it on there, and that's not the case with object dot keys.

Wink. That's it.

Alright. Thanks for tuning in. I appreciate it. Hopefully, you learned a thing or two. Come back to reference this one. There's that's a definite interview question to explain the difference between undefined and null, And, we'll catch you later. Peace. Peace.

Head on over to syntax.fm for a full archive of all of our shows. And don't Forget to subscribe in your podcast player or drop a review if you like this show.