DEV Community: Rohan Shakya

Understanding the Object-Oriented Programming

Rohan Shakya — Fri, 04 Dec 2020 06:02:14 +0000

Object-Oriented Programming is a design philosophy also known as OOP. Object-Oriented Programming(OOP) uses different sets of programming languages than old procedural programming languages(C, Pascal, etc.)Everything in OOP is grouped as self-sustainable “objects”. Hence you gain reusability by means of OOP concepts.

OOP allows the decomposition of a problem into a number of entities called objects and then builds data and functions around these objects. Data cannot be accessed directly, they are only accessible through the member function. There might be a number of objects in a program written in OOP language. Those objects can communicate with each other by calling their respective member functions. Organization of data and function in OOP is shown below:

OOP has taken the best ideas of structured programming and combined them with several powerful new concepts that encourage us to perform the task of programming in a new way. In general, when programming in an object-oriented fashion, we break down a problem into a subgroup of related parts that take into account both code and data related to each group.

The terminology used in OOP:

Object

An object is any entity, thing, or organization that exists in the real world, It consists of two fundamentals characteristics: its attributes and behaviors. For example, a dog is an object having attributes such as color, weight, age, etc, and behaviors such as barking. In OOP, attributes are represented by data(variables) and the behaviors are represented by the functions.

Object Car
Data                              Function
plateNumber = 120                 accelerate()
speed = 100                       
color = black

// Object in Javascript

// Defining object 

// Using an Object Literal
var car = {
  plateNumber: 120,
  maxSpeed: 100,
  color: 'black',
  accelerate: function(speed, time){
    console.log(speed * time);
  }
}

// Using an Object Constructor
var Car = function(plateNumber, maxSpeed, color){
  this.plateNumber = plateNumber;
  this.maxSpeed = maxSpeed;
  this.color = color;
  this.accelerate = function(speed, time){
    console.log(speed * time);
  }
}
var car1 = new Car(120, 100, 'black');

Objects are the basic run-time entities in an object-oriented system that may be created or destroyed at run time. The data and function containing in an object are called its member data and member function. The member function of an object can only access its data. The concept behind OOP is to integrate both data and function into a single entity. This entity is also called an object.

Class

A class is simply a representation of a type of object. It is the blueprint/prototype that describes the details of an object. The entire set of data and code of an object can be made a user-defined data type with the help of a class. Once a class has been defined, we can create any number of objects associated with that class. For example, mango, apple, and orange are members of class fruit. If the fruit has been defined as a class, then the statement fruit mango will create an object mango belonging to the class fruit.

A class has three areas: public, private, and protected. The functions and variables defined inside the public areas can be accessed by any object. The functions and variables defined inside the private areas can be accessed by the object of the same class and the protected areas can be accessed by the object from the same class and derived class. It incorporated the concept of data hiding.

Class Student                     Class Vehicle
Id                                Name
Name                              Maker
getName()                         Engine
printGrade()                      getDetails()

// Defining Class in Javascript using es6

class Vehicle { 
  constructor(name, maker, engine) { 
    this.name = name; 
    this.maker =  maker; 
    this.engine = engine; 
  } 
  getDetails(){ 
      return (`The name of the bike is ${this.name}.`) 
  } 
} 
// Making object with the help of the constructor 
let bike1 = new Vehicle('Hayabusa', 'Suzuki', '1340cc'); 
let bike2 = new Vehicle('Ninja', 'Kawasaki', '998cc');

Defining class doesn't create an object but class is the description of the object’s attributes and behavior. So no memory is allocated when a class is created.

Data Abstraction & Encapsulation

In OOP, abstraction defines the conceptual boundaries of an object. Abstraction is the act of representing essential features without including the background details. It focuses on the outside view of an object, separating its essential behavior from its implementation. To understand this concept, take an example of ‘switch-board’. We only press particular switched as per our requirement. We need not know the internal working of these switched. This is an abstraction where we only know the essential things to operate on a switch-board without knowing the background details of the switch-board.

Encapsulation is a way of organizing data and function into a structure (called class) by concealing (hiding) the way the object is implemented, which is preventing access to data by any means other than those specified. Encapsulation, therefore, guarantees the integrity of the data contained in the object. The best application of encapsulation is making the data fields private and using public access to functions. However, we cannot hide an entire object. To use an object, a part of it needs to be accessed by users. To provide this access, abstraction is used. Abstraction provides access to a specific part of data while encapsulation hides the data. Therefore, abstraction and encapsulation complement each other.

