DEV Community: Bhavesh Daswani

Composition vs Inheritance

Bhavesh Daswani — Sun, 05 Jan 2020 04:39:20 +0000

Composition vs Inheritance
Inheritance is about what it is while composition is all about what it has or what it's ability is.In Inheritance we pre-define the architecture like parent class is inherited by sub classes and this sub class is inherited by another sub classes and this nesting continues the more nesting we have the more rigid is our code that is more harder to change and some times our code may get fragile that is if we change in parent class it may effect sub class in unexpected manner.For example I have a Base class Human then three sub class young,old,adult then we have inner sub class for each of them which could be male,female.But how this inner classes or inheritance make our code rigid or harder to change in future let's understand this issue with an example.

In class base inheritance i have created three classes Human -> Young -> Male
The method of Young and Human class are available to Male class instance, this is what i mean the inheritance is all about what it is, we are predefine the relationship and there inheritance. Suppose in future we have certain requirement for which we need to change the inheritance flow to Human->Male->Young. Some time it is possible to do change like this, but i am sure that in near future it will break because tight coupling that is Young class depend on Human, Male class depend on Young class will definitely will create issue in future because as a human we cannot predict future, changes will be there so how to resolve this. My preference is composition. Composition focuses on what is the ability, for that to understand i have created two function. A man function return an a instance with sleep ability which is provided by getSleepAbility function. So dividing the requirement into ability and composing required abilities is the answer to tight coupling which is caused by what it is instead of what ability it has.

OOP vs FP with Javascript

Bhavesh Daswani — Sat, 04 Jan 2020 07:46:06 +0000

In this article i want to explain you about when to use what. For which problem functional programming is good and for which problem OOP is good. It is not necessary to use only one paradigm at a time we can combine them and use the power of both paradigm. One example that come into my mind is of react app which uses the power of both the paradigm,for statefull component we use class component(OOP) and for stateless component that is which mainly deal with view part was in functional component (before hooks were introduced).

Before reading below i am assuming you are familiar with OOP and FP in javascript. If not please go through from my article i have written on OOP and FP
OOP in Javascript
FP in Javascript

OOP vs FP:

OOP programming organizes the code as a unit. Here the unit or the object contains the information and operation that belong to same concept. The pieces of the information that reside in the unit are called attribute or state. The operation that can be happen on state are called method. The pillars of OOP are -

Encapsulation
Abstraction
Inheritance
Polymorphism

FP consider data and operation as two different thing. It is all about avoiding side effect and writing pure functions.Functions should not modify its outer world and its return value depends on the argument provided. It is based on different concepts like Pure function, HOF(Hige Order Function), Refrential transparency etc. In it function are first class citizen. I think in FP pure function and compose can provide you extremely powerful results

Both OOP and FP are paradigm that is a design pattern for solving the common problem that is to make our code manageable , managable in the following sense:

Clear and Under-stable: OOP and FP organizes the code in such a way that it becomes easier for other developer to understand over code and also it make our code mode cleaner
Easy to extend: As the app grows and numbers of developers increases, this paradigms makes easier to extend the code.
Easy to maintain: OOP and FP makes code cleaner, this also makes code more maintainable like fixing bug, adding functionality becomes more easier
Memory efficient: In OOP we have concept of inheritance and in FP we have concept of closures which make program more memory efficient.
DRY: Dry means Do not repeat yourself.This paradigm if truly followed it avoids duplication of code by using inheritance in OOP and reusable functions in FP

Difference Between FP and OOP

FP is good for many operation on fixed data while oop programming is good for few operation for common data
FP is stateless means it does not modify the state of the program by return new state every time in immutable fashion while OOP is statefull, its method changes the state of its properties.
FP is about having pure function that has no side effects while OOP has side effect as it modify its state.
FP is declarative it focuses on what need to be done while OOP is imperative it focuses on how the things should be done

When to use What:

If you have few things that requires lot of operation lot of little functions applied to it then FP is good options. Functional programming works really well for high performance and processors as you can run it on multiple processors simultaneously.
If you have too many things like characters in game and few operation then OOP is good choice

Functional Programming in javascript

Bhavesh Daswani — Sun, 29 Dec 2019 14:35:28 +0000

My aim is that after you read this article, you understand what is a functional programming. There is lot of articles for OOP, myself have return an article on OOP, but when i started learning functional programming i started loving it. Its not about OOP vs FP(functional programing) but how to take advantage of both.

In this article, I want to explain about functional programming and how good javascript support functional programming.

What is Functional Programming?
In any program there is two core thing data and behavior. Data could be array, object,hashmap etc. Data can be in any form. Behavior is function that perform operation on data. Functional programming says that data and behavior(function) are two different thing. they should be kept separate. It simply says that you pass data to function it will process it and return new object.

