The Basics of JavaScript Classes from a Junior Dev Point of View

Tyrell Curry — Thu, 02 Feb 2023 01:23:22 +0000

Introduction:

Classes are blueprints/templates for creating objects based on predefined properties and methods.

This is useful for when a developer needs to create multiple objects containing similar properties and methods. However, the object created from the Class is not limited only to the predefined properties and methods. The object can have additional properties and methods added after it’s been created.

The practice of using Classes creates organized and reusable code that clearly defines the properties, methods, and behavior of created objects.

An example of a Class:

Here we will create a class called Developer with a few predefined properties:

class Developer {
    constructor(name, role, favouriteMusic) {
        this._name = name;
        this._role = role;
        this._favouriteMusic = favouriteMusic;
    }
}

We've created a Class to now create a Developer object. You will pass 3 of the following values into it when creating an object: name, role, and favourite music.
You might be asking what the constructor method is and why the variables are being saved with an underline eg.
this._name.

A constructor enables you to provide any custom initialization that must be done before any other methods can be called on an instantiated object. In simple terms, this is where you connect the passed in variables to the desired properties.
The underline is used to indicate that these properties are not meant to be directly called when targeting the objects created from the Class. To call these properties we will be using a method called getter.

Let's add a getter method to the Class! Let's simply return the properties value using the get syntax:

class Developer {
    constructor(name, role, favouriteMusic) {
        this._name = name;
        this._role = role;
        this._favouriteMusic = favouriteMusic;
    }
    get name() {
        return this._name; 
    }
    get role() {
        return this._role; 
    }
    get favouriteMusic() {
        return this._favouriteMusic; 
    }
}

Now we have a way of accessing the properties value that does not calculate the property's value until it is accessed. A getter defers the cost of calculating the value until the value is needed.

So we have a Class created. What now?

Now we can simply create an object with our new Class:

const lukeDeveloper = new Developer('Luke', 'Front-end', 'Alternative Rock');

Sweet! We've now made it really easy to add developers to our team! Let's add one more:

const claytonDeveloper = new Developer('Clayton', 'Back-end', 'EDM');

We now have Luke and Clayton with their details saved in two separate objects based off the same Class!
If we'd like to access one of the properties, eg. role, we can use the getter methods we created to simply do that:

claytonDeveloper.role // 'Back-end'

However, as stated above, we are not limited to the predefined properties, let's add a custom one to Clayton real quick:

claytonDeveloper.operatingSystem = 'Mac';

We've now added a new property called operatingSystem with the value of Mac to the claytonDeveloper object.

Let's go a bit deeper. Let's talk about Class inheritance.

So far we've demonstrated how a Class is a nice way to create objects based off a blueprint/template. Now what if we are also tasked with creating objects of our Designer team? Would it make sense to create an entirely new Class for the Designers? If they share similar properties then it's better to use Class inheritance through extending a Parent Class.

Let's say for example, the Designers share all the same properties as our Developers, but have one more property eg. what Design Software they use.

So what we will do, is create a Parent Class that will house all the properties, getters, setters, and methods that are shared amongst the Classes that we'll be extending off of it, called subclasses.

Let's jump right in. Let's create that Parent Class and call it Employee:

class Employee {
    constructor(name, role, favouriteMusic) {
        this._name = name;
        this._role = role;
        this._favouriteMusic = favouriteMusic;
    }
    get name() {
        return this._name; 
    }
    get role() {
        return this._role; 
    }
    get favouriteMusic() {
        return this._favouriteMusic; 
    }
}

Since the Developer Class shares all the same properties, let's quickly create that subclass using the extends keyword:

class Developer extends Employee {
    constructor(name, role, favouriteMusic) {
        super(name, role, favouriteMusic);
    }
}

You might have noticed something new here! That would be the super keyword. Since every Class needs a constructor, that is the first thing added, the super keyword is for when you're extending a Class to inherit values from the Parent Class. So since the Developer Class we just created using the extends keyword shares all the same values as the Parent, we can pass every value into the super keyword. Using the super keyword by default will carry over all the Parent's methods into the subclass.

Let's now do the same for Designers:

class Designer extends Employee {
    constructor(name, role, favouriteMusic, designSoftware) {
        super(name, role, favouriteMusic);
        this._designSoftware = designSoftware;
    }
    get designSoftware() {
        return this._designSoftware;
    }
}

This is the fun part about extending Classes. You can see here that since Designers share the same properties as Developers, we could use the super keyword to bring them all over, however, you can see the fourth variable being passed through designSoftware will require a property to be set and then a getter - to have consistency with the other getter methods. It's very important to first call the super keyword, even if there's no values being passed through eg. super() because if you don't call it on the top of the constructor method when extending a Class you will have an error thrown.

Let's quickly talk about setters. A setter is used to set a value of an Object's property. Let's create a setter for the designSoftware within the Designers Class:

