ES6 Class Syntax

Welcome back to Jurassic Park! While working on our park full of dinosaurs, we'll need a way to organize our code. ES6 classes are the perfect tool that will allow us to model various aspects of our park — from the dinosaurs themselves, through enclosures, to security systems.

What are ES6 classes?

Classes introduced in ES6 (ECMAScript 2015) provide object-oriented syntax for JavaScript. Although JavaScript has always been a prototype-based language, ES6 classes offer a cleaner, more intuitive syntax for creating objects and managing inheritance.

In the context of our Jurassic Park, classes allow us to define "blueprints" for the different types of objects we will create.

Basic class syntax

Let's define our first class for the dinosaurs in the park:

1class Dinosaur {
2  // Class body
3}

This simple declaration creates the

Dinosaur

class. It's like a template we'll use to create specific dinosaur specimens.

Declaring class properties

Dinosaurs in our park have various characteristics — species, weight, diet, etc. We can define these properties in our class:

1class Dinosaur {
2  species; // Dinosaur species
3  weight; // Weight in kilograms
4  diet; // Diet type: 'carnivore', 'herbivore', 'omnivore'
5  enclosureId; // ID of the enclosure it's kept in
6  isActive = true; // Whether the dinosaur is active (default true)
7}

Although declaring properties like this isn't required in JavaScript, it's good practice, especially when using TypeScript, because it helps with documentation and typing of our class.

Creating class instances

To create a specific dinosaur based on our class, we use the

new

keyword:

1// Creating a new T-Rex
2const rex = new Dinosaur();
3
4// Assigning properties
5rex.species = 'Tyrannosaurus Rex';
6rex.weight = 8000;
7rex.diet = 'carnivore';
8rex.enclosureId = 'T-REX-01';

This way we created an instance of the

Dinosaur

class and set its properties. Every dinosaur we create will have its own set of these properties.

Classes as functions

In JavaScript, classes are a special type of function. Under the hood, when we declare a class, JavaScript creates a new constructor function.

1// These two declarations work similarly (though not identically):
2
3// Using ES6 class
4class Dinosaur {
5  //
6}
7
8// Using a constructor function (older method)
9function Dinosaur() {
10  //
11}

However, ES6 classes offer much cleaner syntax and additional features such as inheritance, which are harder to implement using simple constructor functions.

Classes as types in TypeScript

If we're working with TypeScript, we can also use classes as types:

1class Dinosaur {
2  species: string;
3  weight: number;
4  diet: 'carnivore' | 'herbivore' | 'omnivore';
5  enclosureId: string;
6  isActive: boolean = true;
7}
8
9// Function that takes a dinosaur as a parameter
10function feedDinosaur(dino: Dinosaur) {
11  console.log(`Feeding ${dino.species} in enclosure ${dino.enclosureId}`);
12}
13
14const rex = new Dinosaur();
15rex.species = 'Tyrannosaurus Rex';
16// ... set other properties
17
18feedDinosaur(rex); // Works!
19feedDinosaur({ species: 'Fake Dino' }); // Error - missing required properties

In this example, TypeScript ensures that only objects conforming to the

Dinosaur

type can be passed to the

feedDinosaur

function.

Private class fields

In newer versions of JavaScript (and in TypeScript) we can define private class fields using the

#

symbol. Private fields are only accessible inside the class where they were declared, which helps with encapsulation:

1class Dinosaur {
2  species;
3  weight;
4  #healthStatus; // Private field - cannot be accessed from outside the class
5
6  checkHealth() {
7    // Method can access the private field
8    return this.#healthStatus;
9  }
10
11  updateHealth(status) {
12    this.#healthStatus = status;
13  }
14}
15
16const raptor = new Dinosaur();
17raptor.updateHealth('Excellent');
18console.log(raptor.checkHealth()); // 'Excellent'
19
20// Error - cannot directly access a private field
21// console.log(raptor.#healthStatus);

Private fields are a great way to hide implementation details and prevent incorrect use of our classes.

Summary

ES6 classes are a powerful way to organize code in JavaScript. In our Jurassic Park we will use classes to model various aspects of the park, from dinosaurs to security systems and attractions. In the next step we'll look at constructors and methods, which will add behaviors to our classes.