There are many new terms in functional programming learning for first time will be exhaustive but my personal suggestion is that you should give this a try.

Before understanding how Function programming works in javascript and its terms, It is necessary to understand that function are first class citizen in js, and also closure and High order function. If you are unclear about them you can checkout on my blog on this, https://rebrand.ly/javascript-closures-9d89f

Functional programming is all about separation of concerns.It's all about packaging our code into separate chunks so that everything's is well organized in each part of our code.Functional programming says that data and behavior(function) are two different thing. they should be kept separate. The core pillar of functional programming is pure function.

What are pure function?
A function that follow below point are pure function:

Given the same input it will provide the same output no matters how many times we call it
It does not modify its outer world that is, it has no side effect. Let's understand with example

In above I have created two function removeLastItem and immutablyRemoveLastItem.
The removeLastItem has side effect as it modify outer world variable arr while immutablyRemoveLastItem function has no side effect because it first copy the external variable using concat method and then alter the new array(which it has ownership of) and return it.

Let understand with example the concept of same input then same out no matter how many time the function is called

In above example I have created two function addTwoNumber,multiplyWithCurrentTime. addTwoNumber is pure function because it does not have any side effect and also with same input it will provide same output. multiplyWithCurrentTime is not pure function because with same input it can generate different output depending on current time.

There are some terms in functional programming let's define them

Referential Transparency
In functional programming, referential transparency is generally defined as the fact that an expression, in a program, may be replaced by its value (or anything having the same value) without changing the result of the program. This implies that methods should always return the same value for a given argument, without having any other effect.
Let's understand it with example

In the above example function a Is referential transparent as it can be replaced by its value without effecting the result of the program while function c is not referential transparent because here replacing with the value will effect the result of the program as function c has console.log which is one type of side effect.

Idempotence
A function is idempotence if for same input it provides same output or does what we expect, Idempotence is different from pure function as it allow side effect. A n example could be get api that with same input provide same output no matter how many times it is called.Another Feature of Idempotence is the idea of calling itself again and again and still the output is the same.Let see other example also:

In the above example there are three function notIdempotenceFn,idempotentFn and getAbsolute. In notIdempotenceFn function will result different output in each call so it is not idempotent while the function idempotentFn is idempotent as for same input it
will have same output that is console.log which will print the output to the console. One note idempotentFn function is not pure as it print in console that is altering the outside world. getAbsolute function is an idempotent function as it provide the same result no matter how many times i call it.

Imperative vs Declarative
Imperative code means what to do and how to do while declarative code means what to do and what need to be done it will not tell how to do it. Let's understand with an example

In the above example we have one task to console.log 1 to 5 and how this task can be done imperatively and declaratively. The for loop is imperative because here we define what to do that is console.log and also how to do by defining variable let i=1, its condition i<=5 and increment by 1 i++. The other example is forEach loop which is declarative because here we specify what to do that is console.log and not how to do which is manage by forEach function.
Why i am teaching you about Imperative vs Declarative because functional programming help us to be more declarative by using compose which we will learn later. compose tell our programs what to do instead of how to do it.

Immutability
Immutability means not to modify original state by copying it and then applying required changes to the new state and returning the new state. Let's see an example

In above example we have two function mutatingState and immutatingState. The function mutatingState changes the orignal state while immutatingState function creates a copy of the orignal state and return new state. Functional programming recommends immutability as immutability provide stability and predictability to our code. We will come to know the importance of immutability when we understand composing.

High Order Function
In javascript function are first class citizen. First class citizen means function can be pass as argument,function can be a return value, function can be assign to variable.
What is High Order Function?
A function that receive function as an argument or a function whose return value is function,such function is a High order Function. let's see with an example

In above example we have two function hocFn and hocFn2. hocFn function return function so it is HOC while hocFn2 accept function as argument so it is also HOC.

Closure
Like object,Closures in JavaScript are a mechanism for containing some sort of state and in JavaScript we create a closure whenever a function accesses a variable defined outside of the immediate function scope that is the scope of the parent. And it's fairly easy to create a closure.We simply define a function inside another function and expose the inner function either by returning
it or passing it to another function so that we can use that variable.

I have written separate blog on closure be sure to check on that
https://rebrand.ly/javascript-closures-9d89f

Currying
Currying is a technique of translating a function evaluation that takes multiple parameter into evaluating multiple function that each takes a single parameter.
Let's understand with an example

In above example i have created two function multiply and currying. The multiple function takes two parameter while the currying function take single parameter at time. In this example i have tried to show how we can convert a function with multiple parameter multiply(a,b) into multiple function with single parameter curring.

