JavaScript Class
A class is a blueprint to create many similar objects. JavaScript ES6 introduced the class keyword for cleaner Object Oriented code while still using prototypes underneath.
What is a Class?
A class defines the structure and behaviour of objects. From one class you can create many objects (called instances) — each with its own data but sharing the same methods. JavaScript classes were introduced in ES6 (2015).
Why Use Classes?
Reusability
Define once, create many objects from it.
Encapsulation
Bundle data and behaviour together.
Inheritance
Extend one class to build a new one.
Cleaner Code
Organize large projects into models.
Methods
Class methods are shared across all instances.
Constructor
Set initial values automatically when creating an object.
Basic Features
- Use the
classkeyword to declare a class. - The
constructor()runs once when an object is created. - Class methods are written without the
functionkeyword. - Create objects with
new ClassName(...).
Classes in JavaScript
JavaScript classes provide a clean and organized way to create objects, manage properties, methods, and inheritance using object-oriented programming concepts.
What is a Class ?
A class is a blueprint used to create objects with predefined properties and methods. Classes help developers write reusable and maintainable code.
Class Declaration
class Person {
constructor(name, age){
this.name = name;
this.age = age;
}
greet(){
return
"Hi, I am "
+ this.name;
}
}
let p =
new Person(
"Rokeiya",
20
);
p.greet();
Constructor Method
The constructor method initializes object properties automatically when a new object is created using the new keyword.
Using a Class
class Student{
constructor(name){
this.name = name;
}
}
let ob =
new Student(
"PBA"
);
document.write(
ob.name
);
Your First Class Program
<script>
class Student{
constructor(name, marks){
this.name = name;
this.marks = marks;
}
show(){
document.write(
this.name +
" got " +
this.marks
);
}
}
let s =
new Student(
"Riya",
92
);
s.show();
</script>
Example 1 : Rectangle Class
<script>
var length=5,
breadth=5;
var a,p,d;
class Rectangle{
calculate(){
a =
length*breadth;
p =
2*(length+breadth);
d =
Math.sqrt(
length*length+
breadth*breadth
);
}
outputdata(){
document.write(
"Area="+a+
"<br>"
);
document.write(
"Perimeter="+p+
"<br>"
);
document.write(
"Diagonal="+d
);
}
}
ob = new Rectangle();
ob.calculate();
ob.outputdata();
</script>
Perimeter = 20
Diagonal = 7.07
Example 2 : Multiple Methods
<script>
class Calculator{
constructor(a,b){
this.a = a;
this.b = b;
}
add(){
return
this.a + this.b;
}
mul(){
return
this.a * this.b;
}
}
let c =
new Calculator(
6,4
);
document.write(
c.add() +
"<br>"
);
document.write(
c.mul()
);
</script>
24
Example 3 : Prime Number
<script>
var n = 5;
var c = 0;
class Prime{
calculate(){
for(i=1;i<=n;i++){
if(n%i==0){
c++;
}
}
}
outputdata(){
if(c==2)
document.write(
"Prime"
);
else
document.write(
"Not Prime"
);
}
}
ob = new Prime();
ob.calculate();
ob.outputdata();
</script>
Example 4 : Static Method
<script>
class MathHelp{
static square(n){
return n*n;
}
}
document.write(
MathHelp.square(7)
);
</script>
Example 5 : Palindrome
<script>
var n = 121;
var t = n;
var s = 0;
class Palindrome{
calculate(){
while(n>0){
r = n % 10;
s = s*10 + r;
n =
parseInt(n/10);
}
}
outputdata(){
if(s==t)
document.write(
"Palindrome"
);
else
document.write(
"Not Palindrome"
);
}
}
ob =
new Palindrome();
ob.calculate();
ob.outputdata();
</script>
Example 6 : Getter Method
<script>
class Box{
constructor(w,h){
this.w = w;
this.h = h;
}
get area(){
return
this.w*this.h;
}
}
let b =
new Box(5,3);
document.write(
"Area = "
+ b.area
);
</script>
Important Notes
- Class names usually start with capital letters.
- static methods belong to the class itself.
- Classes are not hoisted.
- Use this.property inside methods.
Real-Life Use Cases
User Models
Store user login and profile data.
E-Commerce
Product and Cart classes.
Games
Player and enemy systems.
Frequently Asked Questions
| Question | Answer |
|---|---|
| What is constructor? | Special method used for initialization. |
| Can classes inherit? | Yes, using extends keyword. |
| What is static method? | Method called directly on the class. |
Conclusion
Classes provide a structured and powerful way to create reusable objects and organize JavaScript applications using object-oriented programming.
JavaScript All Chapters
Continue Learning
Previous
Go to String Function Chapter