Defining Class in JavaScript

JavaScript  is very flexible object-oriented language in case of syntax. In object- oriented programming the concept that comes to our mind with object is ‘Class’. But the interesting fact about JavaScript is that there are no classes in JavaScript. Everything is a object. In case of inheritance, objects inherit from objects, not classes from classes as in the “class”-ical languages. So, isn’t it possible to define a class in JavaScript? The answer is yes.

The goal of this article to demonstrate the ways of defining class in JavaScript. Here are some ways-

1.Using function

Probably, one of the most common way to define a class is to define a normal JavaScript function and then create an object by using the new keyword. To define properties and methods for an object created using function(), the keyword ‘this’ is  used as seen in the following example.

We can instantiate an object using a constructor function of Student. Then to set some properties and call methods we can do the following:

2.Using Object Literals:

Another way of defining class is literals. Literals are shorter way to define objects and arrays in JavaScript.

To create an empty object we can do var empty={}; instead of  normal way

var empty=new object();

For Array we can do:

var array=[]; instead of normal way

var array=new Array();

Here’s the same functionality as described in the previous examples, but using object literal syntax this time:

In this case we don’t need to (and cannot) create an instance of the class, it already exists. So we simply start using this instance.

Such an object is also sometimes called singleton. In java, Singleton means that you can have only one single instance of this class at any time, you cannot create more objects of the same class. But there is no scope of this concept in concept as JavaScript has no deal with class actually, it deals with object.

3. Singleton(Using a function)

Again Singleton? Yes, But the concept is little bit different. Let’s see how?

This way is actually the combination of the other two. The concept is that we can use function to define a singleton object.

So we see that, this is quite similar to 1. But the way of using object is exactly like 2.

Here the main point is that, the new function(){…} does two things at the same time. One, define an anonymous constructor function. Two, invoke it with new. But it might look a bit confusing. It’s an option, when one wants a constructor function that is needed to use only once and there’s no sense of giving it a name.

Summary

In our above discussion, we have tried to discuss different ways of defining class in JavaScript. But don’t forget that JavaScript has no class concept actually. It works with object only in function oriented way. But ‘Class’ keyword is being used now to define a class which is the concept of JavaScript ES6. We’ll talk about it later. That’s for today!!

Happy Coding !!!

Map() method:

This method is used when you need to do some type of transform on every element. The map method will applying a function to all of its elements in the array and creates a new array. Example,

var persons = [

{ id: 1, name: ‘Kamal’, salary: 2000 },

{ id: 2, name: ‘Korim’, salary: 5000 },

{ id: 3, name: ‘Razzak’, salary: 7000 },

{ id: 4, name: ‘Abdul’, salary: 9000 }

];

We need persons id.

var personsId= persons.map(x=> x.id);

console.log(personsId);

Output:  [1, 2, 3, 4]

This new array will always be the same size as the original array, even if you don’t return anything.

Filter() Method:

The filter method creates a new array with all array items that pass the test implemented by the function. The filter method will return an array that is the same size or smaller as the original array.

Use filter method: Filter receives the same arguments as map, and works very similarly.

Example:

var persons = [

{ id: 1, name: ‘Kamal’, salary: 2000 },

{ id: 2, name: ‘Korim’, salary: 5000 },

{ id: 3, name: ‘Razzak’, salary: 7000 },

{ id: 4, name: ‘Abdul’, salary: 9000 }

];

Let’s find out the names of those whose salaries are under 4000.

var newPersons= persons.filter(x=> x.salary>= 4000);

newPersons.forEach(function(person){

console.log(person.name);

});

Output: Korim

Razzak

Abdul

Reduce() Method:

The reduce() method takes an array and apply a function to each item, resulting in a single output value. As a result, an array of numbers we can easily find the total or average of all values.

Example,

var numbers= [0,1,2,3];

var total= numbers.reduce((sum, value)=>sum+value,0);

console.log(total);

Output: 6

Syntax of reduce() method: array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

Combining map(), .filter() and reduce():

map() method and filter() method both return arrays. The reduce method return a single value from  array. So, we can easily use. example,

var persons = [

{ id: 1, name: ‘Kamal’, salary: 2000 },

{ id: 2, name: ‘Korim’, salary: 5000 },

{ id: 3, name: ‘Razzak’, salary: 7000 },

{ id: 4, name: ‘Abdul’, salary: 9000 }

];

find out the sum of their under salary 4000.

var total= persons.map(x=> x.salary)

.filter(x=> x>= 4000)

.reduce((sum, value)=>sum+value,0);

console.log(total);

Output: 21000