This post was originally posted on my and has lots of insights in the comments. personal blog Javascript is so much fun, except when it’s not. There’s always the fear of runtime errors that keeps us thinking all the time while writing code. It makes us better coders — we have no other option than to visualize every line of code as if it’s running as we write it. That’s why it’s so important to have tidy code. Small code. Pretty code. Code you just fall in love with. Otherwise, Javascript will scare you away. I gathered some fun snippets I enjoy using instead of boring code that takes too much space. Some makes the code shorter, cleaner and more readable. Other are just plain hacks for debugging. I learned all of this from open source code (until node.js all javascript code was open source, wasn’t it?), but I’ll write them here is if I invented them. Hipster Hack #1 — Method calling I really hate if/else blocks and this is quite a useful trick to call the right function based on a boolean value. // Boring (success) { if obj.start(); } { else obj.stop(); } // Hipster-fun method (success **? ‘**start’ **: ‘**stop’); var = obj[method](); Hipster Hack #2 — String joins It’s a known fact that strings like other strings. Sooner or later you’d like to concatenate two or more of them. I don’t really like +ing them together, so () comes to the rescue. join [‘first’, ‘name’].join(‘ ‘); // = ‘first name’; [‘milk’, ‘coffee’, ‘suger’].join(‘, ‘); // = ‘milk, coffee, suger’ Hipster Hack #3 — Default Operator || Javascript is all about not knowing what an object holds. Sometime you get it as a function argument, other times you might read it from the network or a configuration file. Either way, you can use the || operator to use the second argument if the first is falsy. // default to ‘No name’ when myName is empty (or null, or undefined) name myName **|| ‘**No name’; var = // make sure we have an options object doStuff (options) { var = function options options {}; = || // … }; Hipster Hack #4 — Guard Operator && Similar to the , this one is super useful. It eliminates almost all calls and makes for a nicer code. Default Operator IF // Boring (isThisAwesome) { if alert(‘yes’); // it’s not } // Awesome isThisAwesome alert(‘yes’); && // Also cool for guarding your code aCoolFunction ; var = undefined aCoolFunction aCoolFunction(); && // won’t run nor crash Hipster Hack #5 — XXX Operator This one is totally copyrighted and also SFW. Whenever I write some code, but then have to consult the web, or a different part of the code, I add an 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. xxx z 15; var = doSomeMath(z, 10); xxx // Great placeholder. I’m the only one using xxx and it’s so easy to find in code instead of TODOs doSomeMoreMath(z, 15); Hipster Hack #6 — Timing Ever wonder what’s faster: Looping with an i++ or looping with an i— ? Yeah, me neither. For those who does, you can use the console’s timing methods to test for slow loops or any other event-loop blocking code. a [1,2,3,4,5,6,7,8,9,10]; var = console.time(‘testing_forward’); ( i 0; i a.length; i**++**); for var = < console.timeEnd(‘testing_forward’); // output: testing_forward: 0.041ms console.time(‘testing_backwards’); ( i a.length — 1; i > 0; i—); for var = = console.timeEnd(‘testing_backwards’); // output: testing_backwards: 0.030ms Hipster Hack #7 — Debugging I learned this one from a Java developer. I have absolutely no idea how he knew about it and I didn’t, but I’ve been using it ever since. Just drop a statement and the debugger will stop on that line. debugger x 1; var = ; debugger // Code execution stops here, happy debugging x**++**; x Math.random(2); var = (x > 0.5) { if ; debugger // Conditional breakpoint } x—; Hipster Hack #8 — Old School Debugging I’ve always been a “printf debugger” more than a line-by-line-in-a-debugger kind of developer. If you’re like me, you’ll want to “export” some private vars into the global scope in order to examine them from time to time. Don’t forget to remove these before committing/pushing-to-production. deeplyNestedFunction () { var = function private_object { var = year**: ‘**2013' }; // Globalize it for debugging: pub private_object; = }; // Now from the console (Chrome dev tools, firefox tools, etc) pub.year; Hipster Hack #9 — Ultra Light Templates Are you still concatenating strings using the + operator? Here’s a better way to combine a sentence with your data. It’s called templating and here’s a mini framework in 2.5 lines of code. firstName **= ‘**Tal’; var screenName **= ‘**ketacode’ var // Ugly ‘Hi, my name is ‘ firstName and my twitter screen name is @’ screenName; + + ‘ + // Super template **= ‘**Hi, my name is {first-name} and my twitter screen name is @{screen-name}’; var txt template.replace(‘{first-name}’, firstName) var = .replace(‘{screen-name}’, screenName); Already knew them all? Even the copyrighted XXX Operator invented by me?! You’re a true hipster hacker, let’s talk more on twitter . is how hackers start their afternoons. We’re a part of the family. We are now and happy to opportunities. Hacker Noon @AMI accepting submissions discuss advertising & sponsorship To learn more, , , or simply, read our about page like/message us on Facebook tweet/DM @HackerNoon. If you enjoyed this story, we recommend reading our and . Until next time, don’t take the realities of the world for granted! latest tech stories trending tech stories
