Defining a class

To define a class in JavaScript, you can use directly the clss declaration with the name of the class.

class className {


- Another way, assign the class to a variable:
let varClass = class {

The diference is that "varClass" is a variable, so its value can be changed.

- "params" represents the arguments that will be passed when an object instance of the class is created (with the new) keyword.
let obj = new className(arguments);

let ob2 = new varClasa(arguments);

Properties and Methods of the class

Properties are defined in the constructor(), with the this keyword.
constructor() is a special method that is automatically executed when an object of the class is created (with the new keyword).
Inside the class body, the properties and methods are called by using the this keyword (the class-name for static methods).
Outside the class, the properties and methods can be called using the object name (the class-name for static methods).

- Example of a simple JavaScript class:
<div id='ex_res'>Here we show the results.</div>

class Rectangle {
 //receives two arguments when an object of the class is created
 constructor(width, height){
 //set properties
 this.width = width;
 this.height = height;

 //a simple method, it uses the properties defined in constructor
 return this.width * this.height;

 //another method (receives one argument); to see how to call a method in other method
 return this.area() *n;

//usage, create an object of the class; using the new keyword
let ob_rect = new Rectangle(5, 3);

//gets values from the area() and multipliArea() methods
var area = ob_rect.area();
var m_area = ob_rect.multipliArea(3);

//add in the #ex_res html element the values of area and m_area
document.getElementById('ex_res').innerHTML ='area() method returned: '+ area +'<br>multipliArea(3) returned: '+ m_area;

Static Methods

The static methods inside the class are created with the static keyword.
Inside and Outside the class body, the static methods are called with the name of the class.

A static method cannot be called with the "this" keyword or through a class instance.

- Example:
<div id='ex2_res'>Here we show results.</div>

class User {
 //receives user name when an object of the class is created
 //set property
 this.user = user;

 //static method
 static Hello(name){
 return 'Hello '+ name;

 //basic method, to see how to call a static method inside other method
 var re = User.Hello(this.user);
 return '<h2>'+ re +'</h2>';

//usage, create an object of the class
let ob_usr = new User('MarPlo');

//add in the #ex2_res html element the value returned by titleHello()
document.getElementById('ex2_res').innerHTML = ob_usr.titleHello();

//get the result from the static method (with the class name)
var hello = User.Hello('Peace');

Multiple instances of a class

You can create and use multiple objects instances of the same class, with different values.

- Example:
<div id='ex_hi1'>#ex_hi1 div</div>
<div id='ex_hi2'>#ex_hi2 div</div>

class Test {
 constructor(name){ = name;

 //adds 'Helo name' in the #id HTML element 
 document.getElementById(id).innerHTML ='<h3>Hello '+ +'</h3>';

//first object instance
let ob1 = new Test('Happines');
ob1.addHello('ex_hi1'); //calls the method with the ID of a Div

//second instance
let ob2 = new Test('Peace');
var hi2 = ob2.addHello('ex_hi2'); //calls the method with other ID

Getter and Setter class methods

The getter/setter syntax exists for properties that must be calculated based on conditions or other properties.
The getter methos is defined with the get keyword.
The setter methos is defined with the set keyword.
The getter and setter must have the same name.
The setter must have an argument. It is automatically called when a value is assigned to a property with the same name as setter; that value is passed for argument.

- You can understand from the code in this example:
<div id='ex3_res'>Here we show results.</div>

class Article {
 this.th1 ='No title';

 //getter, returns the th1 property that is defined in setter
 get title(){
 return this.th1;

 //setter, it is called when a value (val) is assigned to the title property
 set title(val){
 if(val !='') this.th1 ='<h1>'+ val +'</h1>';

//usage, create an object of the class
let ob_art = new Article();

//assigns a value to title property
//this code will automatically call the setter: title() with the value as argument
ob_art.title =' - JS Classes';

//this code will automatically call the getter: title()
var th1 = ob_art.title;

//add in the #ex3_res html element the value of th1
document.getElementById('ex3_res').innerHTML = th1;

Daily Test with Code Example

Which attribute is used in <a> tag for the address of the link?
src href rel
<a href="" title=""></a>
Which CSS property sets the type of the text font?
font-family text-decoration font-size
h2 {
What instruction selects all the <div> tags with class="cls"?
querySelector("div.cls") getElementsByTagName("div") querySelectorAll("div.cls")
var elm_list = document.querySelectorAll("div.cls");
var nr_elms = elm_list.length;       // number of selected items
Indicate the function that can be used to get the sum of values in an array.
array_sum() array_diff() array_shift()
$arr =[1, 2, 3, 4);
$arr_sum = array_sum($arr);
echo $arr_sum;       // 10
Define and Use Classes in JavaScript

Last accessed pages

  1. Zodiac Signs JavaScript code (5876)
  2. MySQL Query Builder: Database Pagination (404)
  3. Clear Canvas Context (5487)
  4. querySelector and querySelectorAll (13568)
  5. Get and change IFrame content through a JavaScript script created in another IFrame (9951)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (2753)
  2. Contact page - CoursesWeb (2660)
  3. Tabs effect with CSS (2656)
  4. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (866)
  5. PHP getElementById and getElementsByTagName (746)