Programación imperativa vs declarativa

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:

1. 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.

2. 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.

3. Comparación #

4. Ejemplo: Mostrar una lista de nombres #

Con JavaScript Vanilla de forma imperativa #

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

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

Con React de forma declarativa #

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

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.