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.

WTFJS – a list of funny and tricky JavaScript examples

72 pointsby PleaseHelpMealmost 8 years ago

15 comments

vmastoalmost 8 years ago
&gt; If you are a professional developer, you can consider these examples as a great resource for interview questions and quizzes for newcomers in your company<p>No, do not consider these examples as a &quot;great&quot; resource for interview questions. They are nothing more than tricks and hacks abusing the bad aspects of the language and anyone who includes them in an interview has failed in screening JavaScript developers, at least in my book.<p>A JS developer should understand that JavaScript has some flawed, unfixable core concepts and educate themselves on how to avoid them, not use them in actual production code or memorize every coercion scenario.<p>Some simple rules:<p>1. Always use referential equality checks (triple equal `===`). In idiomatic JS you can also use double equality only when explicitly checking against undefined or null (foo == null). It&#x27;s the only use of abstract equality that I find acceptable.<p>2. Learn how the `this` execution context works. Kyle Simpson explains it very well in YDKJS (<a href="https:&#x2F;&#x2F;github.com&#x2F;getify&#x2F;You-Dont-Know-JS&#x2F;blob&#x2F;master&#x2F;this%20%26%20object%20prototypes&#x2F;ch2.md" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;getify&#x2F;You-Dont-Know-JS&#x2F;blob&#x2F;master&#x2F;this%...</a>). There are four simple rules that matter and are straightforward to grasp.<p>3. Familiarize yourself with how type coercion works in JS but avoid it. The spec is quite easy to follow in this matter and follows very specific, documented rules. e.g.:<p><a href="https:&#x2F;&#x2F;www.ecma-international.org&#x2F;ecma-262&#x2F;8.0&#x2F;index.html#sec-additive-operators" rel="nofollow">https:&#x2F;&#x2F;www.ecma-international.org&#x2F;ecma-262&#x2F;8.0&#x2F;index.html#s...</a> <a href="https:&#x2F;&#x2F;www.ecma-international.org&#x2F;ecma-262&#x2F;8.0&#x2F;index.html#sec-abstract-equality-comparison" rel="nofollow">https:&#x2F;&#x2F;www.ecma-international.org&#x2F;ecma-262&#x2F;8.0&#x2F;index.html#s...</a><p>Use strictly as reference.<p>4. Stop using plain ES5, the language currently is ES2017. ES2015 and beyond provide modern constructs that make most of ES5&#x27;s weirdness obsolete. For example, never use `var` anymore, `const` and `let` are superior initializers.<p>By following the above rules a JS developer should be fine in 99% of cases, in my experience. Yes, JavaScript will possibly implode on you on the rest 1%, but I&#x27;d be hard pressed to find a (similarly popular) language that doesn&#x27;t. If one finds that to be unacceptable, enabling types via TypeScript or Flow should make their life even easier.
评论 #14892388 未加载
twissalmost 8 years ago
<i>We can fix this with Greater than or equal operator (&gt;=):</i><p><i>3 &gt; 2 &gt;= 1 &#x2F;&#x2F; true</i><p>What? No, JavaScript doesn&#x27;t have chained comparison operators, as the author seems to know but not explain. Overall this list is pretty misleading and uninteresting IMHO.
uwualmost 8 years ago
&gt; Object.create(Array).length === 1 &#x2F;&#x2F;true<p>it bothers me how the examples are often misleading or just misusing language features but people who don&#x27;t know the language will gladly agree with them and have their &quot;js sucks&quot; belief reinforced
评论 #14891850 未加载
评论 #14891832 未加载
评论 #14891744 未加载
b0rsukalmost 8 years ago
<p><pre><code> $python Python 2.7.9 (default, Jun 29 2016, 13:08:31) [GCC 4.9.2] on linux2 &gt;&gt;&gt; True + True 2 &gt;&gt;&gt; </code></pre> okay...<p><pre><code> python3 Python 3.4.2 (default, Oct 8 2014, 10:45:20) [GCC 4.9.1] on linux Type &quot;help&quot;, &quot;copyright&quot;, &quot;credits&quot; or &quot;license&quot; for more information. &gt;&gt;&gt; True + True 2 &gt;&gt;&gt; </code></pre> I&#x27;m going to try this in Rust.
评论 #14891934 未加载
评论 #14891984 未加载
评论 #14892005 未加载
评论 #14891985 未加载
nthcolumnalmost 8 years ago
From a few years back but made me laugh a lot: <a href="https:&#x2F;&#x2F;www.destroyallsoftware.com&#x2F;talks&#x2F;wat" rel="nofollow">https:&#x2F;&#x2F;www.destroyallsoftware.com&#x2F;talks&#x2F;wat</a>
deelowealmost 8 years ago
Such blatant misuse of the language in these examples. Not sure what to think. It seems like the author has a good understanding of JS, but then goes out of the way to purposefully misrepresent things to construct strawmen simply to then tear them down. If someone comes across this without being familiar with JS, they could very easily be misled.<p>As a comparison, how many WTF C++ examples could be constructed if people misused arrays, pointers, bitwise comparators, oeprator overloads, templates, etc... to create nonsensical operations?
评论 #14892250 未加载
评论 #14892655 未加载
LoSboccaccalmost 8 years ago
NaN != NaN should be obvious, otherwise Math.sqrt(-1) == 0&#x2F;0
brudgersalmost 8 years ago
More WTF, <a href="https:&#x2F;&#x2F;wtfjs.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;wtfjs.com&#x2F;</a>
gattilorenzalmost 8 years ago
<p><pre><code> (typeof (new (class { class () {} }))) &#x2F;&#x2F; -&gt; &#x27;object&#x27; It seems like we&#x27;re declaring a class inside of class. Should be and error, however, we get an &#x27;object&#x27; string. Explanation: Since ECMAScript 5 era, keywords are allowed as property names. </code></pre> Can anyone explain why allowing keywords as property names seemed a good idea? To me it creates a lot of potential for confusion without providing enough benefits, but I&#x27;d like to be... enlightened
评论 #14893901 未加载
Tade0almost 8 years ago
From now on I&#x27;m going to include at least one of these in each interview I&#x27;ll be conducting - for extra points of course.<p>Anyway a lot of these examples can be explained if you know how type coercion works in JS and are aware what the `valueOf` method exists for.<p>Here&#x27;s a nice write-up about this mechanism: <a href="http:&#x2F;&#x2F;2ality.com&#x2F;2011&#x2F;12&#x2F;fake-operator-overloading.html" rel="nofollow">http:&#x2F;&#x2F;2ality.com&#x2F;2011&#x2F;12&#x2F;fake-operator-overloading.html</a>
评论 #14892123 未加载
评论 #14892728 未加载
评论 #14892590 未加载
justinpombrioalmost 8 years ago
My favorite:<p><pre><code> x = &quot;053&quot; y = 50 z = &quot;40&quot; x &gt; y &#x2F;&#x2F; -&gt; true y &gt; z &#x2F;&#x2F; -&gt; true z &gt; x &#x2F;&#x2F; -&gt; true</code></pre>
评论 #14897291 未加载
tomxoralmost 8 years ago
Except for &quot;Precision of 0.1 + 0.2&quot; which all programmers should know is a floating point fraction arithmetic limitation, not a JavaScript issue.
johnhenryalmost 8 years ago
This is really useful because of the attached explanations.
ndzalmost 8 years ago
That&#x27;s one of proofs that JavaScript is an evil without TypeScript especially in inexperienced hands :)
sAbakumoffalmost 8 years ago
It&#x27;s interesting to see that a lot of people make fun of JS, publish articles on how weird it could be, receive a ton of likes, but still it&#x27;s the most popular programming language at the moment. It&#x27;s like Stockholm Syndrome we developed with time!
评论 #14891974 未加载
评论 #14892676 未加载