Hacks de Javascript para Hipsters

Esta publicación fue publicada originalmente en mi blog personal y tiene muchas ideas en los comentarios.

Javascript es muy divertido, excepto cuando no lo es.

Siempre existe el temor a los errores de tiempo de ejecución que nos mantiene pensando todo el tiempo al escribir código. Nos hace mejores codificadores, no tenemos otra opción que visualizar cada línea de código como si estuviera ejecutándose mientras lo escribimos.

Por eso es tan importante tener un código ordenado. Código pequeño Bonito código. Código del que te enamoras. De lo contrario, Javascript te asustará.

Reuní algunos fragmentos divertidos que disfruto usar en lugar de código aburrido que ocupa demasiado espacio. Algunos hacen que el código sea más corto, más limpio y más legible. Otros simplemente son hacks para la depuración.

Aprendí todo esto desde el código fuente abierto (hasta que node.js todo el código javascript era de código abierto, ¿no?), Pero los escribiré aquí si los inventé.

Hipster Hack # 1 – Método de llamada

Realmente odio si / else bloquea y este es un truco bastante útil para llamar a la función correcta en función de un valor booleano.

 // Aburrido 
 if (success) { 
 obj.start (); 
 } else { 
 obj.stop (); 
 } 
 // Hipster-diversión 
 var method = (success ? ' start' : ' stop'); 
 obj [método] (); 

Hipster Hack # 2 – String se une

Es un hecho conocido que las cadenas como otras cadenas. Tarde o temprano le gustaría concatenar dos o más de ellos. Realmente no me gusta + ing juntos, así que join () viene al rescate.

 ['primer', 'nombre']. join (''); // = 'primer nombre'; 
 ['leche', 'café', 'suger']. join (','); // = 'leche, café, suger' 

Hipster Hack # 3 – Operador predeterminado ||

Javascript se trata de no saber qué contiene un objeto. En algún momento lo obtiene como un argumento de función, otras veces puede leerlo desde la red o un archivo de configuración. De cualquier forma, puedes usar el || operador para usar el segundo argumento si el primero es falso.

 // predeterminado a 'Sin nombre' cuando myName está vacío (o nulo, o indefinido) 
 var name = myName || ' Sin nombre'; 
 // asegurarnos de tener un objeto de opciones 
 var doStuff = function (opciones) { 
 opciones = opciones || {}; 
 // ... 
 }; 

Hipster Hack # 4 – Operador de guardia &&

Similar al operador predeterminado , este es muy útil. Elimina casi todas las llamadas IF y crea un código más agradable.

 // Aburrido 
 if (isThisAwesome) { 
 alerta ('sí'); // no es 
 } 
 // Increíble 
 isThisAwesome && alert ('yes'); 
 // También genial para proteger tu código 
 var aCoolFunction = undefined ; 
 aCoolFunction && aCoolFunction (); // no se ejecutará ni se bloqueará 

Hipster Hack # 5 – Operador XXX

Este tiene todos los derechos de autor y también SFW. Cada vez que escribo un código, pero luego tengo que consultar la web, o una parte diferente del código, agrego una línea xxx al código. Esto hace que el código se rompa para poder volver al lugar específico y arreglarlo más tarde. Mucho más fácil buscarlo (xxx generalmente nunca aparece) y no tiene que pensar en un comentario TODO.

 var z = 15; 
 doSomeMath (z, 10); 
 xxx // Gran marcador de posición. Soy el único que usa xxx y es tan fácil de encontrar en código en lugar de TODOs 
 doSomeMoreMath (z, 15); 

Hipster Hack # 6 – sincronización

¿Alguna vez se preguntó qué es más rápido: bucle con un i ++ o bucle con un i-? Sí, yo tampoco. Para aquellos que sí lo tienen, puede usar los métodos de sincronización de la consola para probar bucles lentos o cualquier otro código de bloqueo de bucle de evento.

 var a = [1,2,3,4,5,6,7,8,9,10]; 
 console.time ('testing_forward'); 
 para ( var i = 0; i < a.length; i ++ ); 
 console.timeEnd ('testing_forward'); 
 // salida: testing_forward: 0.041ms 
 console.time ('testing_backwards'); 
 para ( var i = a.length - 1; i> = 0; i-); 
 console.timeEnd ('testing_backwards'); 
 // salida: testing_backwards: 0.030ms 

Hipster Hack # 7 – Depuración

Aprendí esto de un desarrollador de Java. No tengo ni idea de cómo lo sabía y yo no, pero lo he estado usando desde entonces. Simplemente suelte una declaración de depurador y el depurador se detendrá en esa línea.

 var x = 1; 
 depurador ; // La ejecución del código se detiene aquí, depuración feliz 
 x ++ ; 
 var x = Math.random (2); 
 if (x> 0.5) { 
 depurador ; // Punto de interrupción condicional 
 } 
 X-; 

Hipster Hack # 8 – Depuración de la vieja escuela

Siempre he sido un "depurador de printf" más que un desarrollador de línea por línea en un depurador. Si eres como yo, querrás "exportar" algunos vars privados al alcance global para examinarlos de vez en cuando. No te olvides de eliminar estos antes de comprometer / empujar a la producción.

 var deeplyNestedFunction = function () { 
 var private_object = { 
 año : ' 2013' 
 }; 
 // Globalizarlo para la depuración: 
 pub = private_object; 
 }; 
 // Ahora desde la consola (herramientas de desarrollo de Chrome, herramientas de Firefox, etc.) 
 pub.year; 

Hipster Hack # 9 – Plantillas ultra claras

¿Sigue concatenando cadenas usando el operador +? Aquí hay una mejor manera de combinar una oración con sus datos. Se llama plantilla y aquí hay un mini marco en 2.5 líneas de código.

 var firstName = ' Tal'; 
 var screenName = ' ketacode' 
 // Feo 
 'Hola, mi nombre es' + firstName + ' y mi nombre de pantalla de twitter es @' + screenName; 
 // Súper 
 var template = ' Hola, mi nombre es {first-name} y mi nombre de pantalla de twitter es @ {screen-name}'; 
 var txt = template.replace ('{first-name}', firstName) 
 .replace ('{screen-name}', screenName); 

¿Ya los conocía a todos?

Incluso el operador XXX con derechos de autor inventó por mí? Eres un verdadero hacker hipster, hablemos más en twitter .

Hacker Noon es cómo los hackers comienzan sus tardes. Somos parte de la familia @AMI . Ahora estamos aceptando presentaciones y estamos felices de conversar sobre oportunidades de publicidad y patrocinio .

Para obtener más información, lea nuestra página acerca de , como / envíenos un mensaje en Facebook , o simplemente, tweet / DM @HackerNoon.

Si disfrutaste esta historia, te recomendamos que leas nuestras últimas historias tecnológicas e historias tecnológicas de tendencia . Hasta la próxima, ¡no des por sentado las realidades del mundo!