JavaScript Classes Explained With Examples

JavaScript Classes Explained With Examples

Learn about the class syntax in JavaScript with practical examples.

Introduction

The class syntax is one of the best features that have been introduced in ES6. In JavaScript, classes give developers an easy syntax to work with rather than using constructors. They are often known as “syntactical sugar” because they offer a cleaner way to do object-oriented programming in JavaScript.

In this article, we will learn about classes in JavaScript with some practical examples. Let’s get right into it.

Define a class

As I said, JavaScript classes have introduced as an easy way and a syntactical sugar to write constructor functions. They are mainly used to create new objects.

To define a class in JavaScript, we use the keyword class and we give it a name with the first letter capitalized. Then we will need to define a constructor method inside of the class.

Here is an example:

class User{
  constructor(firstName, lastName){
    this.firstName = firstName;
    this.lastName = lastName;
  }

}

As you can see above, we created a class called User that has a constructor method with two parameters that we can use to create our new objects.

Now we can use our class to create new objects that contain the first names and last names of our users.

Have a look at the example below:

//Create the class
class User{
  constructor(firstName, lastName){
    this.firstName = firstName;
    this.lastName = lastName;
  }
}
//create a new object.
const newUser = new User('Mehdi', 'Aoussiad');
console.log(newUser);
//output: {firstName: "Mehdi", lastNamee: "Aoussiad"}

To create a new object from our class, we use the keyword new followed by the name of the class. Then we replace the parameters that we used in the constructor. Whenever the keyword new is called, the constructor will be invoked to create a new object.

programming coding javascript

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Principles of Functional Programming in JavaScript That Will Make Your Coding Life Easier

Who else loves to write side-effects-free functions? I think we, as programmers, all do. Today, in this story, I will walk you through the basic principles of functional programming that will make your coding life easier.

4 Ways You Can Get Rid of Dirty Side Effects for Cleaner Code in JavaScript

4 Ways You Can Get Rid of Dirty Side Effects for Cleaner Code in JavaScript. Bugs are born in many ways. Creating side effects is one of them. Some people say side effects are evil, some say they’re not.

Who Else Wants to Write Clean JavaScript Code?

Who Else Wants to Write Clean JavaScript Code? 7 Tips to Make Your Coworkers Fall in Love With Your Code.

Code Formatting with Prettier in Visual Studio Code

Formatting code consistently is a pain, especially when working on a team. The beauty of modern-day web development is that the tooling has gotten so much better! In this article, we will look at setting up Prettier to automatically format your code in Visual Studio Code.

Top 15 Simple Coding Techniques to Get Your Tasks Done with Shorter Code in JavaScript

Don’t waste time writing long code while you can make it short, yet clearer and easier to read. In this Javascript tutorial, we'll discuss 15 Simple Coding Techniques to Get Your Tasks Done with Shorter Code in JavaScript