DEV Community

Harish Kumar
Harish Kumar

Posted on

Understanding JavaScript Classes: A Beginner's Guide

JavaScript is a versatile and powerful programming language that is widely used for both front-end and back-end web development. One of the fundamental features introduced in ECMAScript 2015 (ES6) is the class syntax, which brings object-oriented programming (OOP) capabilities to JavaScript. In this article, we'll explore JavaScript classes, their syntax, usage, and benefits.

What are JavaScript Classes?

JavaScript classes are a way to define blueprints for creating objects with similar properties and behaviors. They provide a more structured and familiar approach to implementing OOP concepts like inheritance, encapsulation, and polymorphism in JavaScript.

Syntax of JavaScript Classes:

The syntax for defining a class in JavaScript is straightforward:

class ClassName {
  constructor(/* parameters */) {
    // Constructor code

  method1(/* parameters */) {
    // Method 1 code

  method2(/* parameters */) {
    // Method 2 code

  // Additional methods and properties
Enter fullscreen mode Exit fullscreen mode
  • class: Keyword used to declare a class.
  • ClassName: Name of the class.
  • constructor: Special method for initializing class instances.
  • method1, method2, etc.: Methods defined within the class for performing specific tasks.
  • Properties: Additional properties can be defined inside the class.

👉 Download eBook

Example of JavaScript Class:

Let's create a simple Person class to understand the concept:

class Person {
  constructor(name, age) { = name;
    this.age = age;

  greet() {
    console.log(`Hello, my name is ${} and I am ${this.age} years old.`);

// Creating an instance of Person class
const person1 = new Person('John', 30);

// Calling the greet method
Enter fullscreen mode Exit fullscreen mode

In this example, we define a Person class with a constructor method for initializing name and age properties. We also define a greet method to display a greeting message.

Inheritance with JavaScript Classes:

JavaScript classes support inheritance through the extends keyword. Let's extend our Person class to create a Student class:

class Student extends Person {
  constructor(name, age, grade) {
    super(name, age);
    this.grade = grade;

  study() {
    console.log(`${} is studying in grade ${this.grade}.`);

// Creating an instance of Student class
const student1 = new Student('Alice', 20, '12th');

// Calling methods from both Person and Student classes
student1.greet(); // Method from Person class; // Method from Student class
Enter fullscreen mode Exit fullscreen mode

Here, Student class extends the Person class using the extends keyword. The super() method is used to call the parent class constructor. We also define a study method specific to the Student class.

Benefits of JavaScript Classes:

  1. Encapsulation: Classes allow bundling data and methods together, promoting encapsulation and reducing complexity.
  2. Inheritance: Classes support inheritance, enabling code reuse and promoting a hierarchical structure.
  3. Readability: Class syntax provides a clear and intuitive way to define and organize code.
  4. Abstraction: Classes help in abstracting complex behavior into manageable and reusable components.


JavaScript classes provide a convenient and familiar way to implement object-oriented programming concepts in JavaScript. They offer a structured approach to building applications, promoting code reusability, maintainability, and scalability. By understanding JavaScript classes, developers can leverage the power of OOP principles to create robust and efficient JavaScript applications.

👉 Download eBook

Top comments (4)

eshimischi profile image

Classes in ES6 is just a syntax sugar, at the end it transforms back to prototypes

eriveltondasilva profile image
Erivelton da Silva

prototype is OOP

eshimischi profile image
eshimischi • Edited

And yes and no! but i wasnt argue about whether JS is object-oriented or not, just said: Class in JS is only a syntax sugar

jonrandy profile image
Jon Randy 🎖️ • Edited

...which brings object-oriented programming (OOP) capabilities to JavaScript

Not really, JavaScript has always had OOP capabilities. The whole language is based on them.