Class Basic Syntax

Class Basic Syntax

JavaScript Class Basic Syntax

JavaScript classes are a modern way to create objects and implement prototypal inheritance in an easy-to-read syntax. They were introduced in ES6 (ECMAScript 2015) and provide a more structured way to define objects compared to constructor functions.

🔹 Basic Class Syntax

A class in JavaScript is created using the class keyword.

Example: Creating a Class

class User { constructor(name, age) { this.name = name; this.age = age; } sayHello() { console.log(`Hello, my name is ${this.name}.`); } } const user1 = new User("Alice", 25); user1.sayHello(); // ✅ Output: Hello, my name is Alice.

✔ The constructor() method initializes properties.
sayHello() is a method shared across all instances.

🔹 Class Properties

Instance Properties (Defined in Constructor)

class Car { constructor(brand, model) { this.brand = brand; this.model = model; } } const myCar = new Car("Toyota", "Camry"); console.log(myCar.brand); // ✅ Output: Toyota

Class Fields (Public & Private)

JavaScript now supports class fields, including public and private properties.

class Person { name = "Default"; // Public field #id = 12345; // Private field (only accessible inside the class) showID() { console.log(`ID: ${this.#id}`); } } const person = new Person(); console.log(person.name); // ✅ Output: Default // console.log(person.#id); // ❌ Error: Private field person.showID(); // ✅ Output: ID: 12345

Public fields can be accessed anywhere.
Private fields (#) can only be used inside the class.

🔹 Getters & Setters

We can use getters and setters to control property access.

Example: Using Getters & Setters

class User { constructor(name) { this._name = name; } get name() { return this._name.toUpperCase(); } set name(value) { if (value.length < 3) { console.log("Name must be at least 3 characters long."); return; } this._name = value; } } const user = new User("Bob"); console.log(user.name); // ✅ Output: BOB (getter modifies output) user.name = "Al"; // ❌ Output: Name must be at least 3 characters long.

✔ The get method retrieves data.
✔ The set method validates before assigning values.

🔹 Static Methods (Class-Level Methods)

Static methods belong to the class itself instead of an instance.

Example: Using static Methods

class MathUtils { static add(a, b) { return a + b; } } console.log(MathUtils.add(5, 3)); // ✅ Output: 8

No need to create an instance to use add().

🔹 Class Inheritance (extends & super)

A class can inherit from another class using extends.

Example: Inheriting from a Class

class Animal { constructor(name) { this.name = name; } makeSound() { console.log("Some generic animal sound"); } } class Dog extends Animal { constructor(name, breed) { super(name); // Calls parent class constructor this.breed = breed; } makeSound() { console.log("Woof! Woof!"); } } const myDog = new Dog("Buddy", "Golden Retriever"); myDog.makeSound(); // ✅ Output: Woof! Woof! console.log(myDog.name); // ✅ Output: Buddy

super(name) calls the parent class constructor.
Dog overrides the makeSound() method.

🎯 Summary

Classes provide a clean way to define objects.
Constructor initializes properties when creating an instance.
Class fields can be public or private (#).
Getters & Setters allow controlled property access.
Static methods belong to the class itself.
extends & super enable class inheritance.

🚀 Want more examples? Let me know! 😊

Soeng Souy

Soeng Souy

Website that learns and reads, PHP, Framework Laravel, How to and download Admin template sample source code free.

Post a Comment

CAN FEEDBACK
close