{"id":20269679,"url":"https://github.com/yeungon/javascript-banana","last_synced_at":"2025-12-01T05:05:40.198Z","repository":{"id":80695622,"uuid":"391852665","full_name":"yeungon/javascript-banana","owner":"yeungon","description":"The \"worse\" or \"worst\" JavaScript knowledge ever that should be acquired || warned ","archived":false,"fork":false,"pushed_at":"2022-11-29T09:03:08.000Z","size":797,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-14T05:34:25.270Z","etag":null,"topics":["javascript-","react-"],"latest_commit_sha":null,"homepage":"https://banana.laptrinh.org","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yeungon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-08-02T07:25:01.000Z","updated_at":"2024-08-07T05:57:58.000Z","dependencies_parsed_at":null,"dependency_job_id":"16bc18fc-9aa4-41ab-b4c1-e73d7f82242e","html_url":"https://github.com/yeungon/javascript-banana","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yeungon%2Fjavascript-banana","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yeungon%2Fjavascript-banana/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yeungon%2Fjavascript-banana/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yeungon%2Fjavascript-banana/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yeungon","download_url":"https://codeload.github.com/yeungon/javascript-banana/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241753145,"owners_count":20014252,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript-","react-"],"created_at":"2024-11-14T12:26:36.941Z","updated_at":"2025-12-01T05:05:40.130Z","avatar_url":"https://github.com/yeungon.png","language":"CSS","readme":"JavaScript is one of the most popular programming languages in 2022 and likely many more years to come. Learn the worse part of it to become a better developer.\n\n---\n\n###### 1. Concatenation between string and number\n\n```javascript\n1 + 2 + \"3\"\n```\n\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eDemystify\u003c/b\u003e\u003c/summary\u003e\n\u003cp\u003e\n\n#### \n\n33 . First we have 3 as the first + works as a normal mathematical operation and then 3 + \"3\", the second + plays the role of concatenation.\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n---\n\n###### 2. Concatenation between null and number\n\n```javascript\nnull + 0\n```\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eDemystify\u003c/b\u003e\u003c/summary\u003e\n\u003cp\u003e\n\n#### \n\nIt returns 0 because in this operation null is converted to 0.\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n---\n\n###### 3. array is a sub-type of object\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eDemystify\u003c/b\u003e\u003c/summary\u003e\n\u003cp\u003e\n\n####\n\nSure, but looping through an object is a bit different from looping through an array and in this regard [{}, {}], as you might guess, is the best way to construct a huge collection in JavaScript.\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n---\n\n###### 4. The rescure of ...rest operator\n\n```javascript\nconst array = [\"hello\", \"World\"];\nconsole.log({...array})\n```\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eDemystify\u003c/b\u003e\u003c/summary\u003e\n\u003cp\u003e\n\nYou can convert an array to object using ...rest operator. The output will be :\n\n```javascript\n[object Object] { 0: \"hello\", 1: \"World\" }\n```\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n---\n\n###### 5. typeof might give you a surprise sometimes\n\n```javascript\nconst a = new Array();\nconsole.log(typeof a) //\"object\"\n\nconst b = [];\nconsole.log(typeof b) //\"object\"\n```\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eDemystify\u003c/b\u003e\u003c/summary\u003e\n\u003cp\u003e\n\n\n```javascript\nconst a = new Array();\nconsole.log(typeof a) //\"object\"\n\nconst b = [];\nconsole.log(typeof b) //\"object\"\n```\n\nThe first way to initiate an array is not deemed as a best practice.\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n---\n\n###### 6. What's the output?\n\n```javascript\nsetTimeout(callback, 0)\n```\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eDemystify\u003c/b\u003e\u003c/summary\u003e\n\u003cp\u003e\n\nThe callback insde the function setTimeout will only be triggered AFTER all synchronous code has been executed, no matter how many mini-second you set here, meaning it does not surely run after 0 second.\n\u003c/p\u003e\n\u003c/details\u003e\n\n---\n\n###### 7. There is no \"class\" at all when evaluated by `typeof`\n\n```javascript\nclass a { }\nconsole.log(typeof a) // \"function\"\n\nfunction b(){}\nconsole.log(typeof b) //\"function\"\n```\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eDemystify\u003c/b\u003e\u003c/summary\u003e\n\u003cp\u003e\n\nThe long story short: There is no \"class\" in JavaScript if you use `typeof` operator. But who cares?\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n---\n\n###### 8. Thanos does not understand the code\n\n```javascript\nMath.min(); // -\u003e Infinity\nMath.max(); // -\u003e -Infinity\nInfinity \u003e -Infinity; // -\u003e true\n```\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eDemystify\u003c/b\u003e\u003c/summary\u003e\n\u003cp\u003e\n\nNote that Math.max() is not the same thing as Number.MAX_VALUE. And hence, as you might see, the following code returns true:\n\n```javascript\nMath.min() \u003e Math.max(); //true\n```\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n---\n\n###### 9. true or false, that is the question!\n\n```javascript\n1 \u003c 2 \u003c 3; // -\u003e true\n3 \u003e 2 \u003e 1; // -\u003e false\n```\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eDemystify\u003c/b\u003e\u003c/summary\u003e\n\u003cp\u003e\n\nAs `1 \u003c 2` returns `true` and so `true \u003c 3` also returns `true`. On the second line, `3 \u003e 2` return `true`, but `true \u003e 1` gives us `false`.\n\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n---\n\n###### 10. sort() does not always sort!\n\n```javascript\n\nlet collections = [9, 13, 3, 20, 49, 10];\nconsole.log(collections.sort()) //[10, 13, 20, 3, 49, 9]\n\n```\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eDemystify\u003c/b\u003e\u003c/summary\u003e\n\u003cp\u003e\n\nThis is not a bug. The native JavaScript method `sort()` converts the list of elements in the array given into strings. It then compares the UTF-16 values and sorts the list based on these UTF-16 values.You might note that the list sorted according to the first digit, so 13 is less than 9 because 1 \u003c 9.\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n---\n\n###### 11. The magic does not end\n\n```javascript\nconsole.log(true + true === 2); //true\nconsole.log(true - true === 0); //true\n```\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eDemystify\u003c/b\u003e\u003c/summary\u003e\n\u003cp\u003e\n\nBoth return true.\n\nBut `console.log(true === 1)//` false because here both type and value are taken into account.\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n---\n\n###### 12. The magic does not end\n\n```javascript\nconsole.log(true + true === 2); //true\nconsole.log(true - true === 0); //true\n```\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eDemystify\u003c/b\u003e\u003c/summary\u003e\n\u003cp\u003e\n\nYou might see that the operator == only compares the value while === takes both value and type into consideration.\n\nIf you write \"10\" == 10, then we get true but \"10\" === 10 returns false.\n\n```javascript\nconsole.log(\"10\" == 10)//true\nconsole.log(\"10\" === 10)//false\n```\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n---\n\n###### 13. The magic does not end with +\n\n```javascript\n[1, 2, 3] + [4, 5, 6]\n```\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eDemystify\u003c/b\u003e\u003c/summary\u003e\n\u003cp\u003e\n\n\"1,2,34,5,6\". When the plus sign (+) is used between two different features/functions in a single context, it might behave quite strangely like above. We know it (+) holds two functions: a mathematical operation and for concatenating string.\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n---\n\n###### 14. Comparison in JavaScript is odds\n\n```javascript\nconsole.log(null == 0); //false\nconsole.log(null ===0); //false\nconsole.log(null \u003e  0); //false\nconsole.log(null \u003e= 0); //true\n```\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eDemystify\u003c/b\u003e\u003c/summary\u003e\n\u003cp\u003e\n\nsilence is golden\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n---\n\n###### 15. \n\n```javascript\nMath.max() \u003c Math.min() //true\n\n```\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eDemystify\u003c/b\u003e\u003c/summary\u003e\n\u003cp\u003e\n\nMath.min(number1, number2) and Math.max(number1, number2) allow us to find the smallest and the largest number in a collection, let say.\n\nBut if we do not pass any parameter into the function then by default Math.min(); // -\u003e Infinity and Math.max(); // -\u003e -Infinity.\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n---\n\n###### 16. \n\n```javascript\nMath.max() \u003c Math.min() //true\n\n```\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eDemystify\u003c/b\u003e\u003c/summary\u003e\n\u003cp\u003e\n\nMath.min(number1, number2) and Math.max(number1, number2) allow us to find the smallest and the largest number in a collection, let say.\n\nBut if we do not pass any parameter into the function then by default Math.min(); // -\u003e Infinity and Math.max(); // -\u003e -Infinity.\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n---\n\n###### 17 \n\n```javascript\n0.1 + 0.2; // -\u003e 0.30000000000000004\n0.1 + 0.2 === 0.3; // -\u003e false\n\n```\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eDemystify\u003c/b\u003e\u003c/summary\u003e\n\u003cp\u003e\n\nThis one is very famous and the cause rooted in the floating-point math which you might find in any other programming languages, one way or another.\n\nSo you should not blame JavaScript for this one\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n---\n\n###### 18. \n\n```javascript\nconsole.log(NaN === NaN); //false\n\n```\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eDemystify\u003c/b\u003e\u003c/summary\u003e\n\u003cp\u003e\n\nThe code returns false. So I have nothing to say, just memorize it and avoid any particular bugs caused by.\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n---\n\n###### 19. \n\n```javascript\nconsole.log(typeof NaN)//\"number\"\n\n```\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eDemystify\u003c/b\u003e\u003c/summary\u003e\n\u003cp\u003e\n\nNaN means \"Not a number\" but its typeof is \"number\". Go crazy!!!\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n---\n\n###### 20. \n\n```javascript\nconsole.log(typeof []) //object\n\n```\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eDemystify\u003c/b\u003e\u003c/summary\u003e\n\u003cp\u003e\n\nIt is said that array is a sub-type of object in JS. So the code above returns \"object\".\n\nFYI:\nconsole.log(typeof {})// \"object\"\n\nHow to fix that? Go with Array.isArray(isObjectorArray)\n\u003c/p\u003e\n\u003c/details\u003e\n\n---\n\n###### 21. \n\n```javascript\nnull is an object, \"but\"\n\n```\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eDemystify\u003c/b\u003e\u003c/summary\u003e\n\u003cp\u003e\n\nLet write some more code:\nconsole.log(typeof null), // \"object\".\nconsole.log(typeof undefined) // \"undefined\".\n\nOMG,\nconsole.log(null instanceof Object); // false\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n---\n\n###### 22. \n\n```javascript\nyou can even declare a variable without any functional keyword such as \"var\", \"let\", or \"const\".\n\n```\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eDemystify\u003c/b\u003e\u003c/summary\u003e\n\u003cp\u003e\nSo technically there are four ways to declare a variable:\n\n1) no keyword,\n2) var (not recommended),\n3) const (highly recommended)\n4) let (when you want to change the value)\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n---\n\n###### 23. \n\n```javascript\nvariable without any functional word in the beginning is terribly bad and \"var\" keyword is also unfortunately terrible.\n\n```\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eDemystify\u003c/b\u003e\u003c/summary\u003e\n\u003cp\u003e\nGiven the fact that we can re-declare a variable if it has been initially declared with \"var\". Say,\n\n```javascript\nvar x = 10;\nvar x = 12;\nconsole.log(x) //12\n```\n\nIt is therefore highly recommended not to use \"var\" in any case.\n\u003c/p\u003e\n\u003c/details\u003e\n\n---\n\n###### 24. \n\n```javascript\n\"b\" + \"a\" + + \"a\" + \"a\" === \"baNaNa\"\n\n```\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eDemystify\u003c/b\u003e\u003c/summary\u003e\n\u003cp\u003e\nThe code above returns true. Yes hell! \"NaN\" in the right \"baNaNa\" simply means \"Not a number\".\n\nNote that in JS, the plus sign (+) can be used as an operator (for number) and for concatenating (for string).\n\n\u003c/p\u003e\n\u003c/details\u003e","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyeungon%2Fjavascript-banana","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyeungon%2Fjavascript-banana","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyeungon%2Fjavascript-banana/lists"}