Class syntax basics in JavaScript
Tags: javascript
Published: 2020-08-01 00:00:00

---
  title: Class syntax basics in JavaScript
  published: true
  tags: JavaScript
  date: Sat Aug 01 2020 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/class-syntax-basics-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-4aa542b0970371ce2ef3c73ed277004a.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/class-syntax-basics-javascript)
  
A class in JavaScript is a way of creating objects, The class acts as a blueprint for making objects out of it.

Class syntax is a new ES6 addition to JavaScript.

Before the class syntax, we used to create objects using the constructor functions.

Let's write a constructor function called `User`

```javascript
// old way
function User(name, age) {
  this.name = name;
  this.age = age;
}
```

To create objects from the constructor function `User()` we have to use the `new` keyword followed by invoking the `User()` constructor function.

```javascript
// old way using constructor function
function User(name, age) {
  this.name = name;
  this.age = age;
}

// create objects from User
const John = new User("John Doe", 23);

console.log(John); // {name: "John Doe", age: 23}
```

Let's rewrite the constructor function using the new class syntax.

To create a class we have to use the `class` keyword followed by the class name and curly braces `{}` like this,

```javascript
// new way using class syntax
class User {

}

Class Syntax
```

Now we have defined a class. But how do we add methods, properties and get values to make the objects?

To get values for making the objects we have to use the `constructor()` method in the class.

```javascript
// new way using class syntax
class User {
  // constructor function to
  // receive values for making objects
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}
```

This `constructor()` method is the same as the one we used above using the constructor function.

The constructor method will be automatically called when using the `new` keyword.

Inside the constructor method, we have also defined the properties called `name` and `age`.

But how do we add methods?

We can add method to class like this,

```javascript
// new way using class syntax
class User {
  // constructor function to
  // receive values for making objects
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  // adding a new method called sayName()
  // which returns the name property
  sayName() {
    return this.name;
  }
}
```

Lets now make an object from the class.

```javascript
// new way using class syntax
class User {
  // constructor function to
  // receive values for making objects
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  // adding a new method called sayName()
  // which returns the name property
  sayName() {
    return this.name;
  }
}

// make new object John from class user
const John = new User("John Doe", 23);

console.log(John); // {name: "John Doe", age: 23}
console.log(John.age); // 23
console.log(John.sayName()); // John Doe
```

### 🚀 NOTE: A class must be called with the new keyword, otherwise it will throw an error.

We will be discussing more about classes in the [next blog post](https://melvingeorge.me/blog/class-syntax-javascript-part-2)

### Feel free to share if you found this useful 😃.

---