Hasty Treat - Enums in JS (GraphQL and Typescript)

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 web development treats coming in hot. Here is Wes, barracuda, Bos, and Scott, el Toroloco, Tolinski.

Welcome to syntax in this Monday. Hasty treat. We're gonna be talking about enums in JavaScript. This might be a word that you've seen before and don't know, or maybe it's a word that you don't know and have no idea, or maybe you are up on enums. But we're gonna be talking all about enums, what they are, how you can use them, and, a little bit about what their situation is in JavaScript. Node I personally use them in TypeScript. So my name is Scott Tolinski. I'm a developer from Denver, Colorado, and with me JS always is the 1 and only Wes Bos.

Hey, everybody.

Hey, Wes.

This episode is sponsored by LogRocket.

Now LogRocket is the error and exception handling tool that will allow you to see the errors and exceptions and anything that happens on your site happen in real time. It's very cool. What it does is it records a what they call a session replay of the error happening in real time. Your user clicked on that button and the thing didn't work. And you know what? Maybe they just left. They're gonna say, I'm gonna I'm gonna buy John's special sauce. I'm gonna buy it. I click the button. It doesn't work, and I say, you know what? I don't need John's special sauce. I don't need it. So I'm gonna see you later. And you might not know about that error because they didn't contact you. There was nothing popping up in your email to let you know. But what LogRocket does is allows you to see them click on the button and actually see the error, the network tab. It allows you to see the console. It allows you to see everything that you would expect to see. I mean, the Redux store, it works with all of these tools that you know and love. It is so very cool. You're gonna wanna head over to log rocket.comforward/ syntax. Sign up, and you'll get 14 days for free. Again, this is one of those services that is very, very cool. Super, super into it. So check it out. Logrocket.comforward/ syntax.

Enums.

So you crafted this episode, and it's funny. You were putting this episode together, and the whole time, I thought you were you were making an episode on the addition of tuples and records in JavaScript.

And so, like, when we came to the table, we went to record it. We're like, wait. There's 2 episodes here. These are obviously not the same thing. And, we both had a different idea about. So Wes put this episode together. So do you wanna kick it off?

Yeah. I thought we'd do this episode just because this is a word that gets thrown around. It's probably a word that will get asked in an interview, and it really isn't all that. It sounds scary, but it's just a list of possible options. You can turn it off. Thanks for coming. Yeah.

Do you know what the core of the word pnpm is? Enumeration? Yes. Enumeration. The definition of an enumeration is the action of mentioning a number of things 1 by 1.

Oh, interesting. A complete enumeration of all possible genetic states. Give you some context there.

Let's get into it. So enums are a type, and we're gonna talk about enums in GraphQL, TypeScript, and JavaScript to just sort of, we'll go through each Node, but we'll talk about them in general because they're pretty much Node every programming language, but a lot of programming languages have enums in them. So they are a type where only possible options are from a set of predefined options. So that makes it easier to document all possible options and make sure that you don't run into weird edge cases. So Misspelling.

For example I'll give you an example out of my own life. I was working on my course platform, and when I add a new course, I create, like, a product code with it. My master Gatsby course is g a t, GAT.

And when somebody signed up for the course, it for whatever reason, because I hadn't filled out all the the right things, they signed up for it, and the the product code was wrong. But it still sent them an email, still signed them up, and then when they went to watch the course, the course platform broke.

So if I would have had the list of possible courses in an Pnpm, that type would have that would have failed that check there and said, hey. That's that's not an actual like, a a really good example. Undefined is not a possible option out of this pnpm of courses.

So a couple other examples we have here Yarn directions. Up, down, left, right. Those are the only possible options.

A role. I've used a role in a bunch of my courses where we have admin, editor, author, and viewer. Those are the only 4 possible roles that someone can have. Day of the week, there's only 7 days in a week. You can't make up your own name. And if somebody tries to set it to sun instead of Sunday, then that will throw up an error and say, hey. That's not one of the possible options. Everybody

get your roll on. Everybody get your Get your roll.

I I you know what? The thing that helps me visualize enums the Wes, just about every single time I have an

Vercel. The way it manifests itself on the front end of the site is in a select list. Right? Yeah. You're right. That's that's a perfect way to to visualize it. So enums can be in GraphQL.

The way that you do that is just pnpm role. So if you're creating a type in GraphQL, you create a type called Node and you say it's an pnpm type. And then the possible options are admin editor, author, viewer.

Then when you go and define your data type like a user, you can just say the role is not an object or a string of of the role. The role is actually a type of Node. And then then then when you go ahead and set it, it will yell at you if if something goes wrong. That's Scott of the beauty of of having a a type system in general, though, isn't it? Totally.

Yeah. Right. Once you get into type system like, at 1st, you're like, I don't want the Yarn. But once you get into type systems overall, you you you finally understand what a real developer have been talking about all this time about types being very, very, very good. Now my whole system is typed. Right? TypeScript on the back end, TypeScript on the front end. We got GraphQL typed our queries. And you know what? It is so fantastic when the thing yells at you Wes the when you didn't do the right thing instead of it just ignoring the fact that you didn't do the right thing.

So for me, types up and down the systems and enums are one of those things that, I really, really do love, in my GraphQL and my TypeScript system because they they are suddenly the same thing. The only problem I have here is, like, when you get into JavaScript and you you have to look for something as like a a string of an enum. Do you know what I mean? It's like you use the all upper case, and then all of a sudden it's a string. So to me, that, like, always feels very weird.

