La programación imperativa y la programación declarativa son dos enfoques distintos para resolver problemas en programación. A continuación, se explica cada uno con ejemplos claros:

Programación Imperativa

• Qué es: Se enfoca en el "cómo hacer las cosas". El programador escribe una serie de instrucciones para que el programa alcance un estado deseado.
• Características:
  • Explica paso a paso cómo se debe lograr el resultado.
  • Uso frecuente de bucles, variables intermedias, y estructuras de control.

Ejemplo (Calcular la suma de números en un array):

 
1// Imperativo
2const numeros = [1, 2, 3, 4, 5];
3let suma = 0;
4
5for (let i = 0; i < numeros.length; i++) {
6  suma += numeros[i];
7}
8
9console.log(suma); // Salida: 15
Salida de Consola!:
15

Aquí se detalla cada paso: inicializar la variable suma, recorrer el array con un bucle, y sumar cada elemento.

Programación Declarativa

• Qué es: Se enfoca en el "qué hacer", dejando que los detalles de implementación sean gestionados por el lenguaje o las herramientas subyacentes.
• Características:
  • Especifica el resultado deseado sin detallar cómo lograrlo.
  • Uso frecuente de funciones y expresiones.

Ejemplo (Calcular la suma de números en un array):

 
1// Declarativo
2const numeros = [1, 2, 3, 4, 5];
3const suma = numeros.reduce((acum, num) => acum + num, 0);
4
5console.log(suma); // Salida: 15
Salida de Consola!:
15

Aquí simplemente se indica qué queremos (sumar los números) usando la función reduce. Los detalles de implementación (cómo iterar y acumular) están abstraídos.

Comparación

Ejemplo: Mostrar una lista de nombres

1. Con JavaScript Vanilla de forma imperativa

1<ul id="lista"></ul>

1const nombres = ['Ana', 'Juan', 'Luis', 'Marta'];
2  const lista = document.getElementById('lista');
3
4  // Crear manualmente los elementos del DOM
5  for (let i = 0; i < nombres.length; i++) {
6     const li = document.createElement('li');
7     li.textContent = nombres[i];
8     lista.appendChild(li);
9  }

Aquí el desarrollador especifica cómo construir la lista:

• Crear cada elemento li.
• Asignar el texto.
• Insertarlo en el DOM.

2. Con React de forma declarativa

React es naturalmente declarativo, lo que lo hace más legible y eficiente:

1<div id="app"></div>

1function App(){
2    const nombres = ['Ana', 'Juan', 'Luis', 'Marta'];
3
4    return (
5       <ul>
6          {nombres.map((nombre, index) => (
7             <li key={index}>{nombre}</li>
8          ))}
9       </ul>
10    );
11 }
12
13const $app = document.getElementById("app");
14ReactDOM.render(<App/>, $app);

Aquí simplemente declaras qué quieres mostrar (una lista de nombres), y React se encarga del resto:

• No necesitas gestionar manualmente la creación de elementos DOM.
• React optimiza las actualizaciones al DOM.

Resumen de la Diferencia en React