DEV Community

Mohamed Idris
Mohamed Idris

Posted on

"Declarative" vs "Imperative": Ordering a Pizza vs Making It Yourself

#webdev #beginners

You want a pizza. You have two choices. Call the shop and say "one large
pepperoni, please." Or roll up your sleeves: make the dough, spread the sauce,
slice the pepperoni, set the oven, watch it bake.

Same pizza. Totally different style. That gap is the difference between
declarative and imperative code, two words you'll hear constantly.

The idea in one line

Imperative = you spell out how to do it, step by step. Declarative =
you say what you want, and let something else handle the how.

The metaphor: ordering vs cooking 

IMPERATIVE (cook it yourself)        DECLARATIVE (order it)
1. make dough                        "one large pepperoni, please"
2. add sauce
3. add pepperoni                     ...the kitchen figures out the steps
4. bake 12 min
Enter fullscreen mode Exit fullscreen mode

Neither is "better" in general. But declarative is shorter, easier to read, and
lets you skip details you don't care about.

How it looks in code

Say you want only the even numbers from a list.

// Imperative: you manage every step yourself
const evens = []
for (let i = 0; i < nums.length; i++) {   // set up a counter
  if (nums[i] % 2 === 0) {                 // check each one
    evens.push(nums[i])                    // collect the keepers
  }
}

// Declarative: say WHAT you want, skip the how
const evens = nums.filter(n => n % 2 === 0)  // "give me the even ones"
Enter fullscreen mode Exit fullscreen mode

Both give the same evens. But the second one reads almost like English. You
don't see the counter, the index, or the pushing. You just declared the goal:
"keep the even ones."

A real case: HTML and React

HTML is declarative. You write <button>Buy</button> and say what you want on
the page. You never write the steps to draw pixels on the screen. The browser
does the how.

React works the same way. You describe what the UI should look like for a given
state, and React figures out the steps to make the screen match.

// Declarative: "when isLoading, show a spinner; otherwise show the list"
return isLoading ? <Spinner /> : <List items={items} />
// You never write "find the old spinner, remove it, insert the list..." React does that.
Enter fullscreen mode Exit fullscreen mode

SQL is declarative too. SELECT name FROM users WHERE age > 18 says what rows
you want. The database decides how to find them fast.

Gotchas juniors hit

1. Thinking declarative is always better.
It's usually cleaner, but when you need fine control or top speed, imperative
steps can be the right tool. Use the one that fits.

2. Mixing the two in a confusing soup.
A .map() with a giant pile of imperative logic crammed inside often wants to be
split up or rethought. Keep each piece clear.

3. Forgetting that declarative still runs steps.
.filter() still loops under the hood. You just don't have to write or babysit
the loop. The how didn't vanish; someone else handles it.

Recap

  • Imperative = the recipe, every step (a for loop you manage).
  • Declarative = the order, just the goal (.filter(), HTML, SQL, React).
  • Declarative code is usually shorter and easier to read.
  • Pick the style that makes the goal clearest for the job.

Your turn

Find a for loop in your code that builds up a list. Can you rewrite it with
.map(), .filter(), or .reduce() so it says what you want instead of how?
Try it, then explain "ordering a pizza vs cooking it" to a friend.

Top comments (0)