Declarative vs. Imperative - JavaScript Tutorial

The JavaScript Tool I'm using to demonstrate:

ColorCode Etsy Merchandise store:

0:00 Intro
3:18 Theory (Imperative vs. Declarative)
4:31 Example 1 (Data Manipulation)
7:06 Example 2 (Data Manipulation)
9:27 Example 3 (DOM Manipulation)
12:45 Example 4 (DOM Manipulation)
13:55 Example 5 (React State)
15:37 Example 6 (CSS)
16:30 Example 7 (File System)
17:30 Is Declarative Better?
17:43 Benefits of Declarative
22:40 Benefits of Imperative
24:00 Outro

Ever wondered what the difference is between imperative and declarative programming in JavaScript? In this video, we break it all down with clear explanations and practical examples! 🚀

Learn how these two programming styles differ, why declarative programming is gaining popularity, and when to use each. We’ll dive into easy-to-follow examples like looping with for vs. .map() and manipulating the DOM imperatively versus declaratively. Whether you’re new to coding or looking to refine your skills, this video will help you master these essential programming concepts.

🔥 Topics Covered:
What is imperative programming?
What is declarative programming?
Real-world JavaScript examples for both styles
Advantages of declarative programming
When to use imperative or declarative approaches

👩‍💻 Example Highlights:
Imperative: for loops and manual DOM manipulation
Declarative: .map(), .filter(), and React’s declarative UI approach
Understanding these styles is key to writing cleaner, more efficient code in modern JavaScript frameworks like React, Vue, and Angular.

If you enjoy learning about JavaScript concepts explained in a simple way, make sure to like, comment, and subscribe! 👍✨

JavaScript Promises from the series "20 Things JS Developers Should Know but Probably Don't"

*** Announcement ***
Full JavaScript Mastery course is coming! Sign up for Early Access here:

[ColorCode-io]

Episode 19: Declarative vs. Imperative programming 🎉🎩

[RyuDev_]

Wake up babe, new ColorCode Video just dropped

[coding-]

When Ure javascript course gonna release I'm waiting for that

[dylanrh]

no matter how much time has passed i never remove my subscription from this channel because i know the content and the value it provides its not matched in any other channel. thank you!!!
also love the jokes and overall silliness

[splashbarrage]

Hello, your videos really helping me out, wondering when do you realease Js full course ?

[VishalPawarR]

I finished watching videos and then saw there were no more videos left to watch!

That's nice you are back!

[amram]

I have to say, your videos are on another level. I have feeling this channel will grow rapidly.

[georgii_v]

OMG! Finally!
Your videos are pure magic! Thanks a lot for your job!

[r.e.]

@ColorCode-io I just wanted to say that I've been learning to code for almost a year, and the biggest struggle is that programmers don't know how to be good teachers.

You, sir, are a fine exception to that rule!
You are absolutely criminally underrated, but head and shoulders above the competition. I'm sure good things are in store for you. Please, keep it up!

[IftikharAhmad-zdmx]

i can't say that how much i respect you sir....

[oluwasemilorebadejo]

I came across this playlist 3 days ago. One of the best things to happen to me. Great job Sina.

Can you make the final episode about web/browser APIs 😊

[vs-cdqq]

Thankful for all of your content!

You are a great and charismatic teacher with a sense of humor. I don't know if you're playing a character in your videos, but it's a pleasure to watch and learn from them. Seems like you've been going with this channel for a while now, too.

All the best!

[jhcarrell]

First, I want to say that I have really enjoyed this series. You've done a great job in presenting a lot of concepts in an easy (and enjoyable) to understand format. I do think that the section in this video on DOM manipulation might confuse those newer to working with HTML/JS. The imperative examples added a click listener to the elements, whereas the declarative approach demonstrated adding an onclick attribute to the element. While end behavior in these examples would be the same, what you end up with is different. I think this is significant in that there can be many click listeners on an element, but only one onclick property (as one example of differences between the two). I realize that isn't the point of the example, but felt that a brief mention of the difference in the 2 solutions could help avoid confusion down the road. Thank you for providing such entertaining educational content!!

[Simon_IHG]

Every video is such a pleasure !

Working mostly with RxJS, declarative code is so much easier to handle and maintain.
Even if the learning curve of RxJS is huge at the beginning, it's so powerfull once you know how to make it right.

Love you content ❤

[karimmaged]

your videos are getting much better every time, you are easily one of the best programming you-tubers.
Keep this legendary work up 💪🏼

[danielkcomt]

Hey man! Thank you for your content, it’s pure gold! I’m an audiovisual professional who transitioned into the developer world during the pandemic, and I truly appreciate the effort you put into not only explaining programming concepts in a clear and digestible way but also into the editing work that enhances it. The editing is genuinely the cherry on top!

I completely understand why it might take a while between videos. I don’t mind waiting another four months for the next one. I really hope you continue creating content, and hopefully, the next series will be "20 Things Every React Developer Should Know."

PS: what tool do you use for the coding side like 18:40 ?

[nirau]

Keep coming to your channel a lot, thank you for such a great value! You motivate me to get better at web dev.
BTW do you have a podcast?

[c__beck]

11:43 " _A lot of you are going to comment that HTML is not a programming language…_ "

Not me, I agree with you! It was my first, actually!

[johneric]

Imperative logic is used to create declarative ones. For example, the functions `map`, `filter`, and `reduce` were all written in an imperative way to achieve a declarative call. React JSX, HTML, and CSS are written so that you tell their underlying interpreter/parser/processor what to do, and those processors are written imperatively.
Imperative is often used to create an abstract tool that a declarative user can call without worrying about how it works internally.

[ws]

CC 😁 Behind every Declarative function is an Imperative implementation!