Back to: JavaScript Tutorial For Beginners and Professionals
ES6’s New Target Property with Examples
In this article, I am going to discuss ES6 New Target Property with Examples. Please read our previous article where we discussed Object Constructors in JavaScript.
ES6 New Target Property with Examples
ES6 introduced the new property called new.target property to prevent a constructor function from being called without the new keyword. When a constructor function is called with the new keyword, the new.target property returns the function reference. Otherwise, it returns undefined.
In the below example, we will add a new.target inside the person object function to show the new.target to the console. When we called the Person constructor function without using a new keyword, it returns undefined because the Person constructor function is called like a regular function. When we called the Person constructor function with a new keyword, it returns a reference to the person because the constructor function is called with a new keyword.
Example: JavaScript defines a function to a person object using object constructor with new.target property
<html>
<head>
<title>JavaScript defines a function to a person object using object constructor with new.target property example</title>
</head>
<body>
<script>
//Way4 -Using the constructor of the Function object.
//Object constructor syntax
function Person(name, age, bloodgroup) {
console.log(new.target);
this.name = name;
this.age = age;
this.bloodgroup = bloodgroup;
//object constructor function
this.greet = function (who) {
return 'Hello, ' + who + '! with age: ' + this.age + ' and bloodgroup: ' + this.bloodgroup;
};
}
var john = new Person("John", 42, "A+"); //with new keyword
var maria = Person("Maria", 21); //without new keyword
console.log(john.greet(john.name));
console.log(maria.greet(maria.name));
</script>
</body>
</html>
Output: Press F12 and go to the Console section
By using the new.target, we can enforce the callers of the object constructor function to use the new keyword. Otherwise, we can throw an error with the user-defined error message shown: What we discussed above is given in the below example.
Example: JavaScript defines a function to a person object using object constructor with new.target property- Uncaught Error message
<html>
<head>
<title>JavaScript defines a function to person object using object constructor with new.target property – Uncaught Error message example</title>
</head>
<body>
<script>
//Way4 -Using the constructor of the Function object.
//Object constructor syntax
function Person(name, age, bloodgroup) {
if (!new.target) {
throw Error("Cannot be called without the new keyword");
}
this.name = name;
this.age = age;
this.bloodgroup = bloodgroup;
//object constructor function
this.greet = function (who) {
return 'Hello, ' + who + '! with age: ' + this.age + ' and bloodgroup: ' + this.bloodgroup;
};
}
var john = new Person("John", 42, "A+"); //with new keyword
var maria = Person("Maria", 21); //without new keyword
console.log(john.greet(john.name));
console.log(maria.greet(maria.name));
</script>
</body>
</html>
Output: Press F12 and go to the Console section
Alternatively, we can make the syntax clearer by creating a new Person object if the users of the constructor function do not use the new keyword:
Example: JavaScript defines a function to a person object using object constructor with new.target property- without Error message
<html>
<head>
<title>JavaScript defines a function to person object using object constructor with new.target property - without Error message example</title>
</head>
<body>
<script>
//Way4 -Using the constructor of the Function object.
//Object constructor syntax
function Person(name, age, bloodgroup) {
if (!new.target) {
return new Person(name, age, bloodgroup);
}
this.name = name;
this.age = age;
this.bloodgroup = bloodgroup;
//object constructor function
this.greet = function (who) {
return 'Hello, ' + who + '! with age: ' + this.age + ' and bloodgroup: ' + this.bloodgroup;
};
}
var john = new Person("John", 42, "A+"); //with new keyword
var maria = Person("Maria", 21); //without new keyword
console.log(john.greet(john.name));
console.log(maria.greet(maria.name));
</script>
</body>
</html>
Output: Press F12 and go to the Console section
In JavaScript libraries and frameworks, this pattern is often used to simplify the syntax.
In the next article, I am going to discuss JavaScript this keyword with Examples. Here, in this article, I try to explain ES6 new.target Property with Examples. I hope you enjoy this ES6 new.target Property article. I would like to have your feedback. Please post your feedback, question, or comments about this article.
About the Author: Pranaya Rout
Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.