How to Master the Basics of JavaScript Object Constructors in ES6?
Constructor object is the basic pillar when it comes to implementing the OOP features like inheritance, abstraction, encapsulation, or polymorphism. The constructor object is created to access the properties or methods of a specific class or to pass the parametric values. Basically, it is the most important concept no matter if you’re a beginner or an expert you have to deal with this at every step in your project development phases.
This blog explains the main concept of Object Constructors in ES6 through the following content:
- History of Object Constructor With JavaScript
- How to Master the Basics of JavaScript Object Constructors in ES6?
History of Object Constructor With JavaScript
The ECMAScript 5 “ES5” version of JavaScript does not provide the concepts like objects and classes. The developers use a combination of “constructors” and “prototype” patterns to generate custom types where the “constructors” declare the properties and the “prototype” defines the methods for a single object. Let’s have a code:
function Laptop(specs) {
this.specs = specs;
}
Laptop.prototype.getSpecs = function () {
return this.specs;
};
var lenovo= new Laptop("Core i9");
console.log(lenovo.getSpecs());
</script>
Explanation of the code:
- First, the function “Laptop()” is created that accepts a single parameter “specs”, this is assigned to a variable named “core” using the “this” keyword.
- Next, define the method “getSpecs” for the above function “Laptop()”, this will return the “specs” variable created in the “Laptop()” function.
- Then, declare an object for the “Lenovo” function, and the value of “specs” is passed as an argument via its constructor.
- In the end, the “getSpecs()” function gets invoked using the “lenovo” object to display its result.
After the compilation:
The output shows that the value passed to the function “Laptop()” gets returned using the “getSpecs()” method and is displayed on the console. This behavior of methods is similar to the class constructor concept that is provided in the ES6 version of JavaScript.
Modification Performed By ES6
ES6 officially brings the keyword of “class” which is used to define various properties and methods. This “class” keyword makes it easier for the developers to work with object constructors, by automatically updating the values in all instances of the class.
The syntax of the “class” provided by ES6 is described in the below example:
class Laptop {
constructor(specs) {
this.specs = specs;
}
getSpecs() {
return this.specs;
}
}
let lenovo = new Laptop("Core i9");
console.log(lenovo.getSpecs());
</script>
Description of the above-stated code:
- First, the class “Laptop” is created with the help of the keyword “class”. Inside it, the default constructor is called which receives a single parameter of “specs”.
- Then, the method “getSpecs()” is created inside the class which returns the “specs” variable received via the constructor.
- In the end, the object of the class “Laptop” is created and the dummy value is passed to its constructor. Moreover, directly call the “getSpecs()” method via the created object of the “lenovo” class.
Preview of the webpage:
The output shows the same result has been found but now the performance of the program increases a lot and also the line of code decreases by a factor.
How to Master the Basics of JavaScript Object Constructors in ES6?
To master the object constructor in ES6, one should perform a lot of practice for terms that come with the “class” keyword and how to utilize each of them for development. These terms are described below one by one along with proper implementation and code description.
Creation and Usage of Constructors
Visit the below figure to understand the creation syntax of the class constructor:
Now, visit the below figure to get the syntax to invoke or pass the argument via the constructor:
The above figure shows the syntax to pass arguments to the class “Laptop”.
Using Constructors Along Arguments
While working with APIs or complex functions to embed random functionality in the project, the developers have to go through the scenarios where arguments are passed to the constructors. To transfer or use values in different classes or functions, these values are passed via constructors and get stored in a different variable inside the new class or parent element. This makes the values accessible in another scope, as shown in the below code block:
class Laptop {
constructor(core, gen) {
this.core = core;
this.generation = gen;
this.storage = '500 SSD';
}
getspecs() {
console.log("Core: " + this.core + " \nGeneration: " + this.generation + " \nStorage: " + this.storage);
}
}
let lenovo = new Laptop('Core i9', '7th');
lenovo.getspecs();
</script>
Explanation for the above code:
- Initially, the class “Laptop” is created and two values are received via its constructor. These values are assigned to corresponding properties via the “this” keyword and a static value has been provided to the remaining third property.
- Next, the method “getspecs()” for this class is created. It will display the values for these properties on the console again with the help of the “this” keyword.
- After that, create an object “lenovo” for class “Laptop” using the “new” keyword and pass the values only for two properties via the constructor.
- In the end, invoke the class method “getSpecs()” using the object.
Here is the output of the console window:
The output shows that values passed as an argument via the constructor are successfully stored and displayed.
Use of Prototype Property to Add New Methods in ES6
The “prototype” property is an important feature that comes with ES6 that allows dynamic updates of any changes related to class or function to all of its instances. Moreover, the method created using the “prototype” property gets shared with all instances of a class, hence reducing lines of code. In the below code, the prototype property is going to be used to create a new method. Let’s proceed:
class Laptop {
constructor(core, gen) {
this.core = core;
this.generation = gen;
}
getspecs() {
console.log("Core: " + this.core);
}
}
Laptop.prototype.getGeneration = function() {
console.log("Generation: " + this.generation);
};
let lenovo = new Laptop('i9', '7th');
lenovo.getspecs();
lenovo.getGeneration();
</script>
Description of the code:
- First, the class “Laptop” is created which contains values that are passed via the default constructor. It also contains a method “getspecs()” which simply prints the value of the first received parameter over the console.
- Next, attach the “prototype” property with the “Laptop” class and create a new method function named “getGeneration()”.
- This method displays the value for the second parameter over the console.
- After that, create an object for the “Laptop” class and pass two parametric values in its constructor.
- In the end, use this object to trigger both the “getSpecs()” and “getGeneration()” methods.
Preview of the console window after the end of compilation for the above code snippet:
The output shows parametric values have been displayed by both methods. That is all about the basics of JavaScript object constructors.
Conclusion
To master the basics of JavaScript object constructors in ES6, the developer must first know the alternative method that comes in ES5. In ES6, the basic object constructors concepts that must be understood by the developers are the creation of constructors, working of prototype property, and the passing of arguments. This blog has enlisted some core concepts that must be understood by the developer to become a master in object constructors.
Source: linuxhint.com