Intro to JavaScript Classes & Methods
Welcome to Object Oriented Programming (OOP)! The beginning of the end as I’d like to call it. Have fun with Java and C++ in the future… or you can use Rust!
Defining Classes
Classes in JavaScript are special functions that provide a more convenient and syntactically cleaner way to create objects and deal with inheritance. Just as you can define function expressions and function declarations, a class can be defined in two ways: a class expression or a class declaration.
// Not intended to be run, just to show the syntax
// Declaration
class Rectangle {
// The `constructor` method is a special method of a class
// for creating and initializing an object instance of that class.
constructor(height, width) {
// Here, `this` refers to the object instance. A placeholder,
// if you will. It is used to access the object's properties.
this.height = height;
this.width = width;
}
}
// Expression; the class is anonymous but assigned to a variable
// Here, we are creating a class object without a name
const Rectangle = class {
constructor(height, width) {
this.height = height;
this.width = width;
}
}
// Expression; the class has its own name
// Here, we are creating a class object with a name
const Rectangle = class Rectangle2 {
constructor(height, width) {
this.height = height;
this.width = width;
}
}
Class Body
The body of a class is the part contained within the curly braces {}. There is where you define class members, like methods and the constructor.
A class element can be characterized by three aspects:
- Kind: Getter, setter, method, or field
- Location: Static or instance
- Visbility: Public or private
These will get their own topic sections later.
The Constructor Method
The constructor method is a special method used to create and initialize an object created within a class. There can only be one special method with the name “constructor” in a class.
For example, you can create instance properties inside the constructor:
// Not intended to be run, just to show the syntax
class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
}
Methods
Methods are defined on the initial class instance, and are shared by all children. Methods can be plain functions, async functions (async D:), generator functions, or async (sadge) generator functions.
For example:
%%js
class Rectangle {
// Constructor
constructor(height, width) {
this.height = height;
this.width = width;
}
// Getter
get area() {
return this.calcArea();
}
// Method
calcArea() {
return this.height * this.width;
}
// Generator
*getSides() {
yield this.height;
yield this.width;
yield this.height;
yield this.width;
}
}
const square = new Rectangle(10, 10);
console.log(square.area); // 100
console.log([...square.getSides()]); // [10, 10, 10, 10]
<IPython.core.display.Javascript object>
So, what’s going on here? (Thank god no async)
Constructor
As we know, the constructor method initializes the object. Ok, cool.
Get
As for the get getter method, this is used to get a specific property of the object. The line return this.calcArea() calls the calcArea() method, which calculates the area of the rectangle it returns it.
Function
The calcArea() function method calculates area of the rectangle using the height and width properties, and returns it.
Generator
The *getSides() generator method allows you to return (or “yield”) multiple values lazily, meaning they are produced one at a time, when requested, rather than all at once.
When you call square.getSides(), the generator doesn’t immediately give you all four values. Instead it returns an iterator. You can then loop over this iterator, requesting one value at a time. By using the […] spread operator (as in console.log[...sqaure.getSides()])), you’re converting the iterator into an array containing all the yielded values.
Breakdown
We first define our class template in the class Rectangle {} line, with a few methods. The constructor method initializes the rectangle with two parameters: height and width. We then define a get area() {} method that returns the result of the calcArea() function. This calcArea() method multiplies the two properties of the constructed object, height and width to return the area. We have another generator function *getSides() {} that yields (one at a time) the values of each side length.
Ohhhhhkay, that was a lot. Now what about the syntax at the bottom?
The line const square = new Rectangle(10, 10); constructs an object with width of 10 and height of 10.
We show getting the area by using the area method in square.area (we run a method on an object) to get 100, which goes through the entire aforementioned process.
As for the console.log([...square.getSides()]); statement, this simply uses the […] spread operator the print out the lengths of the sides as an array.
Popcorn Hack 1
Construct a class Triangle that:
- Constructs a triangle
- Gets the area
- Returns the calculated area (method)
- Genreates the side lengths of the triangle
%%js
class Triangle {
// Construct the triangle with base and height here
constructor(base, height){
this.base = base;
this.height = height;
// Calculate the length of the congruent sides for an isosceles triangle
this.sideLength = Math.sqrt(this.height ** 2 + (this.base / 2) ** 2);
}
// Get the area of the triangle
calcArea(){
return this.area();
}
// Calculate the area of the triangle
area(){
return (1/2) * this.base * this.height;
}
// Generate the sides of the triangle
getSides(){
return [this.base, this.sideLength, this.sideLength];
}
}
const triangle = new Triangle(7, 3);
console.log(triangle.calcArea()); // 25
console.log(triangle.area()); // 25
console.log(triangle.getSides());
<IPython.core.display.Javascript object>
Sources
-
Classes - JavaScript MDN. MDN Web Docs. 2024 Jul 25. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes - W3Schools.com. https://www.w3schools.com/js/js_classes.asp
Nothing is as easy as it looks.