TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

JavaScript Hacks for Hipsters

33 pointsby berznizover 10 years ago

26 comments

JonnieCacheover 10 years ago
Hows this for hipster: these are all basic programming techniques that have existed for decades and barely need to be pointed out. Or have I missed the joke?<p>EDIT: this is &quot;fake surprise&quot; isn&#x27;t it. I&#x27;m sorry HN. Everyone has to learn this stuff somewhere. But the title was kindof asking for it.<p>To any newly minted developers out there, the best way to learn this stuff is just to read other peoples code. Pick the library you enjoy using the most and read every file until you understand what all the constructions and bits of syntax are for. Then compare it to another library, etc etc. Develop a taste for some and a distaste for others. There&#x27;s no excuse not to learn experimentally in js as it has a repl. Use the source luke!
评论 #8432486 未加载
wildpeaksover 10 years ago
The problem with #1 is that the minifier (e.g. <a href="http://closure-compiler.appspot.com/home" rel="nofollow">http:&#x2F;&#x2F;closure-compiler.appspot.com&#x2F;home</a>) can&#x27;t optimize as much.<p>---------<p>Example using <i>strings</i>:<p><pre><code> var obj = { start: function(){ &#x27;use strict&#x27;; console.log(&#x27;start&#x27;); }, stop: function(){ &#x27;use strict&#x27;; console.log(&#x27;stop&#x27;); } }; exports.onDummy = function(success){ &#x27;use strict&#x27;; var method = (success ? &#x27;start&#x27; : &#x27;stop&#x27;); obj[method](); }; </code></pre> results in:<p><pre><code> var a={start:function(){console.log(&quot;start&quot;)},stop:function(){console.log(&quot;stop&quot;)}};exports.a=function(b){a[b?&quot;start&quot;:&quot;stop&quot;]()}; </code></pre> ---------<p>Same thing, using <i>if..else</i>:<p><pre><code> var obj = { start: function(){ &#x27;use strict&#x27;; console.log(&#x27;start&#x27;); }, stop: function(){ &#x27;use strict&#x27;; console.log(&#x27;stop&#x27;); } }; exports.onDummy = function(success){ &#x27;use strict&#x27;; if (success){ obj.start(); } else { obj.stop(); } }; </code></pre> results in the <i>much shorter</i>:<p><pre><code> exports.a=function(a){a?console.log(&quot;start&quot;):console.log(&quot;stop&quot;)};</code></pre>
usingpondover 10 years ago
Many of these are:<p>1) Much less legible, and in some cases outright lazy 2) Extremely vulnerable to Javascript&#x27;s fast-and-loose type checking.<p>However it&#x27;s good to be AWARE of them, since you tend to see them a lot in team projects.
berznizover 10 years ago
While introducing new developers to work on the JS part of our codebase (node &amp; client side) - I noticed some puzzled looks here and there.<p>Not everyone understands why &amp;&amp; and || are used outside of if statements. Not everyone knows about joining strings using an array.<p>This summarises the things you&#x27;ll have to know to read code in our codebase.
评论 #8432692 未加载
评论 #8432537 未加载
callahadover 10 years ago
Non-slideshow link: <a href="http://berzniz.com/post/68001735765/javascript-hacks-for-hipsters" rel="nofollow">http:&#x2F;&#x2F;berzniz.com&#x2F;post&#x2F;68001735765&#x2F;javascript-hacks-for-hip...</a><p>This may impugn my credibility as a professional developer, but I genuinely can&#x27;t tell if this article is sarcastic or sincere.
rezistikover 10 years ago
Why `success ? &#x27;method1&#x27; : &#x27;method2&#x27;` instead of `success ? obj.method1() : obj.method2() `? That seems more concise to me.
评论 #8432547 未加载
评论 #8432619 未加载
phpnodeover 10 years ago
Most of this is just idiomatic JS, hardly &quot;hacks&quot;.
Mithalduover 10 years ago
For some reason the entire thing reads to me as a guide to writing Javascript like an experienced Perl developer. Either way, it&#x27;s really cool to see people advocating an idiomatic style for JS. :)
k__over 10 years ago
I don&#x27;t know what to make of it.<p>Some seem like good ideas and some like really bad ones...
fedlarmover 10 years ago
One I&#x27;ve never thought of using before is the: isAwesome &amp;&amp; alert(&quot;yay&quot;);<p>I have used the name || &quot;no name&quot; operator a lot and thought to myself that it looked cool on first impression. But having something like: isAwesome() &amp;&amp; alert(&quot;yay&quot;); Already makes it harder to read I think. I&#x27;m curious to what others think of this one? Maybe its just because it is new to me..
评论 #8433508 未加载
评论 #8432710 未加载
评论 #8432643 未加载
评论 #8432736 未加载
drinchevover 10 years ago
IMHO, hipster JavaScript is called CoffeeScript.<p><pre><code> 1) do obj[if success then &#x27;start&#x27; else &#x27;stop&#x27;] 2) [&#x27;milk&#x27;, &#x27;coffee&#x27;, &#x27;sugar&#x27;].join &#x27;, &#x27; 3) doStuff = (options = {}) -&gt; 4) isThisAwesome?() 5) ### ... ### 6-8) ... 9) template = &quot;Hi, my name is #{firstName} and my twitter screen name is @#{screenName}&quot; </code></pre> [1] <a href="http://coffeescript.org/#try:do%20obj%5Bif%20success%20then%20&#x27;start&#x27;%20else%20&#x27;stop&#x27;%5D%0A%0A%5B&#x27;milk&#x27;%2C%20&#x27;coffee&#x27;%2C%20&#x27;sugar&#x27;%5D.join%20&#x27;%2C%20&#x27;%0A%0AdoStuff%20%3D%20(options%20%3D%20%7B%7D)%20-%3E%0A%0AisThisAwesome%3F()%0A%0Atemplate%20%3D%20%22Hi%2C%20my%20name%20is%20%23%7BfirstName%7D%20and%20my%20twitter%20screen%20name%20is%20%40%23%7BscreenName%7D%22" rel="nofollow">http:&#x2F;&#x2F;coffeescript.org&#x2F;#try:do%20obj%5Bif%20success%20then%...</a>
johannhover 10 years ago
This was originally published a year ago in this blog post:<p><a href="http://berzniz.com/post/68001735765/javascript-hacks-for-hipsters" rel="nofollow">http:&#x2F;&#x2F;berzniz.com&#x2F;post&#x2F;68001735765&#x2F;javascript-hacks-for-hip...</a><p>Makes for a nicer read than slideshare imo.
wuliwongover 10 years ago
I have read a few places recently about techniques and strategies to get rid of ifs and else&#x27;s in code. It was all in the spirit of writing more concise and compact code, not about the actual speed when executing the code. So often, I see &quot;concise&quot; at odds with &quot;readability.&quot; The &#x27;&amp;&amp;&#x27; slide is a good example of this. For me, multi-line if&#x2F;else statements are pretty easy to read. I hate running into complicated, one line, if else statements, it feels to me that it takes twice as long to parse and understand.
rbinvover 10 years ago
You certainly lose some code readability with some of these.
ryandvmover 10 years ago
Makes sense. Javascript is the PBR of programming languages.
评论 #8432358 未加载
Cthulhu_over 10 years ago
Pff, I used most of those before they were mainstream.
speakeronover 10 years ago
&quot;Trade bloated if&#x2F;else blocks for a quick function call&quot;<p>Is there any programmer since the 1970s that needs to be told this?
评论 #8432372 未加载
thomasmarcelisover 10 years ago
Someone needs to clarify to me why people are excited about this. Isn&#x27;t this just horrible for readability?<p>I&#x27;ve just started reading Clean Code, and there is a lot of emphasis on writhing readable code, because the philosophy is that code is only written once but read many times.
nkgover 10 years ago
I have witnessed many of these on some JS projects I&#x27;ve been working on! While I took time to think on it and figure out what the &quot;author&quot; was aiming at, my colleagues were more like &quot;What does this mean? No way I&#x27;m touching that. Let&#x27;s rewrite that crap!&quot;
blergh123over 10 years ago
I&#x27;m actually not sure whether this is a joke or not, some of these practices like #1, #4 and even #5 reek of amateurish programming practices - maybe this is fine for your own pet projects, but if you&#x27;re working with teams or on open source then have fun!
mattxxxover 10 years ago
Hey, I love neat Javascript tricks... but things like the &quot;TODO&quot; operator are really bad style and will hurt larger teams.<p>Stick to standards, so ease-of-communication is simpler! The reality is that collaboration is harder than programming!
评论 #8432715 未加载
nikonover 10 years ago
Some of these are mildly useful, but not sure it deserves front page.<p>I like using .filter, .forEach and .map native methods on arrays. Also making use of Underscore.js where possible.
otikikover 10 years ago
Presentation Hack for Hipsters: Use bigger fonts than this guy.
Kiroover 10 years ago
var aCoolFunction = undefined;<p>aCoolFunction &amp;&amp; aCoolFunction();<p>What is the purpose of this?
评论 #8432746 未加载
评论 #8432646 未加载
评论 #8432601 未加载
giancarlostoroover 10 years ago
I couldn&#x27;t take it seriously so I laughed instead. I really need some coffee.
officialjunkover 10 years ago
if internet explorer is important in your life, you can forget some of these.
评论 #8432383 未加载