class Designer extends Employee {
    constructor(name, role, favouriteMusic, designSoftware) {
        super(name, role, favouriteMusic);
        this._designSoftware = designSoftware;
    }
    get designSoftware() {
        return this._designSoftware;
    }
    set designSoftware(software) {
        this._designSoftware = software;
    }
}

As you can see, the setter and the getter can share the same name. As you can see the setter takes in an argument and sets the property to the passed through value. Let's put this to work. First, let's create a designer object:

const maggieDesigner = new Designer('Maggie', 'Junior Designer', 'Pop', 'Figma');

Sweet! We've now created a designer object from the Designer Class. However, let's say Maggie has found that she prefers Adobe XD over Figma. Let's use that setter to update that properties value!

maggieDesigner.designSoftware = 'Adobe XD';

Now if we were to call the getter method for the designSoftware property, we would get this:

console.log(maggieDesigner.designSoftware); // 'Adobe XD'

Awesome, we've now successfully used setters and getters. Finally let's talk about Methods.

Let's wrap it up with Methods!

Class methods are created with the same syntax as object methods. Let's create a method that simple logs out the details of the employee. We will be adding this to the Employee Parent Class so the subclasses will inherit the Method:

class Employee {
    constructor(name, role, favouriteMusic) {
        this._name = name;
        this._role = role;
        this._favouriteMusic = favouriteMusic;
    }
    get name() {
        return this._name; 
    }
    get role() {
        return this._role; 
    }
    get favouriteMusic() {
        return this._favouriteMusic; 
    }
    logEmployeeDetails() {
        console.log(`Name: ${this._name} | Role: ${this._role} | Favourite Music: ${this._favouriteMusic}`);
    }
}

Now when we append the method onto maggieDesigner we get this:

maggieDesigner.logEmployeeDetails() // Name: Maggie | Role: Junior Designer | Favourite Music: Pop

However, as you can see, we are missing the new designSoftware property we added to the Designer Class. So what shall we do?

Let's simply update the method within the Designer subclass to include the new property:

class Designer extends Employee {
    constructor(name, role, favouriteMusic, designSoftware) {
        super(name, role, favouriteMusic);
        this._designSoftware = designSoftware;
    }
    get designSoftware() {
        return this._designSoftware;
    }
    set designSoftware(software) {
        this._designSoftware = software;
    }
    logEmployeeDetails() {
        console.log(`Name: ${this._name} | Role: ${this._role} | Favourite Music: ${this._favouriteMusic} | Design Software: ${this._designSoftware}`);
    }
}

Now when we call the method onto maggieDesigner we get this output:

maggieDesigner.logEmployeeDetails() // Name: Maggie | Role: Junior Designer | Favourite Music: Pop | Design Software: Adobe XD

This wraps up the basics of Classes. There are so much more you can do with Classes and this is only touching the surface. I suggest digging into your favourite documentation and making tests within your IDE to try to get a good grasp of each concept.

First Collab Project, Need Help With Github Workflow!

Tyrell Curry — Tue, 05 Apr 2022 04:08:12 +0000

Hey DEV.TO community! First off, as a newcomer, I'd like to say that this community has been absolutely exceptional thus far!

I was hoping to get some help today with my Git/Github workflow. I am collaborating on a React JS project with another developer. This is the first time either one of us have ever collaborated on a project, so we are a bit stuck on the workflow.

So far we understand that we pull from the Master branch and each create a new branch for the features we will be working on. We understand that once those features are complete, we merge them into the Master. However.. We are unsure how we can go about merging our branches together in a 'Staging/Dev branch' to determine if they are working correctly with one another, before pushing to the Master.

Is that the right way to do it? Merge them both into a new branch before pushing to Master?

I'd also like to know, if we do merge our branches together in some sort of staging branch (if that is the best workflow), would we then merge that staging branch into our original feature branches that we are currently working on to continue developing with each others code present in our branches?

TL/DR; How do you test two separate branches together to ensure the code is working before merging the branches to Master?

I hope I was able to make my question clear, thanks DEV.TO!

Looking for developers to chat with!

Tyrell Curry — Fri, 01 Apr 2022 19:50:03 +0000

Hey! This is my first post on DEV. I have started learning web development late 2021. I've been learning from home on my free time with the hopes of gaining enough skills to start applying for positions by 2023.

Learning to code has been an amazing experience so far and I'm very excited I've found something I enjoy doing.

With that being said, I've been feeling a bit lonely not knowing any developers and having no one to chat with. So this post is reaching out to the community in hopes of connecting with some developers.

I'd love to connect with other developers on their learning path and I would also love to connect with a developer who is currently employed! I would be stoked to learn about what it's like working as a developer and the daily tasks involved!

Thanks for reading this post and I hope I can connect with a few people :).

DEV Community: Tyrell Curry

The Basics of JavaScript Classes from a Junior Dev Point of View

First Collab Project, Need Help With Github Workflow!

Looking for developers to chat with!