Declarative vs Imperative

Transition into React from Javascript

This article strives to make this distinction of declarative vs imperative specifically for people transitioning from vanilla Javascript into React. Additionally, I am writing this during a similar transition so I apologize for any misinformation. But, I am a person who cannot just idly sit by with “React is a declarative writing style.” Therefore, I will attempt to pull apart what makes React declarative and compare it to its imperative counterpart.

Image for post
Image for post

First off, from a very high level, declarative programming focuses on the WHAT rather than the HOW. What does this mean? Declarative programming is much more driven by the result and describing this end result rather than the step by step process of getting to the result (often disregarding the process to get there). This is opposed to imperative programming which is much more instructional and cares about the step by step process. As per every “Declarative vs Imperative” article, here is a directions metaphor of getting to Penn Station from Port Authority:

The imperative programming paradigm: “After exiting Port Authority, head southwest on 8th Ave toward W 41st St, turn left onto W 33rd St and you should arrive on Penn Station.”

The declarative programming paradigm: “Penn Station is located at 7th & 8th Avenues, between 31st & 33rd Streets New York, NY 10001”

As you can see, the first example lists out the directions step by step, hence indicative of an imperative approach. The second example merely describes the end location/result with an address, disregarding how the traveler/user might get there. To really illustrate this distinction, let’s jump into a simple coding example through Ruby before we get into React and Javascript. Here are two approaches to implementing a simple, linear search algorithm in Ruby:

//Imperative 
def imperative_search(array, item)
for i in array do
if i == item
return item
end
end
return false
end
//Declarative
def declarative_search(array, item)
array.find(item)
end

The first is a prime example of the imperative search as it lays out each step of how the search function works and how it got to the result. This really illustrates the HOW and gives discrete ‘instructions’ to get to the desired result. In contrast, the declarative example focuses on purely the result and describing what this result will look like. If you have been working with Ruby’s enumerator methods such as each, collect, select etc., guess what? You’ve been writing declarative code this whole time!

Image for post
Image for post
Imperative = STEPS

Finally, we’ll move into the crux of this blog: why React is declarative. If you are like me, the Javascript you’ve written so far has been of an imperative style. For instance, take this example of very imperative code which manipulates the DOM by adding a div and an h1 with my favorite artist “Mitski” to the body:

function addArtistNameToBody() {
const bodyTag = document.querySelector('body')
const divTag = document.createElement('div')
let h1Tag = document.createElement('h1')
h1Tag.innerText = "Mitski"
divTag.append(h1Tag)
bodyTag.append(divTag)
}

This is very imperative as, via step by step instructions, it finds the necessary tags and appends the necessary elements. In contrast, to achieve the same result through react would look something like this:

class Artist extends Component {
render() {
return(
<div>
<h1>{this.props.name}</h1>
</div>)
}
}

As you can see, the React way focuses on the result and further describes it in the render block of code. Simply put, “what I want rendered on the page is going to look like this and I don’t care about how you get there.” Referring to the metaphor, “This is my address. This is how my house looks like. I don’t care how you get here but get here!” Therefore, React’s implementation is declarative because you state in code the result, what you ultimately want displayed on the page, and not the instructions or steps to get there.

Before researching and writing this blog, my apprehension of the declarative programming paradigm mainly came from lack of distinction between declarative and functional programming. Functional programming is a prime example of the declarative approach, but they are not the same thing. I realized I needed to draw the line between declarative vs imperative and functional vs object oriented. Of course, React exhibits a lot of functional programming characteristics (things to do with the virtual DOM and passing functions) which then starts to get really complicated (a good follow up blog). For now, I hope this clarified to why React exhibits a declarative approach as it did for me.

Image for post
Image for post

Resources

Written by

Full stack web developer with a passion to reintroduce humanistic elements in tech. Experienced in Ruby on Rails, JavaScript, and React and a background in Art.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store