¿Cuáles son los conceptos básicos de JavaScript que todo principiante debería aprender? Aprendiendo y Estudiando para siempre

Funciones puras:

función add (a, b) {return a + b; }

No modifica nada en el exterior de la función (no establece variables en el mundo exterior). No se lee nada en el exterior para controlar el comportamiento del interior: 1 + 2 = 3. SIEMPRE.

Esta pureza significa que puedo depender de la función para hacer su trabajo exactamente de la misma manera cada vez que lo llame con los mismos datos.

Funciones de orden superior:

Las funciones pueden tomar funciones como argumentos:

función aplicar (transformar, valor) {
retorno transform (valor);
}

función cuadrado (x) {return x * x; }
aplicar (cuadrado, 2); // 4

Tenga en cuenta que dado que `square` es puro,` square (4) `siempre va a tener 16, sin sorpresas.

Las funciones pueden devolver funciones como valores.

función hola () {
función de retorno () {
vuelve “hola mundo”;
};
}

var sayHello = hola ();
di hola(); // “Hola Mundo”

Esto es terriblemente artificial, pero me lleva directamente a mi siguiente punto.

Cierre:

Las funciones que devuelva recordarán lo que se haya pasado o creado en los padres de sus padres, desde el momento de su creación.

función recordar (x) {
función de retorno de recuperación () {return x; };
}

var x = 12;
var recuerda 42 = recuerda (42);
var recuerda 18 = recuerda (18);
var recuerda33 = recuerda (33);
x = 9;
recordar42 (); // 42
recordar33 (); // 33
x = 88;
recordar18 (); // 18

Independientemente de lo que sucediera afuera, cada versión de la función devuelta recordaba el valor de `x` que se pasó en ese momento.

función pluck (tecla) {
Función de retorno pluckFrom (obj) {
return obj [clave];
};
}

var bob = {nombre: “Bob”};
var doug = {nombre: “Doug”};
nombre var = pluck (“nombre”);
nombre (bob); // “Bob”
nombre (doug); // “Doug”

Aquí, Pluck ha recordado la clave que quiero buscar, y buscará esa clave en tantos objetos como quiera. Es una función útil que he configurado, que puedo reutilizar una y otra vez, y puedo configurar otras funciones de manera diferente, con el mismo constructor.

función incrementadora (inicio) {
var x = inicio || 0;
función de retorno incremental () {return x + = 1; };
}

var incremento = incrementador (35);
incremento(); // 35
incremento(); // 36
incremento(); // 37
// note que esto es impuro, pero en ocasiones es útil

Aquí he creado un contador sin manipulación.

Programación basada en cobro:

Cuando tenga una lista de cosas que hacer, es probable que use un bucle `for`.
Pero realmente no tienes que hacerlo. En su lugar, deberías considerar usar ayudantes para hacer tu vida más fácil.

función doubleAllNumbers (números) {
var dobles = [];
var i = 0, l = numbers.length, number, value;
para (; i <l; i + = 1) {
número = números [i];
valor = número * 2;
doubles.push (valor);
}
vuelven los dobles
}

¿Cuántas de las líneas anteriores proporcionan valor de negocio?

La respuesta es: UNA

De las 10 líneas, solo la línea 6 hace algo interesante. El resto de las líneas son solo repeticiones que escribe cada vez que escribe una función reutilizable que se repite.

Entonces, dicho esto, ¿por qué no usas funciones de orden superior para poner esa placa de calderas y esa única línea para que funcione?

mapa de función (transformar, matriz) {
var newArray = [];
var i = 0, l = array.length, el, value;
para (; i <l; i + = 1) {
el = array [i];
valor = transformar (el);
newArray.push (valor);
}
volver newArray;
}

mapa (x => x * 2, [1, 2, 3]); // [2,4,6]

El mapa es tan útil que se ha construido desde ~ 2009.

[1, 2, 3] .map (x => x * 2); // [2,4,6]

¿Qué pasa con la eliminación de valores no deseados?

filtro de función (predicado, matriz) {
var newArray = [];
var i = 0, l = array.length, el, value;
para (; i <l; i + = 1) {
el = array [i];
if (predicate (el)) {
newArray.push (el);
}
}
volver newArray;
}

filtro (x => x> 3, [2, 4, 6]); // [4,6]

El filtro está incorporado, también.

[1, 2, 3] .filter (x => x <3); // [1,2]

Como Map y Filter devuelven ambas matrices, puede seguir encadenándolos, uno tras otro.

¿Qué hay de hervir una lista de cosas a un solo valor?

función reduce (agregado, semilla, matriz) {
var aggregateValue = semilla;
var i = 0, l = array.length, el, value;
para (; i <l; i + = 1) {
el = array [i];
value = aggregate (aggregateValue, el);
aggregateValue = valor;
}
return aggregateValue;
}

reducir ((total, x) => total + x, 0, [1, 2, 3, 4]); // 10

De nuevo, esta es una técnica tan útil que la construyeron en:

[1, 2, 3] .reduce ((a, b) => a + b, 0); // 6

De hecho, reducir es tan poderoso que puede reescribir el mapa y filtrar en términos de reducciones:

mapa de función (transformar, matriz) {
función modifyElement (list, el) {
devolver list.concat (transform (el));
}
devolver reducir (modifyElement, [], array);
}

filtro de función (predicado, matriz) {
función includeElement (list, el) {
predicado de retorno (el)? list.concat (el): list;
}
return reduce (includeElement, [], array);
}

Aprende a juntarlos a todos:

var people = [
{nombre: “Bob”, género: “hombre”},
{nombre: “Doug”, género: “hombre”},
{nombre: “Sarah”, género: “mujer”},
{nombre: “Susan”, género: “mujer”},
{nombre: “Hannah”, género: “mujer”}
];

var numberOfLettersInGirlsNames = personas
.filter (person => person.gender === “female”)
.map (person => person.name.length)
.reduce ((total, x) => total + x, 0);

numberOfLettersInGirlsNames; // dieciséis

frente a la manera antigua:

var numberOfLettersInGirlsNames = 0;
var i = 0, l = people.length, el, name;
para (; i <l; i + = 1) {
el = personas [i];
if (el.gender === “female”) {
name = el.name;
numberOfLettersInGirlsNames + = name.length;
}
}

numberOfLettersInGirlsNames; // dieciséis

Después de un poco de práctica, debe notar que comienza a tener sentido dividir los pasos en piezas funcionales, en lugar de empujarlos a todos en un solo bucle escrito a mano.

Esto podría ser más avanzado de lo que inicialmente pensabas; esta bien. Estas son cosas que puedes practicar, en tu camino.

Además, creo que es más fácil para un recién llegado aprender estas técnicas que para alguien que tiene años de experiencia en un lenguaje de programación general (incluido, y especialmente JS).