JavaScript Classes
In this tutorial, you will learn about JavaScript classes with the help of
examples.
Classes are one of the features introduced in the ES6 version of
JavaScript.
A class is a blueprint for the object. You can create an object from the
class.
You can think of the class as a sketch (prototype) of a house. It contains all
the details about the floors, doors, windows, etc. Based on these
descriptions, you build the house. House is the object.
Since many houses can be made from the same description, we can create
many objects from a class.
Creating JavaScript Class
JavaScript class is similar to the Javascript constructor function, and it is
merely a syntactic sugar.
The constructor function is defined as:
// constructor function
function Person () {
this.name = 'John',
this.age = 23
}
// create an object
const person1 = new Person();
Instead of using the function keyword, you use the class keyword for
creating JS classes. For example,
// creating a class
class Person {
constructor(name) {
this.name = name;
}
}
The class keyword is used to create a class. The properties are assigned in
a constructor function.
Now you can create an object. For example,
// creating a class
class Person {
constructor(name) {
this.name = name;
}
}
// creating an object
const person1 = new Person('John');
const person2 = new Person('Jack');
console.log(person1.name); // John
console.log(person2.name); // Jack
Here, person1 and person2 are objects of Person class.
Note: The constructor() method inside a class gets called automatically
each time an object is created.
Javascript Class Methods
While using constructor function, you define methods as:
// constructor function
function Person (name) {
// assigning parameter values to the calling object
this.name = name;
// defining method
this.greet = function () {
return ('Hello' + ' ' + this.name);
}
}
It is easy to define methods in the JavaScript class. You simply give the
name of the method followed by () . For example,
class Person {
constructor(name) {
this.name = name;
}
// defining method
greet() {
console.log(`Hello ${this.name}`);
}
}
let person1 = new Person('John');
// accessing property
console.log(person1.name); // John
// accessing method
person1.greet(); // Hello John
Note: To access the method of an object, you need to call the method
using its name followed by () .
Getters and Setters
In JavaScript, getter methods get the value of an object and setter methods
set the value of an object.
JavaScript classes may include getters and setters. You use
the get keyword for getter methods and set for setter methods. For
example,
class Person {
constructor(name) {
this.name = name;
}
// getter
get personName() {
return this.name;
}
// setter
set personName(x) {
this.name = x;
}
}
let person1 = new Person('Jack');
console.log(person1.name); // Jack
// changing the value of name property
person1.personName = 'Sarah';
console.log(person1.name); // Sarah
Hoisting
A class should be defined before using it. Unlike functions and other
JavaScript declarations, the class is not hoisted. For example,
// accessing class
const p = new Person(); // ReferenceError
// defining class
class Person {
constructor(name) {
this.name = name;
}
}
As you can see, accessing a class before defining it throws an error.
'use strict'
Classes always follow 'use-strict'. All the code inside the class is
automatically in strict mode. For example,
class Person {
constructor() {
a = 0;
this.name = a;
}
}
let p = new Person(); // ReferenceError: Can't find variable: a
Note: JavaScript class is a special type of function. And the typeof operator
returns function for a class.
For example,
class Person {}
console.log(typeof Person); // function
JavaScript Class Inheritance
In this tutorial, you will learn about JavaScript class inheritance with the
help of examples.
Class Inheritance
Inheritance enables you to define a class that takes all the functionality
from a parent class and allows you to add more.
Using class inheritance, a class can inherit all the methods and properties
of another class.
Inheritance is a useful feature that allows code reusability.
To use class inheritance, you use the extends keyword. For example,
// parent class
class Person {
constructor(name) {
this.name = name;
}
greet() {
console.log(`Hello ${this.name}`);
}
}
// inheriting parent class
class Student extends Person {
let student1 = new Student('Jack');
student1.greet();
Run Code
Output
Hello Jack
In the above example, the Student class inherits all the methods and
properties of the Person class. Hence, the Student class will now have
the name property and the greet() method.
Then, we accessed the greet() method of Student class by creating
a student1 object.
JavaScript super() keyword
The super keyword used inside a child class denotes its parent class. For
example,
// parent class
class Person {
constructor(name) {
this.name = name;
}
greet() {
console.log(`Hello ${this.name}`);
}
}
// inheriting parent class
class Student extends Person {
constructor(name) {
console.log("Creating student class");
// call the super class constructor and pass in the name parameter
super(name);
}
let student1 = new Student('Jack');
student1.greet();
Here, super inside Student class refers to the Person class. Hence, when the
constructor of Student class is called, it also calls the constructor of
the Person class which assigns a name property to it.
Overriding Method or Property
If a child class has the same method or property name as that of the parent
class, it will use the method and property of the child class. This concept is
called method overriding. For example,
// parent class
class Person {
constructor(name) {
this.name = name;
this.occupation = "unemployed";
}
greet() {
console.log(`Hello ${this.name}.`);
}
// inheriting parent class
class Student extends Person {
constructor(name) {
// call the super class constructor and pass in the name parameter
super(name);
// Overriding an occupation property
this.occupation = 'Student';
}
// overriding Person's method
greet() {
console.log(`Hello student ${this.name}.`);
console.log('occupation: ' + this.occupation);
}
}
let p = new Student('Jack');
p.greet();
Run Code
Output
Hello student Jack.
occupation: Student
Here, the occupation property and the greet() method are present in
parent Person class and the child Student class. Hence, the Student class
overrides the occupation property and the greet() method.
Uses of Inheritance
• Since a child class can inherit all the functionalities of the parent's
class, this allows code reusability.
• Once a functionality is developed, you can simply inherit it. No need
to reinvent the wheel. This allows for cleaner code and easier to
maintain.
• Since you can also add your own functionalities in the child class,
you can inherit only the useful functionalities and define other
required features.
JavaScript for... of Loop
In this tutorial, you will learn about JavaScript for...of loop with the help of
examples.
In JavaScript, there are three ways we can use a for loop.
• JavaScript for loop
• JavaScript for...in loop
• JavaScript for...of loop
The for...of loop was introduced in the later versions of JavaScript ES6.
The for..of loop in JavaScript allows you to iterate over iterable objects
(arrays, sets, maps, strings etc).
JavaScript for...of loop
The syntax of the for...of loop is:
for (element of iterable) {
// body of for...of
}
Here,
• iterable - an iterable object (array, set, strings, etc).
• element - items in the iterable
In plain English, you can read the above code as: for every element in the
iterable, run the body of the loop.
for...of with Arrays
The for..of loop can be used to iterate over an array. For example,
// array
const students = ['John', 'Sara', 'Jack'];
// using for...of
for ( let element of students ) {
// display the values
console.log(element);
}
Run Code
Output
John
Sara
Jack
In the above program, the for...of loop is used to iterate over
the students array object and display all its values.
for...of with Strings
You can use for...of loop to iterate over string values. For example,
// string
const string = 'code';
// using for...of loop
for (let i of string) {
console.log(i);
}
Run Code
Output
c
o
d
e
for...of with Sets
You can iterate through Set elements using the for...of loop. For example,
// define Set
const set = new Set([1, 2, 3]);
// looping through Set
for (let i of set) {
console.log(i);
}
Run Code
Output
1
2
3
for...of with Maps
You can iterate through Map elements using the for...of loop. For example,
// define Map
let map = new Map();
// inserting elements
map.set('name', 'Jack');
map.set('age', '27');
// looping through Map
for (let [key, value] of map) {
console.log(key + '- ' + value);
}
Run Code
Output
name- Jack
age- 27
User Defined Iterators
You can create an iterator manually and use the for...of loop to iterate
through the iterators. For example,
// creating iterable object
const iterableObj = {
// iterator method
[Symbol.iterator]() {
let step = 0;
return {
next() {
step++;
if (step === 1) {
return { value: '1', done: false};
}
else if (step === 2) {
return { value: '2', done: false};
}
else if (step === 3) {
return { value: '3', done: false};
}
return { value: '', done: true };
}
}
}
}
// iterating using for...of
for (const i of iterableObj) {
console.log(i);
}
Run Code
Output
1
2
3
for...of with Generators
Since generators are iterables, you can implement an iterator in an easier
way. Then you can iterate through the generators using the for...of loop.
For example,
// generator function
function* generatorFunc() {
yield 10;
yield 20;
yield 30;
}
const obj = generatorFunc();
// iteration through generator
for (let value of obj) {
console.log(value);
}
Run Code
Output
10
20
30
for...of Vs for...in
for...of for...in
The for...of loop is used to iterate The for...in loop is used to iterate through the keys of an
through the values of an iterable. object.
The for...of loop cannot be used to You can use for...in to iterate over an iterable such arrays
iterate over an object. strings but you should avoid using for...in for iterables.
The for...of loop was introduced in ES6. Some browsers may not support
its use. To learn more, visit JavaScript for...of Support.
JavaScript Proxies
In this tutorial, you will learn about JavaScript proxies with the help of
examples.
In JavaScript, proxies (proxy object) are used to wrap an object and
redefine various operations into the object such as reading, insertion,
validation, etc. Proxy allows you to add custom behavior to an object or a
function.
Creating a Proxy Object
The syntax of proxy is:
new Proxy(target, handler);
Here,
• new Proxy() - the constructor.
• target - the object/function which you want to proxy
• handler - can redefine the custom behavior of the object
For example,
let student1 = {
age: 24,
name: "Felix"
}
const handler = {
get: function(obj, prop) {
return obj[prop] ? obj[prop] : 'property does not exist';
}
}
const proxy = new Proxy(student1, handler);
console.log(proxy.name); // Felix
console.log(proxy.age); // 24
console.log(proxy.class); // property does not exist
Run Code
Here, the get() method is used to access the object's property value. And if
the property is not available in the object, it returns property does not exist .
As you can see, you can use a proxy to create new operations for the
object. A case may arise when you want to check if an object has a
particular key and perform an action based on that key. In such cases,
proxies can be used.
You can also pass an empty handler. When an empty handler is passed,
the proxy behaves as an original object. For example,
let student = {
name: 'Jack',
age: 24
}
const handler = { };
// passing empty handler
const proxy1 = new Proxy(student, {});
console.log(proxy1); // Proxy {name: "Jack", age: 24}
console.log(proxy1.name); // Jack
Run Code
Proxy handlers
Proxy provides two handler methods get() and set() .
get() handler
The get() method is used to access the properties of a target object. For
example,
let student = {
name: 'Jack',
age: 24
}
const handler = {
// get the object key and value
get(obj, prop) {
return obj[prop];
}
}
const proxy = new Proxy(student, handler);
console.log(proxy.name); // Jack
Run Code
Here, the get() method takes the object and the property as its parameters.
set() handler
The set() method is used to set the value of an object. For example,
let student = {
name: 'John'
}
let setNewValue = {
set: function(obj, prop, value) {
obj[prop] = value;
return;
}
};
// setting new proxy
let person = new Proxy(student, setNewValue);
// setting new key/value
person.age = 25;
console.log(person); // Proxy {name: "John", age: 25}
Run Code
Here, a new property age is added to the student object.
Uses of Proxy
1. For Validation
You can use a proxy for validation. You can check the value of a key and
perform an action based on that value.
For example,
let student = {
name: 'Jack',
age: 24
}
const handler = {
// get the object key and value
get(obj, prop) {
// check condition
if (prop == 'name') {
return obj[prop];
} else {
return 'Not allowed';
}
}
}
const proxy = new Proxy(student, handler);
console.log(proxy.name); // Jack
console.log(proxy.age); // Not allowed
Run Code
Here, only the name property of the student object is accessible. Else, it
returns Not allowed .
2. Read Only View of an Object
There may be times when you do not want to let others make changes in
an object. In such cases, you can use a proxy to make an object readable
only. For example,
let student = {
name: 'Jack',
age: 23
}
const handler = {
set: function (obj, prop, value) {
if (obj[prop]) {
// cannot change the student value
console.log('Read only')
}
}
};
const proxy = new Proxy(student, handler);
proxy.name = 'John'; // Read only
proxy.age = 33; // Read only
Run Code
In the above program, one cannot mutate the object in any way.
If one tries to mutate the object in any way, you'll only receive a string
saying Read Only .
3. Side Effects
You can use a proxy to call another function when a condition is met. For
example,
const myFunction = () => {
console.log("execute this function")
};
const handler = {
set: function (target, prop, value) {
if (prop === 'name' && value === 'Jack') {
// calling another function
myFunction();
}
else {
console.log('Can only access name property');
}
}
};
const proxy = new Proxy({}, handler);
proxy.name = 'Jack'; // execute this function
proxy.age = 33; // Can only access name property
Run Code
JavaScript proxy was introduced from the version of JavaScript ES6.
Some browsers may not fully support its use. To learn more,
visit JavaScript proxy.
Javascript setTimeout()
In this tutorial, you will learn about the JavaScript setTimeout() method with
the help of examples.
The setTimeout() method executes a block of code after the specified time.
The method executes the code only once.
The commonly used syntax of JavaScript setTimeout is:
setTimeout(function, milliseconds);
Its parameters are:
• function - a function containing a block of code
• milliseconds - the time after which the function is executed
The setTimeout() method returns an intervalID, which is a positive integer.
Example 1: Display a Text Once After 3 Second
// program to display a text using setTimeout method
function greet() {
console.log('Hello world');
}
setTimeout(greet, 3000);
console.log('This message is shown first');
Run Code
Output
This message is shown first
Hello world
In the above program, the setTimeout() method calls the greet() function
after 3000 milliseconds (3 second).
Hence, the program displays the text Hello world only once after 3 seconds.
Note: The setTimeout() method is useful when you want to execute a block
of once after some time. For example, showing a message to a user after
the specified time.
The setTimeout() method returns the interval id. For example,
// program to display a text using setTimeout method
function greet() {
console.log('Hello world');
}
let intervalId = setTimeout(greet, 3000);
console.log('Id: ' + intervalId);
Run Code
Output
Id: 3
Hello world
Example 2: Display Time Every 3 Second
// program to display time every 3 seconds
function showTime() {
// return new date and time
let dateTime= new Date();
// returns the current local time
let time = dateTime.toLocaleTimeString();
console.log(time)
// display the time after 3 seconds
setTimeout(showTime, 3000);
}
// calling the function
showTime();
Run Code
Output
5:45:39 PM
5:45:43 PM
5:45:47 PM
5:45:50 PM
..................
The above program displays the time every 3 seconds.
The setTimeout() method calls the function only once after the time interval
(here 3 seconds).
However, in the above program, since the function is calling itself, the
program displays the time every 3 seconds.
This program runs indefinitely (until the memory runs out).
Note: If you need to execute a function multiple times, it's better to use
the setInterval() method.
JavaScript clearTimeout()
As you have seen in the above example, the program executes a block of
code after the specified time interval. If you want to stop this function call,
you can use the clearTimeout() method.
The syntax of clearTimeout() method is:
clearTimeout(intervalID);
Here, the intervalID is the return value of the setTimeout() method.
Example 3: Use clearTimeout() Method
// program to stop the setTimeout() method
let count = 0;
// function creation
function increaseCount(){
// increasing the count by 1
count += 1;
console.log(count)
}
let id = setTimeout(increaseCount, 3000);
// clearTimeout
clearTimeout(id);
console.log('setTimeout is stopped.');
Run Code
Output
setTimeout is stopped.
In the above program, the setTimeout() method is used to increase the value
of count after 3 seconds. However, the clearTimeout() method stops the
function call of the setTimeout() method. Hence, the count value is not
increased.
Note: You generally use the clearTimeout() method when you need to cancel
the setTimeout() method call before it happens.
You can also pass additional arguments to the setTimeout() method. The
syntax is:
setTimeout(function, milliseconds, parameter1, ....paramenterN);
When you pass additional parameters to the setTimeout() method, these
parameters ( parameter1 , parameter2 , etc.) will be passed to the
specified function.
For example,
// program to display a name
function greet(name, lastName) {
console.log('Hello' + ' ' + name + ' ' + lastName);
}
// passing argument to setTimeout
setTimeout(greet, 1000, 'John', 'Doe');
Run Code
Output
Hello John Doe
In the above program, two parameters John and Doe are passed to
the setTimeout() method. These two parameters are the arguments that will
be passed to the function (here, greet() function) that is defined inside
the setTimeout() method.
