{"id":2923,"date":"2017-07-16T17:38:13","date_gmt":"2017-07-16T12:08:13","guid":{"rendered":"https:\/\/code4developers.com\/?p=2923"},"modified":"2017-07-16T17:38:13","modified_gmt":"2017-07-16T12:08:13","slug":"javascript-3-true-4-7-tricky-equations","status":"publish","type":"post","link":"https:\/\/code4developers.com\/javascript-3-true-4-7-tricky-equations\/","title":{"rendered":"JavaScript: Why does 3 + true = 4? (and 7 other tricky equations)"},"content":{"rendered":"

How to Follow\u00a0Along<\/strong><\/h3>\n

It\u2019s about to get weird\u200a\u2014\u200aand you\u2019re going to want to follow along with me. You can open up your Chrome Developer Console with: (Windows: Ctrl + Shift + J<\/em>)(Mac: Cmd + Option + J<\/em>). This will allow you to type all of the following code into your browser so you can see in real time what is happening\u2026<\/p>\n

3 + true ==\u00a04<\/strong><\/h4>\n

I\u2019m not kidding either. In JavaScript, when the plus operator is placed between a\u00a0number\u00a0and a\u00a0boolean, the\u00a0boolean\u00a0is converted to a\u00a0number.<\/p>\n

If you know here \u00a0false == 0\u00a0and\u00a0true == 1. With this in mind,\u00a03 + true\u00a0is converted to\u00a03 + 1\u00a0and thus we get the answer of\u00a04<\/strong>.<\/p>\n

true +\u00a0false<\/strong><\/h4>\n

This follows the same logic as the above example. When the plus operator is placed between two\u00a0booleans, the\u00a0booleans\u00a0are converted to\u00a0numbers. Thus,\u00a0true + false\u00a0is converted to\u00a01 + 0\u00a0and we get an answer of\u00a01<\/strong>.<\/p>\n

\u20184\u2019 +\u00a08<\/strong><\/h4>\n

What happens when we add a\u00a0string\u00a0number to an actual\u00a0number? When the plus operator is placed between to operands, and one is a\u00a0string, it will convert the other\u00a0number\u00a0or\u00a0boolean\u00a0to a string and concatenate them.<\/p>\n

By this logic:\u00a0‘4’ + 8\u00a0becomes\u00a0‘4’ + ‘8’\u00a0and we get an answer of\u00a0’48’<\/strong>.<\/p>\n

true +\u00a0\u20184\u2019<\/strong><\/h4>\n

Similar to the above example, JavaScript will convert the\u00a0boolean\u00a0into a\u00a0string\u00a0value and concatenate. This becomes\u00a0‘true’ + ‘4’\u00a0and the result is\u00a0‘true4’.<\/p>\n

1 + 1 +\u00a0\u20181\u2019<\/strong><\/h4>\n

Order of operations is important. In this instance, JavaScript evaluates the first\u00a0+\u00a0before anything else:\u00a01 + 1\u00a0equals\u00a02. Then we move on and add in the\u00a0string\u00a0value of\u00a0‘1’. Concatenation occurs and the result is\u00a0’21’.<\/p>\n

Here\u2019s the chain of events:<\/p>\n

1 + 1 + '1'\r\n\u00a0 2\u00a0\u00a0 + '1'\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 '21'<\/pre>\n
\u20181\u2019 + 1 +\u00a01<\/strong><\/h4>\n
What changes when we have our string value first instead of last? Remember the order of operations and work from left to right:<\/p>\n
'1' + 1 + 1\r\n\u00a0\u00a0 '11' + 1\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 '111'<\/pre>\n
string + number = string. So in this instance we\u2019re left with one long string of\u00a0‘111’.<\/p>\n
-\u201869\u2019 +\u00a069<\/strong><\/h4>\n
What if we attempt to negate a\u00a0string\u00a0and then add a\u00a0number? As you should know by now, without the negation, our answer would be\u00a0‘6969’. However, the negation changes things.<\/p>\n
The minus sign before\u00a0’69’\u00a0is a unary minus operator that will actually convert the\u00a0string\u00a0to a\u00a0number\u00a0and make it negative. Thus, our equation becomes\u00a0-69 + 69\u00a0which equals\u00a00<\/strong>.<\/p>\n
-\u2018giddyup\u2019 +\u00a0409<\/strong><\/h4>\n
What if our unary minus operator is in front of a string that can\u2019t be converted to a number? When JavaScript fails to produce a number, we are left with\u00a0NaN\u00a0(Not A Number).<\/p>\n
You did\u00a0it.<\/strong><\/h4>\n
Good work!I hope you enjoyed my article. I publish a few articles and tutorials each week, please\u00a0enter your email below\u00a0if you\u2019d like to be added to my once-weekly email list.<\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
How to Follow\u00a0Along It\u2019s about to get weird\u200a\u2014\u200aand you\u2019re going to want to follow along with me. You can open up your Chrome Developer Console with: (Windows: Ctrl + Shift…<\/p>\n","protected":false},"author":7,"featured_media":2672,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[2],"tags":[22],"powerkit_post_featured":[],"class_list":{"0":"post-2923","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript","8":"tag-javascript"},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/thumb-1-e1498942297714.png?fit=240%2C269&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8NAi4-L9","jetpack-related-posts":[{"id":2610,"url":"https:\/\/code4developers.com\/semicolon-in-javascript\/","url_meta":{"origin":2923,"position":0},"title":"Importance of Semicolon [;] In JavaScript","author":"Yatendrasinh Joddha","date":"June 19, 2017","format":false,"excerpt":"It is said that in JavaScript semicolons are not compulsory. It's true, because JavaScript automatically inserts a semicolons at required place and it is know as \"Automatic Semicolon Insertion\". This behavior of JavaScript confuses us a lot. This article is written for those who have just started writing JavaScript and\u2026","rel":"","context":"In "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/code4developers.com\/category\/javascript\/"},"img":{"alt_text":"javascript","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":2975,"url":"https:\/\/code4developers.com\/event-capturing-bubbling-javascript\/","url_meta":{"origin":2923,"position":1},"title":"Event Capturing and Bubbling in JavaScript","author":"Yatendrasinh Joddha","date":"July 21, 2017","format":false,"excerpt":"The DOM has two approaches for object to sense events: first is top down approach and second is bottom up approach. Top down approach is called event capturing\u00a0whereas bottom up is known as event bubbling. Let\u2019s start with example where you have one html which contains 
, 
 under 
,\u2026","rel":"","context":"In "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/code4developers.com\/category\/javascript\/"},"img":{"alt_text":"javascript","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":7069,"url":"https:\/\/code4developers.com\/ways-to-use-generator-functions-in-javascript\/","url_meta":{"origin":2923,"position":2},"title":"Ways to use Generator Functions in JavaScript","author":"Arif Khoja","date":"May 15, 2020","format":false,"excerpt":"In this Article we will see below points Generator Functions Recap: Functions How does it work? 4 ways to use Generator Functions with Examples Advantages of using Generator function What are Generator Functions? Ever imagined what would happen if a function had an infinite input or output to deal with?\u2026","rel":"","context":"In "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/code4developers.com\/category\/javascript\/"},"img":{"alt_text":"Functional-programming-js","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/04\/avatar-js.png?fit=512%2C512&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3216,"url":"https:\/\/code4developers.com\/superstruct\/","url_meta":{"origin":2923,"position":3},"title":"Superstruct","author":"Arif Khoja","date":"January 31, 2018","format":false,"excerpt":"I stumbled upon this GitHub project a few days ago. It\u2019s called Superstruct, and it looks like an awesome way to validate data in JavaScript. Let me explain. You probably want to make sure that you get the kind of data you expect as input in JavaScript, either from your\u2026","rel":"","context":"In "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/code4developers.com\/category\/javascript\/"},"img":{"alt_text":"javascript","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":3119,"url":"https:\/\/code4developers.com\/difference-between-javascript-and-ecmascript\/","url_meta":{"origin":2923,"position":4},"title":"What\u2019s the difference between JavaScript and ECMAScript?","author":"Arif Khoja","date":"October 31, 2017","format":false,"excerpt":"I\u2019ve tried googling \u201cthe difference between JavaScript and ECMAScript.\u201d I ended up having to wade through a sea of ambiguous and seemingly conflicting results: \u201cECMAScript is a standard.\u201d \u201cJavaScript is a standard.\u201d \u201cECMAScript is a specification.\u201d \u201cJavaScript is an implementation of the ECMAScript standard.\u201d \u201cECMAScript is standardized JavaScript.\u201d \u201cECMAScript is\u2026","rel":"","context":"In "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/code4developers.com\/category\/javascript\/"},"img":{"alt_text":"javascript","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":3150,"url":"https:\/\/code4developers.com\/webpack-introduction-without-code\/","url_meta":{"origin":2923,"position":5},"title":"Webpack: introduction without any code.","author":"Arif Khoja","date":"December 1, 2017","format":false,"excerpt":"There have existed build tools for JavaScript as long as I have been coding with it. I can without doubt say that they are better and easier to understand today than they have ever been. But there are also much more you \u201cneed\u201d to know before you get started. The\u2026","rel":"","context":"In "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/code4developers.com\/category\/javascript\/"},"img":{"alt_text":"javascript","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=700%2C400 2x"},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/2923","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/comments?post=2923"}],"version-history":[{"count":1,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/2923\/revisions"}],"predecessor-version":[{"id":2924,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/2923\/revisions\/2924"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media\/2672"}],"wp:attachment":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media?parent=2923"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/categories?post=2923"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/tags?post=2923"},{"taxonomy":"powerkit_post_featured","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/powerkit_post_featured?post=2923"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}