Write Classes, Methods, and Objects in JavaScript

When learning JavaScript, the concepts of classes, methods, and objects are foundational yet can initially feel a bit abstract. This post breaks down these elements to help clarify their roles and relationships. By the end, you’ll understand how classes serve as blueprints, methods bring actions to life, and objects act as unique instances that tie everything together. Whether you’re new to programming or just brushing up, this tutorial will help you see how each part works together to create robust, reusable code.

What You’ll Do

1. Define the class with class ClassName { }.
2. Use a constructor to initialize properties.
3. Define methods to add behavior.
4. Instantiate the class with new, then call methods on that instance.

Steps

1. Define the class with the class keyword.

A class is essentially a blueprint for creating objects with specific properties and behaviors.

• The class keyword defines a new class.
• Person is the name of the class, which we capitalize by convention.

class Person {
  ...
}

2. Add a constructor to initialize properties.

• constructor() is a special method called automatically whenever a new instance of Person is created.
• Parameters (name and age) are passed to constructor() when creating a new Person.
• Inside the constructor, this.name and this.age refer to the instance’s name and age properties. We assign them the values passed into the constructor, so each Person instance will have a name and an age.

constructor(name, age) {
  this.name = name;
  this.age = age;
}

Example Usage of the Constructor:

const person1 = new Person("Alice", 30);

Here, person1 is an instance of the Person class, and it has name = "Alice" and age = 30.

3. Add methods to your class.

Methods are actions that objects of this class can perform.

Method 1: greet()

• greet() is a method that, when called, logs a greeting message to the console.
• this.name and this.age refer to the specific instance’s name and age, allowing each Person instance to produce a personalized greeting.

greet() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
}

Method 2: haveBirthday()

• haveBirthday() increments the age property by 1 each time it’s called.
• It then logs a birthday message, showing the new age.

haveBirthday() {
  this.age += 1;
  console.log(`Happy Birthday! I am now ${this.age} years old.`);
}

4. Create an instance of the class and use the methods.

Now that we have the Person class, we can create instances of it (objects) and call the methods.

• person1.greet() logs: Hello, my name is Alice and I am 30 years old.
• person1.haveBirthday() logs: Happy Birthday! I am now 31 years old.

const person1 = new Person("Alice", 30); // Creates a new Person instance
person1.greet(); // Calls the greet method
person1.haveBirthday(); // Calls the haveBirthday method

Each time you call haveBirthday(), the age property increases, showing how the class can keep track of changing state (like a real person’s age).

Conclusion

In JavaScript, classes, methods, and objects create organized, reusable code. Classes define blueprints, methods add functionality, and objects bring each instance to life with unique data. By understanding these relationships, you’ll be better equipped to build efficient, scalable applications and simplify complex tasks. This setup lets you create as many Person objects as you want, each with unique properties and behaviors defined by the class.