Partial Application
Partial Application means we are partially applying a function. Suppose a function has 5 arguments. We want its execution to be partially that is for now i will pass 2 arguments and rest of the 3 arguments i will pass later, this is called partial application and it is possible due to closure because when we apply function partially the argument we passed are remembered and are used when we fully execute the function with remaining number of arguments. Let's understand with example.

In above example partiallyMultiplyBy5 partially apply multiply function with 5 as first argument. When executing the partiallyMultiplyBy5 function we just have to pass remaining parameter as the first argument 5 has been remember due to closure.

Memoization:
Memoization is a special form of caching. Memoization cache the return value of the function based on its parameter that is if the parameter does not change then the return value is memoized. let's see with an example

In above example we have two function notMemoized and memoizedFn. notMemoized function will execute the function logic of multiplication for each execution also if the parameter is same. While for memoizedFn the function logic of multiplication will only be executed if the result is not cached ,for second time with same parameter the value will return from cache.

Compose and Pipe

Composing is an idea that describe that the transformation of the data should be obvious. Let's describe compose in simple terms: if there is a data which is processed by a function and that function return new form of the data, the return data is again processed by another function which return new form of data and this chain continues until we get required output. We can say for compose that it is a design principle which describe the relationship with different components (function), here we arrange components in a assembly line which describe how the data is transformed from one function to another.
Pipe is similar to compose the difference is in execution. compose execute the components from right to left while pipe execute the component from left to write.

let see with an example

In above example i have tried to explain how we can use compose to transform the data, In the example there is requirement to multiple a number with 3 and then get absolute of the number. These are two different operation so i have created two function multiplyWith3,getAbsouleOfNum which are pure function. Now if we do not use compose then first we have to call multiplyWith3 function store it output in the variable , then use that variable to call getAbsouleOfNum function to get the desired result, this is a one way to do it. Let's now do in compose way, here we have two component(function) multiplyWith3,getAbsouleOfNum we can arrange them in a sequence in a manner that output of one program is input of another so i have created multiplyBy3andGetAbsolute function which will first execute getAbsouleOfNum and then the output of the getAbsouleOfNum function will be provided to multiplyWith3. We can also do this in the pipe way for that i have created multiplyBy3andGetAbsolutePipe here first muliplyBy3 is executed whose output is passed to getAbsouleOfNum

Arity
Arity mean number of argument the function takes. It is preferred to have less number of argument to a function to make it more usable. My preference for number of argument a function should have is 1 or 2. Let's see with an example

In above example I have created two function addNumber and getAbsoulte. addNumber function has arity of 2 as it has two argument while getAbsoulte has arity of 1 as it has one argument.

Conclusion

Functional programming suggests that the data and function(effect) should be separate. The function should have following properties

Single task: A Function should be small and should perform single task
Pure: Function should not have side effect and for same input it should provide same out
Should have return statement.
should be compose-able
Immutable: Function should return a new copy of data and should not change the original state
Should be predictable

Object Oriented Programing in Javascript

Bhavesh Daswani — Sun, 22 Dec 2019 07:11:31 +0000

What is OOP(Object Oriented Programing)?
OOP is a programming pattern that says the state(property) and the action(method) should be kept together in a single box(class).OOP tries to model real-world objects. It is useful to organize our code.

There are two types of OOP languages:

Class based languages like java, C#, php,C++ etc
Prototype based languages javascript

There are four principal/pillars of OOP:

Encapsulation:
- OOP puts things(code) into an object and organizes the things in units that model the real world this is encapsulation.
Abstraction
- OOP hides the complexity and the implementation detail, we just have to call the method and the rest of the complexity are hidden from us, this is an abstraction. Abstraction also provide a layer of security like private property or private method
Inheritance
- Inheritance means reusing of the code, that is extending from parent class where all the property and method (protected or public) are available to the child class
Polymorphism
- Polymorphism means many forms(Poly means many; morphism means form). But how it's related to OOP. It is related to OOP by concept called overriding and overloading.
- overriding: Suppose we have method name getMarks in parent class and with the same name we have a method in child class which will override the functionality of parent class, this is overriding. It is useful when we want custom logic for child class still using the some of the logic from the parent class
- overloading: In same class we can have two or more method with same name but with different number of argument or with different data type, this is called overloading.

Above was the definition and principal of OOP. Now lets understand how to implement OOP in javascript.

For understanding OOP in javascript, you should have a clear knowledge of prototypal inheritance in javascript, If you are unclear on that then please check my blog on it https://dev.to/bhaveshdaswani93/prototype-inheritance-in-javascript-1c3g

We have four ways for working with OOP in javascript:
1.Factory function.
2.Function constructor
3.Object.create()
4.ES6 classes

Let see them one by one

1.Factory Function:
In this, we create a function that receives parameter and in return, it provides an object, let see how it is useful in avoiding duplication of code.

