A Tour of JavaScript & React Patterns

Factory Pattern Solution

Lydia Hallie

Lydia Hallie

Lydia Hallie
A Tour of JavaScript & React Patterns

Check out a free preview of the full A Tour of JavaScript & React Patterns course

The "Factory Pattern Solution" Lesson is part of the full, A Tour of JavaScript & React Patterns course featured in this preview video. Here's what you'd learn in this lesson:

Lydia demonstrates the solution to the Factory Pattern challenge. The differences between factory functions and classes are also discussed in this segment.


Transcript from the "Factory Pattern Solution" Lesson

>> All right, so let's look at the solution for this one. I'm just gonna go to the books js one and in here I'm just going to create the factory function. I can sign in, so export, well, we can just keep it in here. So const createBook, I'm just gonna say this is gonna take a title, an author, and the ISBN number.

And this returns that title, author and ISBN. I'm not going to add any other properties although I could have, in this case I won't. So this is book one. We can actually just say createBook, Harry Potter, JK Rowling, and AB123. I'm not going to type this out for all of them.

Let's see we've got other Harry Potter's here, book four, Just going to create that one. So this is the Great Gatsby. The Great Gatsby. Okay, I cannot say about that name. I'm lazy and then CD456. Okay, well, this isn't enough books for me. I'm not going to change all of these, it takes a bit too long.

So right now we've just created those books with a create book function, so instead of having to create that object every time, we know that all these books that always have the same structure, they always have the title, the author, and ISBN. So when we go back into index now, you can see that we, again, import books.

And we have the exact same objects as we had before. But this time, at least we know exactly the object that will get returned. We don't risk accidentally creating typos, if we had a book five, that's like Thai total or something which totally could have happened. So yeah, that's all like type safety.

And yeah, so if we wanted to add any other properties based on the arguments that we pass, it's super easy to do that with the factory function. But luckily, it's very easy in JavaScript to to create that. Any questions?
>> If you use the class to implement this instead of a function, will this still be considered the factory pattern?

>> So that would more be the prototype pattern, which is what I'll be covering after this. So using a class in this case and then, well, so we could have used a constructor here. So we could have said like class Book is constructor, title author, isbn and this again creates the exact same thing.

I won't type this out now. Cuz I know I will have typos again. Yeah, we can also of course create new instances of a book. Well, actually I will just finish it. So this title is title and this author is author. This isbn is isbn. And instead of saying the create book here, because I'd like export const book five is new Book, so we get a new instance of this book which is, I don't know, I'm just gonna do Harry Potter.

So you could have totally done this. Personally I prefer just having the more concise syntax whenever possible. However, using classes does have some benefits, which we'll talk about later when it comes to memory. That's part of the prototype pattern, but if you prefer this syntax over the regular object, that's completely fine.

They both pretty much results in or yeah, they both pretty much have the same results. It's just that this is not actually an instance of book. So when we run this, let's see. You can see that this is actually like book instead of just a random object. It's an instance.

Yeah, whatever floats your boat.
>> Would you consider the old school way of creating a class in js as a factory pattern?
>> Like we're doing here, I guess it could be considered a factory pattern but a factory is more like we have a function, we have a factory function that returns an object.

And just returning a class here, it's not a function, we're just creating instances. Now maybe if we had a function that says, create book which returns a class, then I would consider it a factory pattern. But with a normal class and like creating instances, it's not necessarily a factory pattern.

But again, these patterns come from different languages, usually like languages that, where it's not easy to create many objects. So yeah in JavaScript, especially nowadays, the factory pattern is still usable, it's obviously usable. It's something that you might just implement not knowing that it's called the factory pattern.

But yeah, it's the official implementation. It's not, the benefits are not the same as for other languages like Java or C++, all that stuff. So-
>> I think they were talking about before we had the class keyword we used to do new function function capital book.
>> Yeah, like that.

Yeah, that would definitely be considered a factory function in that case, instead of creating new instances. At least if I'm thinking of the right thing, cuz I think, I mean, I won't type that out now. Yeah, you could create a function that then returned an object, either explicitly or implicitly, which would be considered a factory function, yeah.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now