Unleashing the Power of new.target in JavaScript: An Epic Adventure of Quirky Variable Names

Javid Salim
4 min readMay 27, 2023

This is also available in other languages

https://github.com/javidselimov/jsworldjs

Introduction:

JavaScript is a realm of wonders and mysteries, filled with hidden gems that await discovery. One such gem is the new.target property, a special and enchanting feature that allows us to unravel the secrets of constructors and their derived classes. In this epic article, we embark on a journey through the realm of new.target, with a touch of humor and whimsical variable names that will make you chuckle.

The Mysterious new.target Property:

Let us introduce you to our first hero, new.target. It is a property that is automatically defined within the scope of a constructor function or method when it is invoked with the new keyword. This magical property holds a reference to the constructor or class that was directly invoked, enabling us to understand the true origins of an instance.

The Great Constructor Quest:

Imagine we have a fantastical land of creatures known as “Animals,” each with their unique abilities and characteristics. Our constructors are named in a rather whimsical fashion, adding a touch of mirth to our tale. Let’s meet our heroes:

In the above example, when we create an instance using new Animal(), the new.target property within the constructor will refer to the Animal constructor itself. However, if we create an instance using a derived class, such as new Dog(), the new.target property will point to the derived class instead.

Deriving Marvelous Creatures:

Now, let’s introduce a derived class named Dog that inherits from our beloved Animal:

When we create a new instance of Dog using new Dog(), the constructor is executed. As a result, both the Animal and Dog constructors are invoked in a cascading manner. With the help of new.target, we can differentiate between instances of Animal and Dog, unraveling the secret behind their creation.

The Mighty Summoner:

But wait, there’s more! The power of new.target extends beyond constructors. It can also be utilized within static methods and non-constructor functions:

In this peculiar function, when we call summonAnimal() directly, new.target will be undefined. However, if we use new summonAnimal(), new.target will refer to the function itself, indicating that it was invoked as a constructor.

Disclaimer:

The variable names used in this article were chosen for their humorous effect and do not represent best practices for production code. It’s important to use meaningful and descriptive variable names in real-world projects to enhance code readability and maintainability.

Now, let’s delve even deeper into the captivating world of new.target with a more advanced example:

In this spellbinding example, we have the Magician and Warlock classes. When we create a new instance of Magician using new Magician(), the new.target property within the constructor will refer to the Magician constructor itself. Similarly, when we create an instance of Warlock using new Warlock(), the new.target property will point to the derived class, Warlock.

Additionally, both the Magician and Warlock classes have a castSpell() method. The method checks the value of new.target to determine whether it was called directly or as part of a derived class. This allows us to perform different actions based on the invoking context.

Now, let’s witness the magic in action:

As you can see, the new.target property enables us to distinguish between direct and derived class invocations, allowing us to tailor the behavior of our code accordingly.

Conclusion:

Through our journey into the captivating world of new.target, we have witnessed the power it holds in unraveling the origins of constructors and classes. While we've added a touch of humor with quirky variable names, it's essential to maintain professionalism and adhere to best practices when writing production code.

So go forth, fellow developers, and wield the power of new.target responsibly. May your code be both enchanting and robust, creating magical experiences for your users!

Happy coding, my fellow sorcerers of the JavaScript realm!

--

--