Partha's Blog

Declarative vs Imperative Programming

Declarative vs Imperative Programming

Partha Pratim Sarma's photo
Partha Pratim Sarma
·

3 min read

Table of contents

In this article, we’ll try to understand “declarative programming” and “imperative programming” and help a beginner understand how ReactJS makes it easier to build UIs.

What are imperative and declarative programming?

On Wikipedia, we will find these definitions:

Imperative programming is a programming paradigm that uses statements that change a program's state.

Declarative programming is a programming paradigm…that expresses the logic of a computation without describing its control flow.

The definitions do not make much sense if you are a beginner and do not have any formal CS education. So let us understand them using some code examples!

Imperative Programming

Let us make an app that asks the user their name and give the output on the browser. HTML file


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <h1>Hello <span class="userName"> </span> </h1>
    <script src="script.js"></script>
  </body>
</html>

JavaScript file

var userName = document.querySelector(".userName");
var askName = prompt("Please enter your name");
userName.innerText = askName;

Let's understand the above code.

  1. In the HTML file, as highlighted, we declare the h1 element, inside which we create span tags with class=username.
  2. Now coming inside the JavaScript file, we declare two variables. Variable "username" gets access to the span element, which lets us manipulate the DOM later, and "askName" stores the input we get from the user.
  3. To get the output on the browser, we use the innerText property to set the text content, i.e., the user’s name, from the “askName” variable.

You can see that we must follow a set of steps to get the desired output.

In simple terms, imperative programming is like you instructing your friend on how to make a good Margherita pizza for you. You explain the flow to them, and they will listen to you religiously.

Declarative Programming

Now let us code the same app in ReactJS.

let askName = prompt("Please enter your name")

export default function App(){
      return (
            <div>
                 <h1>Hello {askName}</h1>
             </div>
      );
}

Let's understand the above code.

  1. Once we set up our React app, we declare a variable "askName" which stores the input we get from the user inside the App.js file.
  2. Next, we place the variable in the h1 element, which is present inside the return statement.

Here we are not bothered with the steps. We simply say “Hey, we have the variable “askName” and I want it inside h1 element.” ReactJS will handle the flow.

Simply put declarative programming is like asking your friend to make a Margherita pizza without being bothered about the process/recipe.

Conclusion

The logic in both the code gets the username and puts it on the browser page, but the major difference is that the React example never touches a DOM element. When writing React, we should not think of how we want to accomplish a result, but instead what the component should look like in its new state or where we want our new variable. In the case of the imperative example, we had to manipulate the DOM directly. We had to think of how we want to accomplish the task.

JavaScriptReactFunctional Programming