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

The "Singleton 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 Singleton Pattern challenge. Questions about the pros/cons for instantiating from a class versus an object and ES2015 default singleton modules are also covered in this segment.


Transcript from the "Singleton Pattern Solution" Lesson

>> So from the start we're first going to create a variable, oops, sorry, this pop up is the instance. So by default this does just nothing, we don't have an instance yet hopefully. But if we do require a new one we wanna set the instance equal to the new instance that we just created.

Now if we do see that there is already an instance when we create a new instance we just throw an error. So throw a new error, you can only create one single database connection. Then we have the connection here, but we actually just want to say we always just use the same URI and we know what that is.

So this connection can just be an object dot freeze. And right now connection is a singleton. We make sure that there's only ever one single instance, throw an error if it's not, but most likely we will never really cuz we aren't exporting it. So it's not like other files can import this database connection class without the singleton now.

So we can then do export default connection. So really we would only ever see this error if within this file, we maybe say new DB database connection. But I mean, hopefully you won't do that. So yeah, database is now a singleton.
>> What are the pros and cons of instantiating the object from a class versus directly defining the object in this pattern?

>> In this case we could have just created an object. However since we're also using that URI here, so in this case this connection, actually I will open it up, sorry. I keep forgetting to open up a new Steglitz. So for an object let's see what this would have looked like.

Const, database, connection, object dot freeze. So we want to have a URI here. Maybe what we could do is create a function that takes URI, so then we have connect. URI has been connected and we have a disconnect. So DB is disconnected. And then we can just have that URI here if we want to.

So now this could have worked so now the connection could be is database connection and then we pass the URI here which is this Mongo DB, Cuz this returns an object right away. This is an arrow function that immediately implicitly returns an object here. So that also could have been the case.

It was just easier to refactor this with the class that was already there. So now we can do export default connection. So yeah.
>> I have one question. So you mentioned that explicitly creating singletons is less necessary now because now ES 2015 modules are singletons by default, could you say a little bit more about that?

>> For sure.
>> So for example, I'm just going to use the same file that we have here. I'm just going to create a counter. So we have counts but default is zero. Now if we wanted to have maybe a function that's increments, we actually want to export this.

So this returns return plus, plus count. So this returns the counts incremented by one and maybe we also want to have an export function decrement return minus, minus count. And then also let's just have an export. So I'm just gonna create another file, I'm going to import this counter module into files in that case.

So file1, file 2 or I could just, I'll keep index here. So import counter increment from counter.js. Now I can do increments and then log the counter. Right, I forgot. Like I said I always forget to do this, I type module. It's count. [INAUDIBLE] I am here. Increments, not increments.

Okay, so right now count is two. But if we were to also import this and say file 1, we will just do something pretty similar so we are going to Import increment here and just increment it twice. And then in index, I might also import, say, import file1.

So what this does is it immediately imports the file when we run this code and it also executes this file. But within this file we also increment count twice. So now you can see that count is four. So we import file 1, which also imports the singleton module.

We didn't declare an actual singleton here, we just used a module we export it counts, we export it increment and decrement. And you can see that even though we only incremented it twice here because we import file 1, which also increments it twice, count is now four. And this is usually kinda what they mean with side effects as well.

Because it may not always be obvious that within file 1 we are incrementing the count by two. So then you're login count you're like, why is it not two? I only incremented twice. So this could easily happen with those side effects that you may not always be aware of.

So yeah, just make sure that if you ever run into an issue like that, this might be the problem. I've definitely had that before.

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