JavaScipt Classes, What Are They?
Tags: webdev, javascript, productivity, beginners
Published: 2023-07-16 04:38:51

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.

```javascript
// 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
   }
}
```

##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*.

```javascript
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!'
```

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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes)
[W3Schools - JavaScript Classes](https://www.w3schools.com/Js/js_classes.asp)
Flatiron School's Curriculum on Classes and OOP