In this tutorial, you will learn what people mean when they talk about declarative and imperative.  The concepts behind these terms are simple.  After reading this tutorial, you will understand their concepts.  

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 walk into a bar and ask the barman to walk to the kitchen, turn on an oven, get a burger out of the freezer, wash a glass.

When you write code, a lot of the code you will write will be imperative. Let's say you write a simple function:

This is a simple loop. In terms of code, it defined exactly what it does.  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 single 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 do something like:  

When the code is complicated and written in a purely imperative style, it will take you longer to try and understand what it does. When you split your code into smaller functions that are well named, you can skim code quicker.

When the code is easy to understand, the chances of bugs creeping in your code is also reduced. This is why when you start to learn Javascript you will see these two terms a lot.

Declarative style goes hand in hand with a lot of good practices and techniques like the domain is driven design functional programming.

The decorative style is one of the key concepts within function programming, which is a key paradigm to grasp for all Javascript programmers.  If you do nothing about functional programming, I recommend going here and reading a few articles.

React, whole component-based eco-system is based in a relative style. To build a webpage, instead of creating an HTML file called index.html with all your JS into a custom.js file, you create a page built up of components. These components, describe what they do, so you may 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 its worth the few seconds of extra effort to write your code in a style that's easier to understand.