//encapsulation example 
class person{ 
    constructor(name,id){ 
        this.name = name; 
        this.id = id; 
    } 
    addAddress(addr){ 
        this.addr = addr; 
    } 
    getDetails(){ 
        console.log(`Name is ${this.name},Address is: ${this.addr}`); 
    } 
} 

let person1 = new person('John',20); 
person1.addAddress('California'); 
person1.getDetails();

// Abstraction example 

function person(fname,lname){ 
    let firstname = fname; 
    let lastname = lname; 

    let getDetails_noaccess = function(){ 
        return (`First name is: ${firstname} Last  
            name is: ${lastname}`); 
    } 

    this.getDetails_access = function(){ 
        return (`First name is: ${firstname}, Last  
            name is: ${lastname}`); 
    } 
} 
let person1 = new person('John','Smith'); 
console.log(person1.firstname); 
console.log(person1.getDetails_noaccess); 
console.log(person1.getDetails_access());

Inheritance

The process of creating a new class from an existing class in which objects of the new class inherit the attributes and behaviors of the existing class is known as inheritance. The newly created class is called the derived class or child class or subclass and the class from which the new class is created is class base class or parent class or super-class.

The relationships of classes through inheritance give rise to a hierarchy. It permits the expansion and reuse of existing code without rewriting it hence, the concept of inheritance supports the concept of reusability.

Types

Single Inheritance: The process of creating a new class from an existing class is a single inheritance that is there is only one base class and only derived class in single inheritance.

Multiple Inheritance: The process in which one class can have more than one superclass and inherit features from all parent classes is multiple inheritances.

Hierarchical Inheritance: The process of creating several classes from only one class is called hierarchical inheritance that is there are two or more derived classes and only one base class in hierarchical inheritance.

Multilevel Inheritance: The process of creating a new class from another derived class is called multi-level inheritance.

Hybrid Inheritance: It is the combination of two or more types of inheritance.

//Inhertiance example 

class person{ 
    constructor(name){ 
        this.name = name; 
    } 

    //method to return the string 
    toString(){ 
        return (`Name of person: ${this.name}`); 
    } 
} 

class student extends person{ 
    constructor(name,id){ 
        //super keyword to for calling above class constructor 
        super(name); 
        this.id = id; 
    } 
    toString(){ 
        return (`${super.toString()},Student ID: ${this.id}`); 
    } 
} 
let student1 = new student('John',20);

Polymorphism

Polymorphism is a generic term that means ‘many forms’. It simply means ‘one name many forms’. More precisely Polymorphism means the ability to request that the same operations be performed by a wide range of different types of things.

Polymorphism is an important feature of OOP which refers to the ability of an object to take on different forms depending upon situations. It simplifies coding and reduces the rework involved in modifying and developing an application. It is extensively used in implementing inheritance.

Operator overloading and function overloading are examples of polymorphism in OOP.

Conclusion

The concept of an object helps to translate our thoughts into a program. It provides a way of solving a problem in the same way as a human being perceives a real-world problem and finds out the solution. It is possible to construct large reusable components using object-oriented techniques.

Thanks for your time!! Hope you like it 😃😃

Useful Higher-Order Functions in Javascript

Rohan Shakya — Fri, 04 Dec 2020 05:10:32 +0000

What makes Javascript suitable for functional programming is that it accepts Higher-Order Functions. Higher-Order Functions are extensively used in Javascript.

What is Higher-Order Function?

A higher-order function is a function that receives a function as an argument or returns the function as an output.
Taking other functions as arguments is often referred to as a callback function because it is called back by the higher-order function. This is a concept that Javascript uses a lot.

For example, .map(), .filter() , .reduce() etc. are the some built-in higher order functions.

So let’s discuss some of the useful built-in higher-order functions in Javascript.

.map()

Let’s look at this array method with a simple example. Say you have received an array containing multiple objects — each one representing a person. The thing you need in the end is an array containing only the names of reach person.

// You have:
const persons = [
{id: 1, name: 'John'},
{id: 2, name: 'Bob'},
{id: 3, name: 'Adam'}
];
// What you need:
['John', 'Bob', 'Adam'];

There are multiple ways to achieve this. You might want to do it by creating an empty array then using .forEach() , for(…of), or simply for() to meet your goal.

But now let’s see with a .map() method.

const personsName = persons.map(person => person.name);

How does .map() works?

