Classes in Programming: Building the Foundations of Your Code!

Hello HaWkers! Jeff Bruchado here.

This is another article in our series that will cover our journey to Learn Programming from Scratch.

Well, Classes in the programming world are like the main characters of a movie, each with their own set of characteristics and abilities.

In JavaScript, a class is like a mold for creating objects. It's a way to define characteristics (properties) and actions (methods) that a certain type of object will have.

Why is diving into the world of Classes a good idea?

• Organization: Classes help organize your code. It's like having different chapters in a book, each telling a part of the story.
• Reuse: With classes, you create a model once and reuse it to create as many objects as you want. Like making multiple copies of a master key.
• Inheritance: Classes can inherit characteristics from other classes. This means less repeated code and a clearer structure.
• Encapsulation: Classes allow encapsulating data, which means you can hide internal details and show only what's necessary for external use.

But Jeff, how do Classes work in JavaScript?

Definition

You start defining a class with the class keyword, followed by the class name. Inside it, you define properties and methods.

Constructor

Inside a class, you can have a special method called constructor. This method is called when you create a new object from the class. In other words, it's always called when instantiating a class.

Object Instantiation

After defining a class, you can create objects (instances) of that class using the new keyword.

Inheritance

With extends, a class can inherit properties and methods from another class. In other words, you can create classes and merge them with other classes.

For example:

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a sound.`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks.`);
  }
}

let myDog = new Dog('Rex');
myDog.speak(); // Rex barks.

In this example, Animal is a class with a speak() method. Dog is a subclass of Animal and has its own version of the speak() method.

So, check this out:

Classes are like skeletons that give shape and function to objects in your code. They're super useful for keeping everything organized, reusable, and easy to maintain. It's like having a set of tools that you customize to build various different things, but all with the same base.

Awesome, right? Let's dive deeper next.

Classes

It's a way to define a template for an object, in older explanations, it's basically the abstraction of real-world entities in the virtual world.

It's a way to define the properties and behaviors (methods) that an object should have, so that you can create multiple objects that are of the same "category", with the same characteristics.

Below is an example of a class:

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

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

In this example, we're creating a class called "Person", which has two attributes (name and age) and one method (greet).

The "constructor" method is a special method that's called when you create a new object from this class. In other words, this method will perform the construction of your Object.

To create a new object from this class, you can do it like this:

const person1 = new Person('Jefferson', 25);
const person2 = new Person('Lucas', 40);

With this, you can access the properties and methods of these objects as follows:

console.log(person1.name); // Jefferson
console.log(person2.age); // 40
person1.greet(); // Hello, my name is Jeff and I am 25 years old.
person2.greet(); // Hello, my name is Lucas and I am 40 years old.

In addition to the "constructor" method I already mentioned, classes can also have other methods.

For example:

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

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

  incrementAge() {
    this.age += 1;
  }
}

const person1 = new Person('Jefferson', 25);
person1.incrementAge();
console.log(person1.age); // 26

In this example, we created a "Person" class with two methods: "greet" and "incrementAge". The "incrementAge" method increments the person's age by 1.

Another important thing to know is that classes are "constructors", meaning you can use them to create new objects using the "new" keyword.

For example:

const person1 = new Person('Jeff', 25);
const person2 = new Person('John', 40);

These objects created from the "Person" class are called "instances" of the class.

They have all the properties and methods defined in the class, but each has its own values for those properties.

Additionally, it's possible to create new classes that "extend" other classes.

This means that the new class will have all the properties and methods of the parent class, and can also have additional properties and methods.

For example:

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

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

  incrementAge() {
    this.age += 1;
  }
}

class Student extends Person {
  constructor(name, age, major) {
    super(name, age); // calls the parent class constructor
    this.major = major;
  }

  study() {
    console.log(`I am studying ${this.major}.`);
  }
}

const student1 = new Student('Jeff', 25, 'Computer Science');
student1.greet(); // Hello, my name is Jeff and I am 25 years old.
student1.study(); // I am studying Computer Science.

In this example, we created a "Student" class that extends the "Person" class.

The "Student" class has a new attribute (major) and a new method (study).

