Hasty Treat - A Podcast About Nothing

Tolinski.

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,

Monday. Monday. Monday.

Open wide dev fans. Get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing,

So if you have a form where You normally put a prevent default on the on submit, but you could also use JavaScript void

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

which is kinda interesting. I've never used it myself. But if you have a function that returns

specifically, and this is the never type.

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

Totally. Yeah. Alright. Well, let's talk about the next one, which is going to be within TypeScript The error log, This is the place where you can See, all of your bugs happen in a visual scrubbable video replay.

normally.

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 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.

then I'd code up on submit handler and and prevent default anyways, but Kinda interesting. Interesting.

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, the 0 equivalent 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

So with useEffect, if your useEffect function returns anything,

people all the time, they say put it on a link like a ref equals Inside of a useEffect.

I,

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.

Avoid can be used to ignore the returned values of a function, The last 1 we have here is Undefined 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.

what is void? Void is basically,

to look at a That's it. Var Scott semicolon.

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 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 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 and you will get 14 days for Free. So check it out.

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

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 so that is Explicitly nothing. Nothing is null until you That's what void is. A void is when You don't care about what comes back or it returns nothing undefined, 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,

or keys on an object, and then To its original state of not being set, then you set it to be undefined.

you an array of all of the properties Wink. That's it.

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 If true is equal to false,

in BigInt. So I thought that was interesting.

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

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.

gonna put me into a weird place mentally.

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.

CSF. So JavaScript does have this concept of falsie values, meaning that, like, we obviously have false values, which is false, 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.

What's the deal with

It is very easy to get up and started. So check it out at log rocket.comforward/syntax, 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.

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

void?

Alright.

pieces of content that can be added

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, Head on over to syntax.fm

by 2 awesome companies, Prismic and LogRocket.

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.

Yep. We're gonna be talking all about nothing in this episode,

and I'm not talking about

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 On the on submit, I don't think I would use that because I if I don't want the form to submit normally, 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.

to click together different pieces of content in order to make a page. Right? Mhmm. And if that's the case, 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

slices. I'm gonna talk to you about that. And they allow you to define dynamic

and null is a value And the sync function, even if it returns nothing, You can't just give them very rigid, like, here is your title. Here is your hero.

explicitly go and set that thing to be null. So what's the difference between null and undefined? 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 but never

Null explicitly has a value of nothing.

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

of nothing. Yeah. It's a show about nothing, 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 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, as your useEffect 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 CSF.

if a value is either set to null or undefined. Let's talk Let me tell you a little bit about Prismic.

undefined to you, meaning that it did not return anything. So I like the thing of undefined as being implicitly

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.

nothing, function because 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

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.

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 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, has been created,

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

is when the function will

then let var equals this will never be set,

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

then I don't know. I've never run into that. I've Never run into that. Yeah. But that is 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 and repeatable 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, You don't want it to submit JavaScript

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.

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.

and never meaning that function will never actually return a value.

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

like, A value. I mean, it can be set as a value, but, like, undefined means that the variable but it has

The value of Scott therefore then becomes 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 does not have a definition.

is, is Now sometimes people feel like undefined Gives you access to the network log,

undefined. The variable has been created, but not yet set. Same thing with a function that returns nothing will return 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.

Not been given a value. It is undefined.