Singletons are fairly controversial as far as I can tell, especially in Javascript programming. Let's take a look at what they are, when to (maybe) use them, and when not to. What is a Singleton? A singleton is a class that allows only a single instance of itself to be created and gives access to that created instance. It contains static variables that can accommodate unique and private instances of itself. We use it in scenarios when a user wants to restrict instantiation of a class to only one object. This is helpful usually when a single object is required to coordinate actions across a system. techopedia Usually in object-oriented programming the idea is to define classes and create multiple instances of that class, each with their own state. This keeps code and easy to maintain. DRY By contrast, it only instantiates a singleton once, and therefore any code that accesses the singleton will either: Create a new instance Read, update, or modify that instance Which means a singleton is a global instance of a class. Gross. almost I Can't Believe It's Not Global! For the purpose of this article, we will assume we are using ES6 modules in our front-end React or Vue project. An example of a singleton we might want could be: darkMode = ; Settings = { : darkMode = newVal, : darkMode,
} .freeze(Settings); Settings; // Define our state and initialize it let false // Define the functions that will expose that state const setDarkMode ( ) => newVal getDarkMode => () // Disallow new properties on our object Object export default As stated earlier, a singleton is dangerously close to being a global variable, and we don't like those. There is one important difference: The singleton instance : in order to modify state the caller must import the class and use getters/setters. This makes access more explicit and controlled. Not only are the ways in which the state can be modified explicitly defined, but files that use the state must 'import' it. isn't actually globally scoped But Muh Redux Here's my over-simplified opinion in the form of a flowchart: The idea is to use the simplest, most-controlled solution we reasonably can. In order of least evil --> most evil: scoped constants scoped variables singletons redux/vuex global variables Singletons Suck Redux, vuex, singletons and globals all suck. Try not to use them. I'm just trying to point out that they all suck to varying degrees. Good luck. Here are some additional resources on how much we don't like singletons: https://blogs.msdn.microsoft.com/scottdensmore/2004/05/25/why-singletons-are-evil/ https://alligator.io/js/js-singletons/ Previously published at https://qvault.io/2019/11/04/singletons-in-es6-the-good-the-bad-the-ugly/ By Lane Wagner @wagslane Subscribe to Qvault: https://qvault.io

Microsoft

Purity in My Programming: Functions in Go

Benchmarking Array Traversal in Javascript: How to Go Backwards the Fastest

Learn to code on Boot.dev

Nominated for 2022 - HackerNoon Contributor of the Year - Algorithms

Nominated for 2022 - HackerNoon Contributor of the Year - Mathematics

Nominated for 2022 - HackerNoon Contributor of the Year - Cryptography

Nominated for Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Github

Nominated for 2022 - HackerNoon Contributor of the Year - Online Education

Nominated for 2022 - HackerNoon Contributor of the Year - Job Hunting

Nominated for Super Career Strategist of 2022

Too Long; Didn't Read

Make resilience your competitive advantage

Singleton Pattern in ES6: The Good, The Bad, The Ugly

Singleton Pattern in ES6: The Good, The Bad, The Ugly

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

A Complete Overview of Cryptography

10 Things Every Beginner Should Know When Learning Javascript And React

12 Good JavaScript Shorthand Techniques

12 JavaScript Concepts That Will Level Up Your Development Skills

3 Must-learn JavaScript Concepts to Master Before Learning React

A Complete Overview of Cryptography

10 Things Every Beginner Should Know When Learning Javascript And React

12 Good JavaScript Shorthand Techniques

12 JavaScript Concepts That Will Level Up Your Development Skills

3 Must-learn JavaScript Concepts to Master Before Learning React

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps