Home Tutorials Videos Q&A MCQ Shortcuts Exercises Appointment Login
Lesson 26 of 30 – JavaScript Class
87%

JavaScript Class

JavaScript ES5 does not have a built-in class type like Java or C#. However, functions can be used as classes to create objects and implement object-oriented programming concepts.

Note: Functions can act as classes, and objects created using the new keyword are called instances.
What is a JavaScript Class?

A function can be used like a class in JavaScript. Properties are defined using the this keyword and objects are created using the new keyword.

Creating a Class using Function
Example:
function Person(){
this.firstName="unknown";
this.lastName="unknown";
}

var person1=new Person();
person1.firstName="Sohan";
person1.lastName="Kumar";

The function behaves like a class and person1 becomes its object.

Creating Multiple Objects

Each object stores its own values independently.

var person1=new Person();
person1.firstName="Sohan";

var person2=new Person();
person2.firstName="Kitu";

person1 and person2 have separate property values.

Using this Keyword

The this keyword binds properties to the current object.

function Person(){
this.firstName="Aman";
this.lastName="Kumar";
}
Adding Methods to Class

Methods can be added using function expressions.

function Person(){
this.firstName="unknown";
this.lastName="unknown";

this.getFullName=function(){
return this.firstName + " " + this.lastName;
}
}
Method Example
var person1=new Person();
person1.firstName="Shyam";
person1.lastName="Kumar";

alert(person1.getFullName());
Output:

Shyam Kumar

Constructor in JavaScript

Functions can accept parameters and work like constructors.

function Person(firstName,lastName,age){
this.firstName=firstName;
this.lastName=lastName;
this.age=age;
}
Constructor Example
var person1=new Person("Kunal","Kumar",51);
var person2=new Person("Shyam","Yadav",25);

Values are passed while creating objects.

Default Values
this.firstName=FirstName || "unknown";
this.age=Age || 25;

Default values are used when no value is provided.

Properties with Getters and Setters

JavaScript allows properties to be created using getter and setter methods.

function Person(){
var _firstName="unknown";

Object.defineProperties(this,{
"FirstName":{
get:function(){
return _firstName;
},
set:function(value){
_firstName=value;
}
}
});
}
Getter and Setter Example
var person1=new Person();
person1.FirstName="Monika";
alert(person1.FirstName);
Output:

Monika

Read Only Property

A property becomes read-only if only a getter is provided.

Object.defineProperties(this,{
"FirstName":{
get:function(){
return _firstName;
}
}
});

Without a setter, the property value cannot be changed.

Read Only Property Example
var person1=new Person("Kunal");
alert(person1.FirstName);
Output:

Kunal

Multiple Properties

Multiple properties can be created using Object.defineProperties().

Object.defineProperties(this,{
"FirstName":{...},
"LastName":{...},
"Age":{...}
});
Multiple Property Example
var person1=new Person();
person1.FirstName="Kunal";
person1.LastName="Kumar";

Different properties can be managed independently.

Advantages of Classes
  • Supports object-oriented programming.
  • Improves code reusability.
  • Organizes data and methods together.
  • Makes code easier to maintain.
  • Allows multiple object creation.
  • Supports constructors and methods.
Key Features of JavaScript Classes
Feature Description
Constructor Initializes object data
Properties Store object information
Methods Perform actions on objects
Instance Object created using new keyword
Points to Remember
  • Functions can act as classes in JavaScript.
  • Objects are created using the new keyword.
  • The this keyword refers to the current object.
  • Methods can be added using function expressions.
  • Constructors accept values during object creation.
  • Getter and Setter methods control property access.
  • Read-only properties use only getters.
  • Multiple properties can be created with Object.defineProperties().

🧠 Quick Quiz

Which keyword is used to create an object from a class-like function in JavaScript?



← Previous Next →