JavaScript Hacks for Hipsters
77 likes38,187 views
The document presents seven JavaScript hacks aimed at improving code efficiency and readability. These hacks include using the ternary operator, string joins, the default operator, and the guard operator, among others. The author encourages better coding practices while also hinting at additional hacks available in the full blog post.
![Hipster Hack #1 - Method
calling
Trade bloated if/else blocks for a quick function call
//Boring
if(success){
obj.start();
}else{
obj.stop();
}
//Hipster-fun
varmethod=(success?'start':'stop');
obj[method]();](https://image.slidesharecdn.com/jshacks-141009075610-conversion-gate01/85/JavaScript-Hacks-for-Hipsters-2-320.jpg)
![Hipster Hack #2 - String joins
Concatenate two strings or more simpler, easier and faster
['first','name'].join('');//='firstname';
['milk','coffee','sugar'].join(',');//='milk,coffee,sugar'](https://image.slidesharecdn.com/jshacks-141009075610-conversion-gate01/85/JavaScript-Hacks-for-Hipsters-3-320.jpg)
![Hipster Hack #6 - Timing
Use the console’s timing methods to test for event-loop blocking code
vara=[1,2,3,4,5,6,7,8,9,10];
console.time('testing_forward');
for(vari=0;i<a.length;i++);
console.timeEnd('testing_forward');
//output:testing_forward:0.041ms
console.time('testing_backwards');
for(vari=a.length-1;i>=0;i--);
console.timeEnd('testing_backwards');
//output:testing_backwards:0.030ms](https://image.slidesharecdn.com/jshacks-141009075610-conversion-gate01/85/JavaScript-Hacks-for-Hipsters-7-320.jpg)
JavaScript Hacks for Hipsters
- 2. Hipster Hack #1 - Method calling Trade bloated if/else blocks for a quick function call //Boring if(success){ obj.start(); }else{ obj.stop(); } //Hipster-fun varmethod=(success?'start':'stop'); obj[method]();
- 3. Hipster Hack #2 - String joins Concatenate two strings or more simpler, easier and faster ['first','name'].join('');//='firstname'; ['milk','coffee','sugar'].join(',');//='milk,coffee,sugar'
- 4. Hipster Hack #3 - Default Operator || Use the || operator to use the second argument if the first is falsy //defaultto'Noname'whenmyNameisempty(ornull,orundefined) varname=myName||'Noname'; //makesurewehaveanoptionsobject vardoStuff=function(options){ options=options||{}; //... };
- 5. Hipster Hack #4 - Guard Operator && Use the && operator to eliminate almost all IF calls and make your code nicers //Boring if(isThisAwesome){ alert('yes');//it'snot } //Awesome isThisAwesome&&alert('yes'); //Alsocoolforguardingyourcode varaCoolFunction=undefined; aCoolFunction&&aCoolFunction();//won'trunnorcrash
- 6. Hipster Hack #5 - XXX Operator Whenever I write some code, but then have to consult the web, or a different part of the code, I add an xxx line to the code. This makes the code break so I can get back to the specific place and fix it later. Much easier to search for it (xxx usually never appears) and you don’t have to think about a TODO comment. varz=15; doSomeMath(z,10); xxx//Greatplaceholder.I'mtheonlyoneusingxxxandit'ssoeasytofindincodeinsteadofT doSomeMoreMath(z,15);
- 7. Hipster Hack #6 - Timing Use the console’s timing methods to test for event-loop blocking code vara=[1,2,3,4,5,6,7,8,9,10]; console.time('testing_forward'); for(vari=0;i<a.length;i++); console.timeEnd('testing_forward'); //output:testing_forward:0.041ms console.time('testing_backwards'); for(vari=a.length-1;i>=0;i--); console.timeEnd('testing_backwards'); //output:testing_backwards:0.030ms
- 8. Hipster Hack #7 - Debugging Drop a debugger statement and the debugger will stop on that line varx=1; debugger;//Codeexecutionstopshere,happydebugging x++; varx=Math.random(2); if(x>0.5){ debugger;//Conditionalbreakpoint } x--;
- 9. More... There are 2 more hipster hacks in the full blog post: Javascript Hacks for Hipsters
- 10. Happy Coding Tal Bereznitskey Blog: berzniz.com Twitter: @ketacode