Named vs Default Exports

[00:00:00]
>> Ben Hong: There are two different ways that you can write your composables, and this is just a JavaScript thing. But I want to be explicit about it because it's an easily overlooked thing if you're newer to JavaScript and that you do named exports versus default exports. So what do I mean by that?

[00:00:13]
So, you might have noticed in my useTask composable, I explicitly export every single thing that's in here. This is what they call a named export. And the reason for that is because you're basically naming every single export that you expect to export out of your composable. The alternative here is you could do something like this.

[00:00:35]
You can do export default, and there's like a function, and then the function then returns. Okay, so this is how this would look. Whoop, don't export, don't export. And then we return filterTasks and formatTasks label. Okay, so in this one you'll notice rather than explicitly exporting constants or expliciting functions, I just have this unnamed function that's being exported with this keyword default.

[00:01:22]
The difference is when you're importing it, you'll notice. First of all, this is broken now. And it's because by using the default, what you're doing is you're saying this file contains this blob of a function and you can call it whatever. So, in this case, I'm just gonna be consistent though.

[00:01:38]
I'm gonna call it use task and then I'm gonna import it from composable slash use. I think that's what I did, yes. Then what happens is usetask is a function that then exposes the stuff inside. Okay, so why does this matter? Why are we talking about this? Well, one, because the two offering formats do show up and I want people to be able to make explicit choices behind what they're doing.

[00:02:08]
And so if I could make a case to you as to which one I would recommend is, I would actually recommend the named one over the default export. The reason for that is because the default export has this blobbiness about it that basically says you can name it whatever you want.

[00:02:27]
So I might name it use task, someone else might come along and just say task feature. There's nothing stopping anyone from doing differently because you're naming the blob that's coming back to you from your default export. Because it's unnamed to begin with. But if we go back to the original.

[00:02:43]
Actually, let me do this, let me do. Let me comment this out and then take these two again. All Right, so then what we'll say here is, okay, we export them explicitly. Filter tasks, export the format stylus label explicitly. And then I'll make a note here. This is called a default export example.

[00:03:17]
What I love about this is that once you have your composable, like you have your import. Wait, did I do something wrong? Yes, I did. Your stuff is basically the autocomplete is there for you. And so, there's no one ever deciding, like, actually I'm gonna name it something differently.

[00:03:41]
And then so you might think, okay, well then name collision. Right? Like, what if someone else has something called filter tasks? Well, that's totally fine. You just name it something different. NewFilterTasks. Wait, as new filter task. Sorry, I forgot that's the syntax. So then now you can use newFilterTask.

[00:04:07]
So, to me, the named exports provide consistency, yet you're autocomplete and you don't get naming collisions. And so it does seem to carry all the benefits that you would expect. Now, granted, we will learn about functions inside of our composables later, but this is kind of like the foray into it all.