Breaking

Post Top Ad

Your Ad Spot

jueves, 30 de mayo de 2019

Imperativo vs declarativo JavaScript / ES6

Nivel: intermedio
Hoy ... un pequeño artículo sobre el enfoque para escribir código. ¿Escribes tu código JS declarativamente, o más bien imperativamente? Es bueno echar un vistazo más de cerca. Al igual que los enfoques de escritura y organización de estilos CSS .

JavaScript declarativo vs imperativo en JavaScript / ES6

La programación declarativa es un paradigma de programación, un enfoque para construir la estructura y los elementos de los programas de computadora, que expresa la lógica de los cálculos sin describir su flujo de control. En contraste con los programas escritos de manera imperativa, el programador describe las condiciones que debe cumplir la solución final (lo que queremos lograr) y no la secuencia detallada de pasos que llevan a ella (cómo hacerlo).
Muchos idiomas, que utilizan un enfoque declarativo, intentan minimizar o eliminar los efectos secundarios, describiendo lo que el programa debe hacer en su campo de dominios, en lugar de describir cómo lograr esto como una secuencia de primitivos del lenguaje de programación. A su vez, en un enfoque imperativo implementamos algoritmos en pasos claros.
Aburrimiento. Solo mirémoslo.
El código imperativo define qué y cómo debe hacerse, por ejemplo:
- vaya a la cocina 
- corte el pan 
- saque la mantequilla de la nevera 
- ... 
- ... 
- ponga un sándwich en la mesa
En caso de declarativo , simplemente describimos lo que necesitamos:
- Quiero un sandwich
¿Dónde está la trampa?
Simplemente, al construir nuestro programa de manera declarativa, describimos lo que necesitamos. Componemos el programa a partir de elementos individuales. Estos elementos pueden existir en un marco o biblioteca; De código abierto o en nuestras propias bibliotecas. Si no están disponibles, las escribimos. Imperativamente? Sí, al final, llegaremos a tal nivel de abstracción.
Simplemente, cuando no hay un nivel de abstracción más bajo, necesitamos escribir un código (funciones, bibliotecas, componentes, etc.) que implemente lo que necesitamos. En un nivel más alto de abstracción, usaremos esto construyendo un programa de forma declarativa y modificándolo más fácilmente.
Aburrido de nuevo, así que echemos un vistazo a los ejemplos de código JS.
Ejemplos
I = imperativo
D = declarativo
Ejemplo :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// I
function makeWidget(options) {
  const element = document.createElement('div');
  element.style.backgroundColor = options.bgColor;
  element.style.width = options.width;
  element.style.height = options.height;
  element.textContent = options.txt;
  return element;
}
// D
function makeWidget(type, txt) {
  return new Element(type, txt);
}
En lugar de escribir paso a paso, usamos la solución "Element", que implementa las cosas que necesitamos.
Ejemplo - operaciones de elementos de matriz:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
dieciséis
// I
const numbers = [1, 2, 3, 4, 5];
const doubled = [];
for (let i = 0; i < numbers.length; i += 1) {
  const newNumber = numbers[i] * 2;
  doubled.push(newNumber);
}
console.log(doubled); // => [2,4,6,8,10]
// D
const numbersD = [1, 2, 3, 4, 5];
const doubledD = numbersD.map((n) => {
  return n * 2;
});
console.log(doubledD); // => [2,4,6,8,10]

Por cierto usamos aquí el método del mapa .
Y un ejemplo a continuación utiliza el método de reducción :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
dieciséis
// I
const numbers = [1, 2, 3, 4, 5];
let total = 0;
for (let i = 0; i < numbers.length; i += 1) {
  total += numbers[i];
}
console.log(total); // => 15
// D
const numbers = [1, 2, 3, 4, 5];
const total = numbers.reduce((sum, n) => {
  return sum + n;
}, 0);
console.log(total); // => 15
Etc.
En muchas situaciones, el código imperativo está bien; Ciertamente, cuando escribimos lógica empresarial, generalmente será un código imperativo, ya que no hay una abstracción más genérica para un caso determinado. Este código describirá CÓMO se debe realizar la operación. Y luego, a un nivel más alto de abstracción (JavaScript declarativo), ahorramos tiempo definiendo principalmente qué hacer, utilizando las soluciones desarrolladas.
Campo de golf

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas