DEV Community

Brenden Olding
Brenden Olding

Posted on • Updated on

JavaScipt Classes, What Are They?

Let's start with what a class is in JavaScript. A class is a function that allows you to create similar objects that adhere to the same structure.

Classes can be a really helpful tool in JavaScript. Here are a few examples of scenarios to consider using JavaScript classes.

  • You need to create multiple objects that will hold similar data, ex. a website comment, a website user, etc.

  • If you need to create functions to act on the data stored in similar objects, you can create methods on the class.

  • You have a set of functions that will do similar things.
    This would act similarly to how the global Math object works. You would call the methods on the class itself.

  • You want to organize your code to remove potentially redundant code.

How to Create a Class.

There are two ways you can define a class, a class declaration and a class expression. Unlike functions, using a class declaration acts more akin to variable declarations/expressions using const and let. In simpler terms, a class does not get "hoisted" like a function using the function keyword.

You will use the built in constructor method to create the object key:value pairs. You pass parameters into the constructor method that represent the data you want to be stored. You then use the this keyword to refer to the object you will be creating, with each instance of the class, and create your keys using dot notation.

Below is an example of how you might create a user class for your program, with an example of both a declaration and expression.

// Class Declaration
class User {
   constructor(name, age, city) {
      this.name: name,
      this.age: age,
      this.city: city
   }
}

//Class Expression
const User = class {
   constructor(name, age, city) {
      this.name: name,
      this.age: age,
      this.city: city
   }
}
Enter fullscreen mode Exit fullscreen mode

How to Create and Use Class Methods.

Now you might be wondering how you create a method that acts on the date stored in an instance of a class.

You would write the method outside of the constructor method in the class. The syntax is similar to creating a function with the function keyword. The only difference is you omit the function keyword in a class.

class User {
   constructor(name, age, city) {
      this.name: name,
      this.age: age,
      this.city: city
   }

   //below is the class method
   sayHello () {
   console.log(`Hello ${this.name}, welcome to the site!`)
   }
}
/* If you want to invoke the method above, you have to create an instance of the class. */

const david = new User('David', 27, 'Chicago')

/* Using the variable representing the new User instance, you use dot notation to access the method. */

david.sayHello();
//=> 'Hello David, welcome to the site!'
Enter fullscreen mode Exit fullscreen mode

If you wanted to create a class that was only built in methods, you wouldn't need to create new instances of the class. Instead, you would call the methods on the class itself. This is typically used to create math functions that are not in the global Math object. You can get creative and use it for other things as well.

In summary, classes are a powerful tool in JavaScript. They enable you to have an Object Oriented Programming mindset, focusing your code around cells of data rather than isolated bits of data. It can add structure and organization to your code. It can create easy ways for you to interact with an object's data. It also helps keep relevant data together.

Classes are an incredible tool to keep in your programming toolbox.

Referenced Resources:
MDN- Classes - JavaScript
W3Schools - JavaScript Classes
Flatiron School's Curriculum on Classes and OOP

Top comments (0)