Different Between Declarative Over Imperative 

In this article, we are going to learn declarative over imperative style. This article will demonstrate the difference between declarative over imperative style. The React is completely written in the declarative style. You will understand the reason after a few minutes. So in this lesson will briefly understand what is the difference between declarative over imperative style. Declarative and Imperative are two major concepts need to be clear before you dive into react application.

declarative over imperative

Now let’s understand what is declarative over imperative.


Declarative over Imperative

Declarative style it means developer write How it should be, not how to do. On the other hand in imperative style developer write how to do,  in the imperative style developer define a task step by step. Now the better choice to use in your code is a declarative style. Because simplicity is always better. Simplicity is closely related to the kiss principle stands for keep it simple stupid? the gist is that simple system works better.

But why declarative style a better choice?

The benefit is that declarative style makes your code simple reduce complexity and Makes your code Easier to read and understand.

Now let’s take a look at the small difference between declarative and imperative style. we will describe what is the difference between these two styles. This example illustrates the difference between declarative and imperative style.

For example,

let’s say you have an array and you wanted to double the array element and store in the new array.

in this situation, you can use for loop to iterate over an array and x 2 and store in the new array.  

like this.

When you execute this statement the result would look like this.


This program illustrates imperative programming. And it works. Due to the complexity of the code, it is too difficult To understand what is the end result is supposed to be When you have too many imperative statements.

When you react or understand this code you should keep track on i variable with the condition as well as on an array index. This will make imperative more difficult to understand.

Fortunately, You can rewrite the code using the declarative style. 

We’re going to get the same outcome using the map method. The map() method creates a new array with the results of calling a function for every array element. The map() method calls the provided function once for each element in an array, in order

Using Declarative Style

When you execute this declarative statement.  you will get the same outcome. The double array is the same as in the previous example. Now you tell me which code is easier to read and understand. In my humble opinion, the declarative style is more readable and easy to understand.

You just need to understand the use of map function. if you now that you can get the idea what this code will do. Map function will return index value and we are multiplying this index value with 2 as simple as that. Even you can get the index number using the second map parameter. which is specified just after the v parameter.

This is a very easy method to understand. And less code increase performance of the application.

Till now we have seen most of the programmer use imperative style to solve problems. But usually, a declarative style is much simpler than the imperative style.

Now you had seen only JavaScript code.  what about the react? React take the same declarative approach when you compose UIs. In react when you create Component we are using declarative style to create a component. I personally recommend you to use react declarative style to put all your code. Well, declarative is easier if you understand how the code will work. 


React Abstraction

A React has a powerful abstraction of document model. React hide underline interfaces and provide synthetic methods and properties. 

For example,

when you create an onClick event in React, the event handler will receive not a native browser-specific event object, but a synthetic event object that is a wrapper around native event objects. You can expect the same behavior from the synthetic object. React also has a set of synthetic events for touch events, which are great for building web apps for mobile devices. To describe everything about react in a single lesson is not possible for anyone.

React use synthetic event for as

We will understand what is react abstraction in the event article.

I hope you understand what is the difference between Declarative and imperative style and the basic concept behind react abstraction.