JavaScript: Classes

This is the anatomy of a class:

1class Person { // A
2  constructor(firstName, lastName, age) { // B
3    this.firstName = firstName
4    this.lastName = lastName
5    this.age = age
6  }
7
8  greet() { // C
9    console.log("Hello, my name is " + this.firstName + ". I am " + this.age + " years old")
10  }
11
12  addOneYearToAge() {
13    this.age = (this.age + 1)
14  }
15
16  getFullName() {
17    return (this.firstName + " " + this.lastName)
18  }
19}
20
21/*
22  A:
23    1. The name of the Class
24    2. Just like when naming a variable, you can give it whatever name you like
25
26  B:
27    1. This called the constructor
28    2. The constructor is used to create an instance of the Class
29    3. Just like an Object, Classes can store data, which we can see here in the constructor
30
31  C:
32    1. Unlike an Object, Classes may also have functions in addition to storing data
33    2. While an Object might allow us to create data that represents a person, a Class
34       will allow us to create data *and* functions (actions) that the person can do
35*/

Examples

Only Data Storage

1class Person {
2  constructor(name) {
3    this.name = name
4  }
5}
6
7var person1 = new Person("John")
8
9var person2 = new Person("Jane")
10
11console.log(person1.name) // Prints: "John"
12
13console.log(person2.name) // Prints: "Jane"

Adding a Function, Creating Two Instances

1class Person {
2  constructor(name) {
3    this.name = name
4  }
5
6  greet() {
7    console.log("Hello, my name is " + this.name + ".")
8  }
9}
10
11var person1 = new Person("John")
12
13var person2 = new Person("Jane")
14
15person1.greet() // Prints: "Hello, my name is John"
16
17person2.greet() // Prints: "Hello, my name is Jane"

Two properties and a Mutating Function

1class Person {
2  constructor(name, age) {
3    this.name = name
4    this.age = age
5  }
6
7  greet() {
8    console.log("Hello, my name is " + this.firstName + ". I am " + this.age + " years old")
9  }
10
11  addOneYearToAge() {
12    this.age = (this.age + 1)
13  }
14}
15
16var person = new Person("John", 35)
17
18person.greet() // Prints: "Hello, my name is John. I am 35 years old"
19
20person.addOneYearToAge()
21
22person.greet() // Prints: "Hello, my name is John. I am 36 years old"

Referencing A Returning Function

1class Person {
2  constructor(firstName, lastName) {
3    this.firstName = firstName
4    this.lastName = lastName
5  }
6
7  greet() {
8    console.log("Hello, my name is " + this.getFullName())
9  }
10
11  getFullName() {
12    return (this.firstName + " " + this.lastName)
13  }
14}
15
16var person1 = new Person("John", "Doe")
17
18var person2 = new Person("Jane", "Doe")
19
20// ---
21
22console.log(person1.getFullName()) // Prints: "John Doe"
23
24console.log(person2.getFullName()) // Prints: "Jane Doe"
25
26// ---
27
28person1.greet() // Prints: "Hello, my name is John Doe
29
30person2.greet() // Prints: "Hello, my name is Jane Doe

Classes allow us to store multiple different data types together within the same structure to represent an entity (much like Objects do), but they also enable us to attach functionality to that entity