JavaScript Mini Series
In this lesson, we are quickly going to go through the usage of new.target pseudo-property and use it to make JavaScript function non-constructible.
You all must have used new operator. We used new operator to construct object from a constructor function or a class. A class under the hood is a constructor function with a prototype, so we can safely say that new operator invokes a function and returns an object. Let’s see an example.
In the above example, we have created a Person constructor function that accepts firstName and lastName argument and initializes firstName and lastName properties on the object with their values. It also has the getFullName method on its prototype that returns the full name. The above example is equivalent to the below class.
class Person {
constructor( firstName, lastName ) {
this.firstName = firstName;
this.lastName = lastName;
} getFullName() {
return this.firstName + ' ' + this.lastName;
}
}As you can see in the above results, the new operator invokes the Person function which returns an object with the firstName and the lastName properties. The this keyword inside the constructor function points to the object (instance) that is being created. However, that’s the behavior when the function is invoked using new.
If the function is not invoked using new and called simply like a regular function such as Person(), it will return the value returned from the function which is undefined in our case since Person function doesn’t return anything. The this inside Person points to the window object (or global in Node). To know more about this, follow my article on this keyword.
So what is the new.target syntax? Despite what it may seem like, new is not an object. It’s just a keyword to construct objects from functions and classes. However, new.target is also a valid syntax but it is called a pseudo-property and it only exists inside all functions.
The new.target pseudo-property points to the constructor in the function like how this points to the instance. When a function is invoked using new operator, the new.target inside that function points to the function itself since it’s acting as a constructor function.
We can also use new.target syntax inside the constructor of a class which will point to the class itself. If we use new.target inside an arrow function, it will use new.target value from the upper lexical scope just like how it uses this the value from the upper lexical scope (but you can’t use new operator on arrow function as they are not constructible).
However, this is the case when a function is invoked using the new operator. If a function is invoked like a normal function call, the new.target property is undefined. Since a class can not be invoked like a function, we don’t have a value for new.target in that case.
So what are some good uses cases of new.target? Well, since new.target value depends on whether the function was invoked using new operator or called a regular function call, we can do some conditional programming.
Make non-constructible function
Are you familiar with Symbol function in JavaScript? We have a separate article on it. When we invoked Symbol() like a normal function, it returns a JavaScript symbol. But watch what happens when we use new operator on it.
▶ new Symbol()
◁ Uncaught TypeError: Symbol is not a constructor.
It throws a TypeError saying that the Symbol function is not a constructor. That means we can’t use Symbol as a constructor function or a class to produce an object, perhaps because it won’t be useful or illegal.
So if we want a user to use our JavaScript function to make a function call and not as a constructor function, we can take advantage of new.target pseudo-property and throw a TypeError when the function is invoked using new.
In the above example, the Person function throws a TypeError when new.target value is not undefined which will only happen when the function is invoked using new operation. And result justifies the logic.
Create non-callable functions
Similar to the previous example, you can create a non-callable function that should only be used as a constructor and not as a regular function. For example, the built-in Proxy object can only be used as a class and not as a regular function, else JavaScript throws a TypeError.
▶ Proxy()
◁ Uncaught TypeError: Constructor Proxy requires 'new'.
So let’s use the same logic in the previous example and create a non-callable function. Here the Person function will only be constructible.
Adaptable functions
Are you familiar with the Boolean function? Well, it’s a fascinating one since it can be used as a regular function as well as a constructor function.
▶ new Boolean( 1 );
◁ Boolean {true}
▶ Boolean( 1 );
◁ true
▶ new Boolean( 1 ) == Boolean( 1 )
◁ true
▶ new Boolean( 1 ) === Boolean( 1 )
◁ false
When you call Boolean like a function with a truthy value, it returns true primitive value, else it returns false primitive value. When it is invoked with the new operator, it returns an object (instance) of type Boolean.
We can also create such a function using the new.target pseudo property. When the function is invoked using new, we need to use the constructor function logic, else the normal function logic.
Well, that’s it for the new.target syntax. If you want to know more about how they can be used inside classes and how they behave in inheritance, you can follow the below MDN documentation.
Understanding new.target syntax in JavaScript functions. was originally published in JsPoint on Medium, where people are continuing the conversation by highlighting and responding to this story.