In the "Student" class constructor, we call the parent class constructor using the "super" keyword.

Well, I previously mentioned the word super, and next we'll understand in more detail how super works.

Super

"super" is a keyword used inside a class that extends another class (meaning it's a "subclass").

It refers to the parent class constructor (or "superclass").

When you create a subclass, it's common for it to have its own constructor, which should call the parent class constructor to initialize the subclass properties.

To do this, you can use "super" as a method, passing the necessary arguments.

For example:

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

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

class Student extends Person {
  constructor(name, age, major) {
    super(name, age); // calls the parent class constructor
    this.major = major;
  }

  study() {
    console.log(`I am studying ${this.major}.`);
  }
}

const student1 = new Student('Jeff', 25, 'Computer Science');
student1.greet(); // Hello, my name is Jeff and I am 25 years old.
student1.study(); // I am studying Computer Science.

In this example, the "Student" class extends the "Person" class.

In the "Student" class constructor, we call the parent class constructor using "super(name, age)".

This initializes the "name" and "age" properties of the subclass.

In addition to being used in a subclass constructor, "super" can also be used to access parent class methods.

For example:

class Person {
  constructor(name) {
    this.name = name;
  }

  greet() {
    console.log(`Hello, my name is ${this.name}.`);
  }
}

class FriendlyPerson extends Person {
  greet() {
    super.greet(); // calls the parent class greet method
    console.log("It's nice to meet you!");
  }
}

const friendlyPerson1 = new FriendlyPerson('Jeff');
friendlyPerson1.greet();
// Output:
// Hello, my name is Jeff.
// It's nice to meet you!

In this example, the "FriendlyPerson" class extends the "Person" class and has its own "greet" method.

However, the "FriendlyPerson" class "greet" method also calls the parent class "greet" method using "super.greet()".

This allows the "FriendlyPerson" class to inherit the behavior of the parent class's (Person) "greet" method and add more behavior to it.

In addition to being used in a subclass constructor and methods, "super" can also be used to access parent class properties.

For example:

class Person {
  constructor(name) {
    this.name = name;
  }
}

class Student extends Person {
  constructor(name, major) {
    super(name);
    this.major = major;
  }

  getDescription() {
    return `${super.name} is studying ${this.major}.`;
  }
}

const student1 = new Student('Jeff', 'Computer Science');
console.log(student1.getDescription()); // Jeff is studying Computer Science.

In this example, the "Student" class extends the "Person" class and has a "getDescription" method that returns a string with the student's name and major.

In the "getDescription" method, we use "super.name" to access the parent class's "name" property.

Conclusion

In summary, classes are a powerful tool for development because they allow you to create objects that have properties and methods.

They provide a way to organize and structure your code in a clearer and easier-to-understand manner. Additionally, classes also allow you to create inheritance, which means you can create new classes based on existing classes, sharing their properties and methods.

The knowledge about classes is important because it can help make your code more organized and easier to understand.

Well HaWker, we've reached the end of another article.

As always, if you have any questions or want to explore any point further, just reply with your question to this email.

And remember, I'm here to help you improve 1% with each new article!

If you made it this far, as usual, please reply to this email with "I managed to understand Classes in Programming".

This way I'll know that this article series is being useful for you, and that you're following along and taking advantage.

As you already know! Only a true HaWker makes it to the end.

Congratulations!

I'm happy to have you here.

See you soon.

Let's go! 🦅

• Jeff Bruchado.

---

When you feel the time is right, there are 2 ways I can help you:

01) Learning JavaScript from Scratch: Become a valuable programmer and learn to program using JavaScript, with organized and condensed content focused on what really matters for you to learn. The content has all the articles I've been sharing weekly with you, and also has practical exercises, with answers for you to learn the theory and immediately start getting hands-on.

02) Consulting: Join my mentorship and have classes directly with me. If you're interested in this, reply to this email with "I'm interested in the mentorship."

Congratulations on making it this far, HaWker! 🎉

Now that you've learned about classes in programming, how about testing your knowledge? Take the quiz below and see how much you absorbed from our article.

It's a great way to reinforce learning and prepare for the next steps in your programming journey.

Click to access the quiz.

Good luck and have fun!