It takes two arguments, a callback and an optional context (will be considered as ‘this’ in the callback). The callback runs for each value in the array and returns each new value in the resulting array.

Note: the resulting array will always be the same length as the original array.

.reduce()

Just like .map(), reduce also runs a callback for each element of an array. What’s different here is that reduce passes the result of this callback (the accumulator ) from one array element to the other.
The accumulator can be anything such as integer, string, object, array, etc… and must be instantiated or passes when calling .reduce().
Let’s look at an example.

const players= [
    {id: 10, name: 'John', points: 57},
    {id: 11, name: 'Kyle', points: 52},
    {id: 12, name: 'Bob', points: 63}
];

We need to know the total points of all of them. With .reduce(), it’s pretty straight-forward.

const totalPoints = players.reduce((accumulator, person) => {
    return accumulator + person.points;
}, 0);   //172

After running the callback for each element of the array, reduce will return the final value of our accumulator (in our case ‘0’).

Now let’s say I want to find which player has the highest points. For that, I can also use it as well.

const highestPlayer = players.reduce((lowest, player) => {
    return (lowest.points || 0) > player.points ? lowest : player
}, {});

I named my accumulator ‘lowest’. My callback compares the accumulator to each player. If a player has more points than the lowest, then the player becomes the new lowest. So that the one I return.
So, using .reduce() is an easy way to generate a single value of an object from an array.

.filter()

What if you have an array, but only want some of the elements in it? That's where .filter() comes in!

Here’s our data:

const persons = [
   {id: 1, name: 'John', profession: 'Engineer'},
   {id: 2, name: 'Bob', profession: 'Developer'},
   {id: 3, name: 'Rocky', profession: 'Singer'},
   {id: 4, name: 'Kyle', profession: 'Developer'}
];

Say, we want an array of people having the profession of ‘Developer’ only. With .filter(), it could be a lot easier.

const developer = persons.filter(person => {
   return person.profession === 'Developer';
});

Basically, if the callback function returns true, the current element will be in the resulting array. If it returns false, it won't be.

.some()

This array method helps you determine if one or more of its values correspond to something you’re looking for.

Let’s illustrate with an example. Here is a list of random numbers in an array.

const numbers = [1, 2, 3, 4, -1, -2, 5];

You want to know if there are any negative numbers. There are many ways to achieve that goal. But .some() might be an easy way.

const hasNegativeNumbers = numbers.some(number => number < 0); //true

How does it work?

Well, you pass .some() a function as an argument. That function runs for each value in the array. You can then see if the value fits the condition you’ve written. The function must return a boolean (although a truthy/falsy) value works as well. As soon as one true is returned, .some() will itself return true. If none of the values when processed in your condition returns true(if they all return false) then .some() will return false.

Note: As soon as a single true is returned, .some() will stop checking the other array values.

.every()

This array method works similarly to the .some() but it checks if every element or value passes a particular test.

Let's illustrate with an example.

const numbers = [1, 2, 3, 5, 6, 11, 23, 45];

You want to know that all the numbers are greater than 0, then with .every() it’s pretty straight-forward.

const allPositiveNumbers = numbers.every(number => number > 0); //true

It will check each and every element in an array and returns true if all values meet the criteria, false if not.

.find()

This array method does exactly what it says. It finds what you’re looking for. The .find() will return the first value that corresponds to the passed condition. Let’s see with an example.

Here is our list of persons.

const persons = [
   {id: 1, name: 'Ricky', developer: false},
   {id: 2, name: 'Jack', developer: true},
   {id: 25, name: 'Chris', developer: false}
];

If we want an object who has a ‘developer ’ property to true, we can output the value by using .find().

const developer = persons.find(person => person.developer);

Note: if it doesn’t find then it will return undefined.

What is the difference between `.filter()` and `.find()` ?

.find() will return the first match. If more values match your condition then it won’t matter. Only the first match will be returned. If you need a list of all matched then you can use .filter() instead of .find().

Conclusion:

These are the few commonly used built-in higher-order functions. A higher-Order function is a function that may receive a function as an argument and can even return a function.

Higher-Order functions are just like regular functions with an added ability of receiving and returning other functions as arguments and outputs.

Javascript Local Storage Vs Session Storage Vs Cookies

Rohan Shakya — Fri, 04 Dec 2020 04:47:44 +0000

Storing data in the various storage options is very useful. But it is very difficult to know which storage option is best for a particular use case. So let’s discuss what are the differences between each option.

