Lesson 2
JavaScript Constructors and Class Methods
Topic Overview

Welcome back, JavaScript enthusiast! We're diving back into JavaScript classes, focusing on constructors and class methods. Picture building a robot: Constructors are the initial settings, and class methods are the commands that enable it to perform actions. Are you ready for a refresher? Let's get started!

Revisiting JavaScript Classes

A JavaScript class serves as a blueprint for creating objects. Here's a basic class, Robot:

JavaScript
1class Robot { 2 // Class definition 3} 4 5const robotInstance = new Robot();

As of now, this Robot class is like an empty shell. It exists but doesn't know how to do anything. To make it functional, attributes and methods are needed.

Deep Dive into Constructors

A constructor is a special method that initializes an object when it is created. In JavaScript, this method is always named constructor and is called automatically during object creation. It sets up the initial states of the new object.

If you do not define a constructor method in your class, JavaScript will provide an empty constructor method automatically.

Here, we upgrade the Robot class with a constructor:

JavaScript
1class Robot { 2 constructor(name, color) { 3 this.name = name; 4 this.color = color; 5 } 6} 7 8const robotInstance = new Robot("Robbie", "red"); // Robbie, a red robot, is born!

In this case, the constructor method gets automatically called when we create a new Robot instance, set with name and color attributes. It's always good practice to use constructors like constructor to ensure each instance starts with the correct initial values.

Multiple Constructors with Default Parameters

Having one constructor is great, but what if we want more flexibility in setting up our robots? That's where default parameters come into play and give us something similar to multiple constructors.

Here's a default color for our robots:

JavaScript
1class Robot { 2 constructor(name, color = 'grey') { 3 this.name = name; 4 this.color = color; 5 } 6} 7 8const robotInstance = new Robot("Robbie", "red"); // Red Robbie 9const robotInstance2 = new Robot("Bobby"); // Grey Bobby, no color provided

With default parameters, color becomes optional. When we don't specify it, the robot is 'grey' by default.

Class Methods

Class methods are akin to commands controlling the robot's actions. They provide additional behaviors for our objects.

This Robot class allows the robots to introduce themselves:

JavaScript
1class Robot { 2 constructor(name, color = 'grey') { 3 this.name = name; 4 this.color = color; 5 } 6 7 sayHello() { 8 console.log(`Hello, I am ${this.name} and I am ${this.color}.`); 9 } 10} 11 12const robotInstance = new Robot("Robbie", "red"); 13robotInstance.sayHello(); // Hello, I am Robbie and I am red.

The sayHello method allows our robot instance to interact and even communicate.

Updating and Retrieving Parameters with Class Methods

Sometimes, you might want to alter the attributes of your class instances or fetch their values. You can accomplish this by creating methods to set or get these attributes.

Here’s how you can add methods to change the name and color of the robot, as well as retrieve them:

JavaScript
1class Robot { 2 constructor(name, color = 'grey') { 3 this.name = name; 4 this.color = color; 5 } 6 7 sayHello() { 8 console.log(`Hello, I am ${this.name} and I am ${this.color}.`); 9 } 10 11 // Method to update the name 12 setName(newName) { 13 this.name = newName; 14 } 15 16 // Method to get the name 17 getName() { 18 return this.name; 19 } 20 21 // Method to update the color 22 setColor(newColor) { 23 this.color = newColor; 24 } 25 26 // Method to get the color 27 getColor() { 28 return this.color; 29 } 30 31 // Method to change the name and color using parameters 32 changeAttributes(newName, newColor) { 33 this.name = newName; 34 this.color = newColor; 35 } 36 37 // Method to greet a specific person by name 38 greetPerson(personName) { 39 console.log(`Hello ${personName}, I am ${this.name}!`); 40 } 41} 42 43const robotInstance = new Robot("Robbie", "red"); 44robotInstance.sayHello(); // "Hello, I am Robbie and I am red." 45 46robotInstance.setName("Bobby"); 47robotInstance.setColor("blue"); 48robotInstance.sayHello(); // "Hello, I am Bobby and I am blue." 49 50console.log(robotInstance.getName()); // "Bobby" 51console.log(robotInstance.getColor()); // "blue" 52 53// Using the new method to change both attributes at once 54robotInstance.changeAttributes("Charlie", "green"); 55robotInstance.sayHello(); // "Hello, I am Charlie and I am green." 56 57// Using the new method to greet a specific person 58robotInstance.greetPerson("Alice"); // "Hello Alice, I am Charlie!"

The setName and setColor methods allow changing the name and color of the robot after it has been created. The getName and getColor methods enable retrieving these values when needed.

Lesson Summary

Great job! You've refreshed and deepened your understanding of JavaScript classes, constructors, and class methods, and learned how to mimic multiple constructors. Additionally, you saw how to add methods that can update and retrieve class attributes. Now, you can breathe more life into your JavaScript classes, making them more versatile and powerful. Next, we'll move on to hands-on tasks where you'll apply these concepts to more complex scenarios. Keep up the good work!

Enjoy this lesson? Now it's time to practice with Cosmo!
Practice is how you turn knowledge into actual skills.