Trucos Programación Public

Trucos Programación

Ezequiel del Río
Course by Ezequiel del Río, updated more than 1 year ago Contributors

Description

Tips que me ayudan a programar en Javascript y React

Module Information

Description

Array.isArray()
El método Array.isArray() comprueba si un valor pasado es un Array o no. Permite pasar un argumento, un valor de cualquier tipo. A continuación, se comprueba este valor para ver si es del tipo Array, si es, devuelve true, si no lo es, devuelve false. // las siguientes llamadas devuelven true Array.isArray([]); Array.isArray([1]); Array.isArray(new Array()); Array.isArray(new Array('a', 'b', 'c', 'd')); Array.isArray(new Array(3)); // Hecho poco conocido: Array.prototype es también un array: Array.isArray(Array.prototype); // todas las siguientes llamadas devuelven false Array.isArray(); Array.isArray({}); Array.isArray(null); Array.isArray(undefined); Array.isArray(17); Array.isArray('Array'); Array.isArray(true); Array.isArray(false); Array.isArray({ __proto__: Array.prototype });
Show less

Description

Buscar cosas en un array de objetos por uno de sus valores y devolver el valor de otro atributo del objeto
El método find() devuelve el valor del primer elemento del array que cumple la función de prueba proporcionada. const array1 = [5, 12, 8, 130, 44]; const found = array1.find(element => element > 10); console.log(found); // expected output: 12   const rules = [{ruleId: "333",level: "1"},{ruleId: "444",level: "2"}] const value = rules.find(obs => obs.ruleId === "333").level console.log(value); // 1 En este ejemplo la función find devuelve el primer objeto que cumple la función obs.ruleId === "333" --> {ruleId: "333",level: "1"} Desde esto objeto podemos acceder a su propiedad 'level' para que nos la devuelva.
Show less

Description

Formas de Importar y exportar componentes, funciones, módulos...
import * as ACTION from '../actions/actions'; Es como decir, impórtame todo y me lo metes en una constante que es ACTION             Luego se puede consumir así: ACTION.getWriteoffsFilterCallInit()             Para exportarlo se hará de la siguiente manera:              export const getWriteoffsFilterCallInit = () => ({type: ACTION.GET_WRITEOFFS_FILTERS_INIT});             export const getActionsModalCallInit = () => ({type: ACTION.GET_WRITEOFFS_ACTIONS_MODAL_INIT});             Y desde ACTION podremos acceder a todas las funciones.
Show less

Description

Eliminar propiedades vacías de un objeto
const clean = (obj) => Object.entries(obj).reduce((acum, [key, value]) => (value == null ? acum : (acum[key] = value, acum)), {}); Object.entries() devuelve una matriz de pares propios de una propiedad enumerable [key, value] de un objeto dado, en el mismo orden que es proporcionado por for...in (La diferencia es que un bucle for-in enumera las propiedades en la cadena de prototipos). const persona = {nombre: 'Roberto', apellido: 'Fernández', profesión: null, apodo:'', hijos: undefined}; Object.entries(persona) --> [                                                      [ 'nombre', 'Roberto' ],                                                      [ 'apellido', 'Fernández' ],                                                      [ 'profesión', null ],                                                      [ 'apodo', '' ],                                                      [ 'hijos', undefined ]                                                    ] reduce() ejecuta una función reductora sobre cada elemento de un array, devolviendo como resultado un único valor. const array1 = [1, 2, 3, 4]; const initialValue = 7; const sumWithInitial = array1.reduce((acumulador, currentValue) => acumulador+ currentValue, initialValue );  ---> // 17  --> 7+1+2+3+4. Sin initial value --> // 10 --> 1+2+3+4 initialValue(Opcional): Un valor a usar como primer argumento en la primera llamada de la función callback. Si no se proporciona el valorInicial, el primer elemento del array será utilizado y saltado. Llamando a reduce() sobre un array vacío sin un valorInicial lanzará un TypeError. La primera vez que se llama la función, acumulador y valorActual pueden tener uno de dos valores. Si se proveyó un valorInicial al llamar a reduce, entonces acumulador será igual al valorInicial y valorActual será igual al primer elemento del array. Si no se proveyó un valorInicial, entonces acumulador será igual al primer valor en el array y valorActual será el segundo. La función clean devuelve un objeto donde no se guarda los elementos nulos, pero se podría añadir a la condición otros atributos con otros valores:  value === '' || value === null || value === undefined; reduce((acum, [key, value]) La función reduce recibe dos argumentos: acum toma el valor del initialValue {} --> que Es un objeto vacío. y el primer elemento del array que hemos creado con Object.entries(persona) --> ['nombre', 'Roberto' ], (value == null ? acum : (acum[key] = value, acum)) La función reduce evalua el valor de value, y si es null, devuelve el objeto acum y si no lo es, crea la propiedad en acum a través de acum[key] = value y devuelve el objeto acum. CURIOSIDAD: Esta forma de retornar retornar la información (acum[key] = value, acum)) tiene como propiedad que primero crea la propiedad en acum con acum[key] y por otra parte retorna el objeto acum.
Show less

Description

Cómo usar Async / Await para escribir un código mejor en JavaScript
Cómo usar Async / Await para escribir un código mejor en JavaScript   async: La palabra “async” ante una función significa solamente una cosa: que la función siempre devolverá una promesa. Otros valores serán envueltos y resueltos en una promesa automáticamente. Por ejemplo, esta función devuelve una promesa resuelta con el resultado de 1 const returOne = async () => {   return 7; } returOne().then(console.log()); // 7 Es lo mismo que esto: const returTwo = () => {   return Promise.resolve (2); } returTwo().then(console.log()); // 2 async se asegura de que la función devuelva una promesa, o envuelve las no promesas y las transforma en una. Bastante simple, ¿correcto? Pero no solo eso. Hay otra palabra, await, que solo trabaja dentro de funciones async y es muy interesante. await hace que JavaScript espere hasta que la promesa responda y devuelve su resultado. OJO con esto: const showNumber = () => {   return new Promise(resolve => {     setTimeout(()=> {       resolve('999999');     }, 5000)   }) } const msg = async () => {   const msg =await showNumber(); ---> Esperará 5 segundos y luego mostrará 'Message' '999999'   console.log('Message', msg); } msg().then(console.log('HOOOOOOOLAAAAAAAA')); ---> El then no hace que se espere los 5 segundos.... ASINCRONO: pueden suceder varias cosas relacionadas sin esperar a que se complete la acción anterior. Cómo funcionan las promesas en JavaScript El objeto Promise en JavaScript representa una operación asíncrona (y su valor resultante) que eventualmente se completará (o fallará). Una Promise puede estar en uno de estos estados: pending (pendiente): estado inicial, ni cumplida ni rechazada. fulfilled (cumplida): significa que la operación se completó con éxito. rejected (rechazada): significa que la operación falló. Link interesante:  Más link
Show less
Show full summary Hide full summary