Here in the example, personA and personB both have getFullName function definition which indicate duplication of the code which is not good programming practice. To avoid that we have created a factory function called person in which we pass the first_name and last_name as a parameter and it will provide the required object. By using factory function we have avoided repeating our code. But here is a problem with memory efficiency as getFullName function will be created each time the person function is called which is not good because if we can place getFullName in commonplace in memory where each new person object can call it then it would also be memory efficient, for to achieve this let's move to constructor function.

2.Function constructor:
What is a constructor function? A function that is initiated with a new keyword is a constructor function and the constructor function should start with a capital letter ( It is good practice to name constructor function with the first letter as capital like Person is good against person ). Let see this in an example and how it helps to be memory efficient.

In the above example Person is the constructor function and it has getFullName function in its prototype object, I have created two instance personA, personB from Person constructor. We can see that the code is resuable by having a constructor and prototype. Constructor function has that code which is unique to an instance that means personA and personB has there own first_name and last_name properties while the prototype has that code which is shared by the instance and also prototype properties are not copied to the instance, they are resolved through prototype chain which makes constructor function memory efficient.

3.Object.create():
The Object.create() method creates a new object, using an existing object as the prototype of the newly created object. In earlier section we have learned how to create prototype using constructor function, let see how we can create prototype using Object.create() with an example

In the above example, I have created a person object and use it as the prototype of the personA object using Object.create(person). Object.create will create a prototype chain where __proto__ property of personA will point to person object.

4.ES6 classes:
ES6 brings the keyword class which is familiar to most of the OOPS developers. Class in javascript is like a syntactical sugar behind the scenes it still follows prototypal inheritance. The class keyword was brought to bring simplicity and easiness for the developers to write OOP programming in javascript. let's see classes in action.

Above is an example of class. I have created Person class which contains the constructor function whose properties and method will be copied to each instance while the rest of the method or properties like getFullName is shared.
Let me provide you a cheat sheet for classes: anything you want to be unique to the instance like first_name, last_name is unique to each instance, place that property or method in the constructor function and shareable property or method like getFullName should be placed outside the constructor and should be inside the class.

Conclusion:

OOP is a programming style that helps you to write clear, understandable, easy to extend, easy to maintain, memory efficient and DRY code.

In Javascript, we have 4 ways to write OOP code

Factory function
Constructor function
Object.create
Classes

Prototype Inheritance in Javascript

Bhavesh Daswani — Sun, 08 Dec 2019 06:52:46 +0000

There are two main pillars of javascript

Closure
Prototypal Inheritance

For Closure, you can check my blog on https://rebrand.ly/javascript-closures-9d89f
Let's understand Prototype inheritance with a basic example as simple Example makes understanding topics easier.

Here I created variable two variable a,b which is an array and then try to concat them using a.concat(b).You will be thinking where is prototypal inheritance here in the example. It is there, a variable does not have concat method and then also a.contcat(b) is working but how, because of prototypal inheritance. Variable a has a special property __proto__ which is pointing to Array and the Array has the concat method, so it's working.

I am again using a simple example as it explains the core concept very easily. Here I want you to understand the prototypal chain. In this example, I have created the variable a that is an array. I am using a method a.toString() which is not a property or method of the variable a so how does it resolve let's understand. If the javascript engine can not find a property or method in the main variable then it will look the __proto__ property. __proto__ property will points to its parent here which is Array, now the javascript engine will look in the Array and try to find the toString method which is not available in Array, Array also has __proto__ property which points to base Object(I will explain what is base Object). Now the javascript engine will look in the base Object for the toString method which is available there and from the base Object, it gets resolved.

Note: Base Object is the very core point in javascript, you can say it is the very end for prototype chain lookup as the proto property of the base Object points to null. If the javascript engine cannot resolve the property or method until up to the base Object then it will throw an error.

Let's understand two most confusing terms __proto__ property and prototype object in prototypal inheritance, one of them __proto__ would have been clear from above examples.

__proto__ points to the parent prototype object. In the second example of a.toString() a.__proto__ property points to the Array.prototype, let's conclude this with an example

From the above example, I want you to convey that the __proto__ property of variable points to the parent prototype object. In this example I have created variable a which is an array and the a.__proto__ points to Array.prototype

Note: If you want to check that a property belongs to the variable itself not the prototype chain you have a method hasOwnProperty which works as follows

Variable b is an object with property name so b.hasOwnProperty('name') return true while b.hasOwnProperty('toString') return false as toString method belongs to the parent.

Let me conclude this blog with an idea of how memory efficient is a prototypal inheritance. Let reference again the example of a.concat suppose if all the method of an array is copied to each new variable then how much memory each variable will consume. so by prototypal inheritance, every method of array resides in one place of memory and is referenced by each new variable, this type of referencing makes prototypal inheritance very memory efficient.