What are Cookies, Local Storage, And Session Storage used for?

They all are used to store information on the user’s browser which can be accessed even after navigating to new pages on your site.

This data is also saved to the user’s exact browser they are using so if they have your site open in any browser, it will only save the data to that browser on the device they are currently on.

This means if you open another site later in a different browser the data will no longer be there.

Storage Limit

Each Storage method has a maximum size of data you can store with it. Both local storage and session storage has a pretty large memory capacity. Local Storage stores up to 10 megabytes and session storage up to 5 megabytes.

But Cookies on the other hand have a very restrictive capacity of 4 kilobytes. This has an incredibly small capacity. So you should not store too much information in cookies.

Access

Each storage method has slightly different levels of accessibility.

Local Storage is accessible in any window or tab that is open to your site. This means if you store some data in local storage on one tab of your browser that same local storage data will be available on all other tabs and windows you have open to that.

But in session storage, data is only available in the current tab you set the session storage data in. Session storage is tied to the particular session and each tab of your browser is its own session.

Lastly, cookies are very similar to local storage in the sense that they are accessible from any window or tab. But cookies are also accessible on the server. Every request you make to your backend server, all your cookies are also sent along. So they are also used for authentication-related tasks as well.

Expiration

Local Storage is very useful as it’s data never expires until you manually remove it. Whereas session storage data will expire as soon as you close the tab you are because data is only available to a particular session which is equivalent to a tab.

Cookies are unique in the sense that you can manually set the expiration date for them.

Syntax

Now let’s look at the syntax for different storage methods.

Storing Data:

Local Storage and session storage has the same syntax. The only difference is the localStorage variable and sessionStorage variable.

In other to set data using local storage or session storage, you use setItem function.

localStorage.setItem("name", "Rohan");
sessionStorage.setItem("name", "Rohan");

This setItem function takes two string parameters. The first parameter is the name and the second parameter is the value.

But cookies have a bit different syntax. You need to access the document.cookie object and set that your cookie.

document.cookie = "name=Rohan";

For storing data in a cookie, you need to use document.cookie’s value to a string where name and value are separated by an equal sign.

In order to set an expiration date, we need to pass the expires key to a UTC date value. We also need to make sure we separate the expires key from our name key with a semicolon.

The syntax looks like:

document.cookie = 
       "name=Rohan; expires=Fri, 01 Jan 9999 00:00:00 GMT";

Getting Data:

In order to get data from local storage and session storage, the syntax is the same using getItem method except for
localStorage or sessionStorage variable.

localStorage.setItem("name", "Rohan");
localStorage.getItem("name"); //Rohan

sessionStorage.setItem("name", "Rohan");
sessionStorage.getItem("name");  // Rohan

But in a cookie, there is no way to get an individual cookie. The only way to get cookies is to get all the cookies at once.

document.cookie = 
      "name=Rohan; expires=Fri, 01 Jan 9999 00:00:00 GMT";
document.cookie = 
      "lastName=Shakya; expires=Fri, 01 Jan 9999 00:00:00 GMT";
document.cookie // name= Rohan, lastName= Shakya

Removing Data:

The syntax for removing data is also very similar in local storage and session storage by using removeItem method.

localStorage.removeItem('name');
sessionStorage.removeItem('name');

It takes a single parameter which is the name of the key-value pair to remove the data.
But in a cookie, as you have already seen, to remove cookies you need to set a cookie again but give it a blank value and pass expiration date.

document.cookie = "name=; expires=Thu, 31 Dec 9999 23:59:59 GMT";

Conclusion

As there is a minor difference between various storing methods, I always use local storage or session storage in most cases. But if you need to access data on the server then cookies are useful.

Hope you like it 🤔🤔

DEV Community: Rohan Shakya

Understanding the Object-Oriented Programming

The terminology used in OOP:

Object

Class

Data Abstraction & Encapsulation

Inheritance

Types

Polymorphism

Conclusion

Useful Higher-Order Functions in Javascript

What is Higher-Order Function?

.map()

How does .map() works?

.reduce()

.filter()

.some()

How does it work?

.every()

.find()

What is the difference between .filter() and .find() ?

Conclusion:

Javascript Local Storage Vs Session Storage Vs Cookies

What are Cookies, Local Storage, And Session Storage used for?

Storage Limit

Access

Expiration

Syntax

Storing Data:

Getting Data:

Removing Data:

Conclusion

What is the difference between `.filter()` and `.find()` ?