What is Imperative vs. Declarative programming?

Let's Decipher The Two
What is imperative programming in comparison to declarative? There are plenty of logical examples of how this works. The most popular explanation of these two is imperative is how you do something, and declarative is what you want to do. These examples can be unclear if you are new to programming or even an experienced engineer. So I would like to dive deep into the distinction between the two. Most professional engineers explain imperative programming when you think like your computer. Where declarative is making programming syntax more user-friendly. A prime example is a difference between Vanilla JavaScript and ReactJS. Let us take a look below.

This example would be how we will create a list in JavaScript and append it to the DOM. Which is looked at as
an imperative way of execution. It's made step-by-step in a specific order. Once every step is done, THEN you get your result.

// Vanilla JavaScript

addButton.addEventListener(“click”, function() {

 const input = document.getElementById(“item-input”);

 console.log(input.value);

 const list = document.getElementById(“ingredient-list”);

 const createList = document.createElement(“li”);

 const textNode = document.createTextNode(input.value);

 createList.appendChild(textNode);

 list.appendChild(listNode);

});

Now take a look at this example below. It's essentially the same way but React takes care of most of the dirty work under the hood. Here we are using useState, which is a method that returns a stateful value, and a function to update it. This syntax cuts out all of the extra steps. Compared to Vanilla JavaScript, React is the declarative syntax between the two.

//ReactJS

/*In ReactJS, the UI is already 
set to keep the entire state 
of your listed items in a JS variable.*/

const [items, setItems] = useState([“cilantro”, “beef”, “Onions”]);

/*Which will then be displayed in 
JSX by mapping (looping) over each item, 
and returning a list element for each one:*/

<ul>

   {items.map(item => (

       <li key={item}>{item}</li>

   ))}

</ul>

As you see, the same results with different steps. You now have an idea of what imperative and declarative programming are... Hopefully. So before you think this read is over, let me go on a different side of things. Let us backtrack to the title of this blog. What EXACTLY is imperative vs. declarative programming? The biggest argument is that declarative syntax is "User-Friendly." Is it? I want to argue that opinion. For example, Vanilla JS might take more initiative steps to execute a task. Although that may be true, Reacts syntax contains a fair amount of actions to perform an event listener, mapping over arrays, or whatever component you decide to make and manipulate.
Simple, in my opinion, isn't always better. Both JS and React can be utilized for specific situations. This topic can account for any other programming language as well. In some ways, you can also determine some parts of JavaScript to be declarative. Is looping through an array or using forEach to cycle through an object not being declarative? You are telling exactly what you want your program to do. I can even argue that declarative languages might disadvantage you since you can't peak under the hood like you can with imperatives. In my research, determining what imperative and declarative programming can be an open discussion. So let me know what's your opinion on the two. How would you decipher the two in your own words?