Yeah. Totally. I have run into situations like that, or I've done it in JavaScript before Wes you have to import the thing from a package and then compare it against like if it is this thing that you've imported from a package, then then it is true. You can't just use a string,

in order to check it. And that's I don't think that is true in TypeScript, is it? You can do them a couple of different ways Wes you can do, like, an enum. Like you said, direction is up, down, left, right, whatever, all caps. But then you can also do pnpm. This is as a string, which is how I do them. Because to me, it makes more sense, but I don't know. So you do pnpm direction, and it's like up is equal to all uppercase string of up. Down is equal to all uppercase string, and you you write it like that inside of the enum object thing, and that's how you type that. So that's typically how I'm doing it, or you can do something, like, weirder ones Wes, like, no is equal to 0, Wes is equal to 1, that kind of thing or something. Oh, yeah. Yeah. That's more like a like a dictionary where you set it to this, like, hard value. And then if you want, like, the user displayable value or if you wanna be able to look that up in an object or a map or something like that, you can. And and I wonder, like, how does this fit in with the new additions that we're getting with records and tuples? We're like a record for those of you who remember the last week's Node. A record is an array where the things are always the same thing. Right? So, like, part of my brain says, like, is this pnpm the same thing as a record? I mean, I don't think so. No. Is it the same as a I don't know. I don't I don't know. Maybe can you use a tuple as an pnpm? I don't really know. I guess Wes I need to get some of that programming, like, really dive into languages that have some of this stuff a little bit better. Like I said, I've been learning Rust, and there there's, like, a 1,000 different data types. So yeah, the I guess the, like, declaration

of the pnpm could be done in a tuple or a record. And then the the lookup of the possible values JS still that needs to be checked. Right? Like so we should say JavaScript. It's not in JavaScript yet. There are ways you can do it. You can use a case switch. That's probably the most popular way to do an Node Wes, case switch will go through all there or or even just an if else statement. We'll go through all the possible options.

And then if it if it's not in one of those options, then you either have a default or you throw an error or something like that. There are proposals in stage 1, so very early days, for adding enums to JavaScript, which is kind of interesting. We'll link that up in the show notes JS well as there's a Babble plug in, which I probably would not throw into your, $51,000 a week. So it's a pretty popular Babble plug in, so people are using these already in their JavaScript.

Yeah. It's interesting. Like, as somebody who's been writing TypeScript for the past little bit, it's it's we're sort of in this weird world where, like, so many people are using TypeScript right now, and, like, TypeScript has, you know, well, like, so is JavaScript going to adopt, like, everything that TypeScript adopts? Does it lag behind? JS it like what does that connection look like in the future between TypeScript and JavaScript? As TypeScript evolves and continues to, like, improve or change or whatever, like, what happens to JavaScript? Like, how much of it does it adopt, and how much of it does it,

Wes know, let it be a TypeScript thing? Yeah. I hope that it it does. It does. I'm just like like vanilla JavaScript adopted almost everything good out of jQuery.

Probably will say, all right, we've had this TypeScript thing for 3 or 4 years. People

love the way that you use enums or whatever in in TypeScript. So how do we add that then to to regular JavaScript? And I went from somebody who largely ignored TypeScript, mostly because I wanted to see who the quote, unquote winner was between Flow TypeScript and, Reason and whatever. And and it's clear TypeScript has gotten the market share. Right? So, like, now TypeScript is the quote, unquote winner. So now that I'm so interested in TypeScript, I've gone from somebody who doesn't necessarily care too much about it to somebody who's like, TypeScript should just be JavaScript. You know, like, it should just Build it into the browser. JavaScript should get types, and it should get enums, and it should get all this stuff. And what a what a weird transition that's been for me, to to to Scott be like that because it's funny to look back. I I'm sure I would cringe pretty hard on some things I said in older syntax episodes. Oh, yeah. We all do. Yeah. That's life. Just the things you Deno. Node. Yeah. No. In fact, to laugh about that specific point that Wes said, we were like, well, maybe we should do an episode about things we were wrong about. And Wes is like, I'm not wrong about anything. So then the episode has been sitting in our episode list of potential episodes to do. It's just titled stuff Scott was wrong about.

The thing about me is I'm never I'm never super opinionated about things. Like, I I've how obviously, I have my opinions, but, like, if somebody wants to do something else, then I say, yeah. Oh, that must make sense for you. Go for it. You know, like, I I'm not one of these people that goes on these, like I I remember when observables came out. There were some super strong opinions on either end, and people Yarn fighting about it. And I was just, like, like, reading these tweets, being like, wow.

Wow. Imagine

like, I care about it, but imagine being that angry when somebody else doesn't care about it. Yeah. I know. It is weird, the fever in which people will defend some of these things, and it's like you're insulting their children or something. Like, I mean, the only thing that I'm gonna be getting that fired up about is these black widows I got in my backyard Yarn are threatening my kids right now. Like, that is what I'm fired up about. Thought that was gonna be a sponsor transition or something. It could've been.

Alright. So that is enums in JavaScript. Hopefully, that helps you with a, thing or 2 in your next, interview or whatnot, and, we'll catch you on Wednesday.

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.