In this tutorial, you will get a better understanding of what developers mean when they talk about declarative and imperative code. Understanding the meaning of these terms is a super-important concept to understand. Understanding these terms will help you write better code. The concepts behind these terms are simple, however, they sound complex. I think this is a failing of software, simple and important concepts that are important to know, however, people are put off as they are wrapped in complex jargon. This tutorial will explain the meanings of both terms in simple English. Afterwards, you will understand what these concepts mean and why they are important 😊

Say What You Mean

Have you ever asked someone how they are doing, only for them to turn around and spend the next 10 minutes talking about the economy, their cats, what their friends are up to, but without actually saying, I'm stressed, or, I'm happy? This is pretty much declarative Vs Imperative programming explained.

Declarative programming is a style of writing your code that describes exactly what that code is doing. In declarative programming, you would walk into a bar and say, "Can I have a beer and a burger, please buddy".

In an imperative style, you would explain things in specific terms of the steps involved to do something. In an imperative style, you would open the door to the bar, walk six steps to the bar, wait 1 minute for the barman to serve you, then create a new order.

Both sentences describe the same thing. One reads easier, the other one is more like instructions in a cookbook that you can follow to make an EPIC cake. When you write code, a lot of the code you will write will be imperative. Let's say you write a simple function:

The code above defines a simple loop. In terms of reading the code, you need to understand the syntax of the language to understand what it is doing. Its code is written using the languages notation. Nothing more, nothing less. In the context of this simple example, it's easy to understand what it does. When you work in a massive codebase, with hundreds of packages, a better approach to writing your code is to write it in a way that makes it easier for the reader of the code to understand what's going on. If you want to re-write the example above in a more declarative style, you might refactor the code like this:
 

When the code is complicated and written in a purely imperative style, it will take you longer to try and understand and reason about what it does. When you split your code into smaller functions that are well named, you can skim code quicker. Having a codebase that is easier to read will make the team more productive. It will always increase the odds people do not introduce bugs by misunderstanding what the code does. This is why when you start to learn Javascript you will bump into these two terms a lot. The way your write and structure your code is super-important

A declarative style goes hand in hand with a lot of good practices and techniques like domain-driven design in functional programming. The declarative style is one of the key benefits of following a functional programming style, which is another key paradigm to grasp for all Javascript programmers.

💡 If you know nothing about functional programming , I recommend going here and reading a few articles.

React, whole component-based eco-system follows a declarative style. To build an application using ReactJS, instead of creating an HTML file called index.html with all your JavaSript plonked into a file called custom.js file, you create a page built up of components. These components, describe what they do. An application might have a header component, a search bar component, or a footer component. Instead of writing code that tells the browser how to render it (imperative), you write your code in a way that the browser understands and that your fellow coders can understand (declarative).

As you can see these two concepts are pretty easy to understand. When writing code it's worth taking a few extra seconds to write your code in a style that's easier to understand. Make sense? Happy Coding 🤘