{"id":56,"date":"2022-04-28T05:01:55","date_gmt":"2022-04-28T05:01:55","guid":{"rendered":"https:\/\/yassinemoumen.com\/?p=56"},"modified":"2022-05-11T05:46:31","modified_gmt":"2022-05-11T05:46:31","slug":"javascript-says-wat","status":"publish","type":"post","link":"https:\/\/yassinemoumen.com\/?p=56","title":{"rendered":"JavaScript Says WAT!"},"content":{"rendered":"\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Enough making fun of languages that suck. Let\u2019s talk about JavaScript.<\/p><cite>Gary Bernhardt<\/cite><\/blockquote>\n\n\n\n<p>A popular pastime among programmers is to make fun of programming languages, or at least the one you choose not to use. For example, Gary Bernhardt\u2019s 5-minute talk\u00a0WAT\u00a0is all about unexpected behavior, mostly in Javascript.<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video controls src=\"http:\/\/yassinemoumen.com\/wp-content\/uploads\/2022\/04\/wat.mp4\"><\/video><figcaption>From <em>www.destroyallsoftware.com<\/em><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">A brief summary of the video:<\/h2>\n\n\n\n<p>On January 12, 2012, at the CodeMash conference in a Sandusky, Ohio indoor water park, Gary Bernhardt presented a lightning talk titled WAT.<br>Bernhardt displayed some absurd anomalies in Ruby and JavaScript. After each example, he showed a funny picture that was captioned with &#8220;WAT&#8221;. The crowd loved it. It is a classic bit. Wat has become The Aristocrats of JavaScript.<\/p>\n\n\n\n<p>But seriously though, JavaScript?!, what\u2019s up with this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#91;] + &#91;] = ''\n&#91;] + {} = '&#91;object Object]'\n{} + &#91;] = 0\n{} + {} = NaN\nArray(16).join('wat' - 1) + ' Batman' = 'NaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaN Batman'<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">JavaScript does it differently, and this doesn&#8217;t mean it&#8217;s wrong:<\/h2>\n\n\n\n<p>Many of the jokes are due to the type coercion algorithms behind JavaScript\u2019s &#8220;==&#8221; (equal sign equal sign) and &#8220;+&#8221; (plus sign) operators. The type coercion rules are complex, unmemorable, and in some cases, as you will see, wrong. That is why it is not recommend to use of &#8220;==&#8221; (equal sign equal sign). It implements ECMAScript\u2019s Abstract Equality Comparison Algorithm. It is a can of worms that is not worth opening. it is better to  use &#8220;===&#8221; (equal sign equal sign equal sign) instead. Some people do not like &#8220;===&#8221; (equal sign equal sign equal sign) because it looks 50% stupider than &#8220;==&#8221; (equal sign equal sign) which is itself twice as stupid as &#8220;=&#8221; (equal sign). Nevertheless, the correct equality operator in JavaScript is &#8220;===&#8221; (equal sign equal sign equal sign).<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\"\" == false \/\/ true \n&#91;] == false \/\/ true \nnull == false \/\/ false \nundefined == false \/\/ false<\/code><\/pre>\n\n\n\n<p>The empty string is a falsy value, so a sloppy equals operator might want to conflate it with <strong>false<\/strong>. An empty array is not falsy, yet it also compares to <strong>false<\/strong>. And null and undefined are falsy values, but neither compares to <strong>false<\/strong>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#91;] == &#91;] \/\/ false \n&#91;] == !&#91;] \/\/ true<\/code><\/pre>\n\n\n\n<p>Two empty arrays are not the same object, so they are not equal. But the second line is surprising. It appears that JavaScript is a language in which <strong>x <\/strong>and <strong>not x <\/strong>can be equal to each other, which would be a seriously laughable incompetence. This is what is happening: <\/p>\n\n\n\n<p>An empty array is truthy, so ![] is <strong>false<\/strong>. The sloppy equals operator wants to compare [] and <strong>false<\/strong> as numbers even though neither is a number. The empty array is coerced to empty string which is coerced to zero. And <strong>false<\/strong> is also coerced to zero. Zero equals zero, so the answer is <strong>true<\/strong>.<\/p>\n\n\n\n<p>If you want to know more about equality in JavaScript, I highly recommend giving the <a href=\"https:\/\/dorey.github.io\/JavaScript-Equality-Table\/unified\/\" target=\"_blank\" rel=\"noreferrer noopener\">JavaScript-Equality-Table<\/a> a look.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#91;] + &#91;] \/\/ \"\" \n&#91;] + {} \/\/ \"&#91;object Object]\" \n{} + {} \/\/ \"&#91;object Object]&#91;object Object]\"<\/code><\/pre>\n\n\n\n<p>All of these cases should produce <strong>NaN<\/strong>. This is what <strong>NaN<\/strong> is for. Instead, because the values are not numbers, &#8220;+&#8221; (plus sign) wants to concatenate them. First it has to coerce them to strings. The <strong>Array.prototype.toString() <\/strong>method converts an empty array to an empty string. It would be better if it acted like <strong>JSON.stringify()<\/strong> and returned &#8220;[]&#8221;. The worthless <strong>Object.prototype.toString()<\/strong> method renders the objects as &#8220;[object Object]&#8221;. Then those strings get concatenated together.<\/p>\n\n\n\n<p>I know this is not bad code as such, but it does not provide the expected result, thus you may see something that looks extraordinarily complicated &#8211; a usual sign of bad code &#8211; which is necessary because the simple version does not work.<\/p>\n\n\n\n<p>If you want a more in-depth explanation of each WAT in this presentation, check out this <a href=\"https:\/\/stackoverflow.com\/questions\/9032856\/what-is-the-explanation-for-these-bizarre-javascript-behaviours-mentioned-in-the\/9033306#9033306\">stackoverflow response<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why is JavaScript so often the butt of the joke?<\/h2>\n\n\n\n<p>Part of the reason is that it is a language that beginners pick up and never quite mange to learn &#8211; so they end up churning out some very bad code. It is also the case that JavaScript looks like a trivial language; this means you can get a long way without having to learn anything new so, again, the result is bad code. Many programmers think that when they see bad code in a language, then it is the language&#8217;s fault. Of course, you can see bad code in many languages. But JavaScript has a reputation for it that goes well beyond what seems reasonable.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">In conclusion<\/h2>\n\n\n\n<p>This isn\u2019t to say that all languages are equal, there are&nbsp;better&nbsp;and&nbsp;worse, of course. But too often I hear people ranting about a language being stupid for some decision, without bothering to find out why it was done that way, and what benefit they might get from it.<br>To which, I say: <strong>WAT!?<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Further Reading<\/h2>\n\n\n\n<ol class=\"wp-block-list\"><li>https:\/\/medium.com\/dailyjs\/the-why-behind-the-wat-an-explanation-of-javascripts-weird-type-system-83b92879a8db<\/li><li>https:\/\/stackoverflow.com\/questions\/9021109\/what-is-in-javascript\/9021351#9021351<\/li><li>https:\/\/blog.caplin.com\/2012\/01\/27\/the-why-of-wat\/<\/li><li>https:\/\/missingtoken.net\/ruby\/2014\/11\/13\/the-why-of-wat-ruby-edition\/<\/li><li>https:\/\/project-awesome.org\/JanVanRyswyck\/awesome-talks<\/li><li>https:\/\/github.com\/denysdovhan\/wtfjs<\/li><\/ol>\n","protected":false},"excerpt":{"rendered":"<p>Enough making fun of languages that suck. Let\u2019s talk about JavaScript. Gary Bernhardt A popular pastime among programmers is to make fun of programming languages, or at least the one you choose not to use. For example, Gary Bernhardt\u2019s 5-minute talk\u00a0WAT\u00a0is all about unexpected behavior, mostly in Javascript. A brief summary of the video: On [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"full-width-page-template.php","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[7],"tags":[],"class_list":["post-56","post","type-post","status-publish","format-standard","hentry","category-programming","missing-thumbnail"],"_links":{"self":[{"href":"https:\/\/yassinemoumen.com\/index.php?rest_route=\/wp\/v2\/posts\/56","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yassinemoumen.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/yassinemoumen.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/yassinemoumen.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/yassinemoumen.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=56"}],"version-history":[{"count":14,"href":"https:\/\/yassinemoumen.com\/index.php?rest_route=\/wp\/v2\/posts\/56\/revisions"}],"predecessor-version":[{"id":73,"href":"https:\/\/yassinemoumen.com\/index.php?rest_route=\/wp\/v2\/posts\/56\/revisions\/73"}],"wp:attachment":[{"href":"https:\/\/yassinemoumen.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=56"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/yassinemoumen.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=56"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/yassinemoumen.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=56"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}