{"id":9317,"date":"2022-04-28T20:43:00","date_gmt":"2022-04-28T18:43:00","guid":{"rendered":"https:\/\/monodes.com\/predaelli\/?p=9317"},"modified":"2022-04-28T10:45:27","modified_gmt":"2022-04-28T08:45:27","slug":"7-more-killer-one-liners-in-javascript-by-tapajyoti-bose-apr-2022-medium","status":"publish","type":"post","link":"https:\/\/monodes.com\/predaelli\/2022\/04\/28\/7-more-killer-one-liners-in-javascript-by-tapajyoti-bose-apr-2022-medium\/","title":{"rendered":"7 More Killer One-Liners in JavaScript | by Tapajyoti Bose | Apr, 2022 | Medium"},"content":{"rendered":"

7 More Killer One-Liners in JavaScript | by Tapajyoti Bose | Apr, 2022 | Medium<\/a><\/em><\/p>\n

<\/p>\n

\n

This is a continuation of the previous list of JavaScript<\/strong> one-liners<\/a>. If you haven\u2019t checked out the article, you are highly encouraged to accomplish so.<\/p>\n

Let\u2019s crack on with the new list!<\/p>\n

1. Sleep Function<\/h1>\n

JavaScript<\/strong> has NO<\/strong> built-in sleep<\/code> function to wait for a given duration before continuing the execution flow of the code.<\/p>\n

Luckily, generating a function for this purpose is straightforward<\/p>\n

const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));<\/span><\/pre>\n
2. Go Back to the Previous Page<\/h1>\n
Need to send the user back to the page they came from? history<\/code> object to the rescue!<\/p>\n
const navigateBack = () => history.back();\n\/\/ Or<\/em>\nconst navigateBack = () => history.go(-1);<\/span><\/pre>\n
3. Compare Objects<\/h1>\n
Javascript<\/strong> behaves in mysterious ways when comparing objects. Comparing objects with the ===<\/code> operator checks only the reference of the objects<\/strong>, so the following code always returns false<\/code>:<\/p>\n
const obj1 = { a: 1, b: 2 };\nconst obj2 = { a: 1, b: 2 };\nobj1 === obj2; \/\/ false<\/em><\/span><\/pre>\n
To solve this very issue, you can create a deep comparison<\/strong> function:<\/p>\n
const isEqual = (a, b) => JSON.stringify(a) === JSON.stringify(b);<\/span>\/\/ examples<\/em>\nisEqual({ a: 1, b: 2 }, { a: 1, b: 2 }); \/\/ true<\/em>\nisEqual({ a: 1, b: 2 }, { a: 1, b: 3 }); \/\/ false<\/em><\/span>\/\/ works with arrays too<\/em>\nisEqual([1, 2, 3], [1, 2, 3]); \/\/ true<\/em>\nisEqual([1, 2, 3], [1, 2, 4]); \/\/ false<\/em><\/span><\/pre>\n
4. Generate Random id<\/h1>\n
Need multiple unique identifiers<\/strong> but not looking to add the uuid<\/code> package? Try out this simple utility function:<\/p>\n
const uuid = () =>\n  ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(\/[018]\/g, (c) =>\n    (\n      c ^\n      (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c \/ 4)))\n    ).toString(16)\n  );<\/span><\/pre>\n
NOTE:<\/strong> The function is a one-liner<\/strong>, but spread across multiple lines for readability.<\/p>\n
5. Get Selected Text<\/h1>\n
Want to have access to the text user selects<\/strong>? window<\/code> just has a method to help you out!<\/p>\n
const getSelectedText = () => window.getSelection().toString();<\/span><\/pre>\n
6. Check if an Element is Focused<\/h1>\n
You can effortlessly check if an element is currently focused<\/strong> without setting up the focus<\/code> & blur<\/code> listener<\/strong>.<\/p>\n
const hasFocus = (element) => element === document.activeElement;<\/span><\/pre>\n
7. Count by the Properties of an Array of Objects<\/h1>\n
Need to count the number of items in an array<\/strong> that match a particular property<\/code>? Using reduce<\/code> on arrays<\/strong> can achieve the task with ease!<\/p>\n
const countElementsByProp = (arr, prop) =>\n  arr.reduce(\n    (prev, curr) => ((prev[curr[prop]] = ++prev[curr[prop]] || 1), prev),\n    {}\n  );<\/span>\/\/ example<\/em>\ncountElementsByProp(\n  [\n    { manufacturer: \"audi\", model: \"q8\", year: \"2019\" },\n    { manufacturer: \"audi\", model: \"rs7\", year: \"2020\" },\n    { manufacturer: \"ford\", model: \"mustang\", year: \"2019\" },\n    { manufacturer: \"ford\", model: \"explorer\", year: \"2020\" },\n    { manufacturer: \"bmw\", model: \"x7\", year: \"2020\" },\n  ],\n  \"manufacturer\"\n); \/\/ { 'audi': 2, 'ford': 2, 'bmw': 1 }<\/em><\/span><\/pre>\n
NOTE:<\/strong> This too is a one-liner<\/strong>, but spread across multiple lines for readability.<\/p>\n
That\u2019s all folks!<\/strong><\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"
7 More Killer One-Liners in JavaScript | by Tapajyoti Bose | Apr, 2022 | Medium<\/p>\n
Read more →<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"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,"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":4,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[50],"tags":[],"class_list":["post-9317","post","type-post","status-publish","format-standard","hentry","category-javascript"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p6daft-2qh","jetpack-related-posts":[{"id":1614,"url":"https:\/\/monodes.com\/predaelli\/2016\/06\/01\/javascript-factory-functions-vs-constructor-functions-vs-classes-javascript-scene-medium\/","url_meta":{"origin":9317,"position":0},"title":"JavaScript Factory Functions vs Constructor Functions vs Classes \u2014 JavaScript Scene \u2014 Medium","author":"Paolo Redaelli","date":"2016-06-01","format":"link","excerpt":"https:\/\/medium.com\/javascript-scene\/javascript-factory-functions-vs-constructor-functions-vs-classes-2f22ceddf33e#.13avjf4lk","rel":"","context":"In "Senza categoria"","block_context":{"text":"Senza categoria","link":"https:\/\/monodes.com\/predaelli\/category\/senza-categoria\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":9080,"url":"https:\/\/monodes.com\/predaelli\/2022\/01\/23\/javascript-insanity\/","url_meta":{"origin":9317,"position":1},"title":"Javascript insanity?","author":"Paolo Redaelli","date":"2022-01-23","format":false,"excerpt":"On Facebook\u00a0they write I enjoy JavaScript but this is insanity Welcome to a language that has approximate math as the only math you can use. In fact 7110 \/ 100 * 100 is 7109.99999999 because the first division cannot be exactly represented with with a floating point representation. Sites like\u2026","rel":"","context":"In "Fun"","block_context":{"text":"Fun","link":"https:\/\/monodes.com\/predaelli\/category\/fun\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/monodes.com\/predaelli\/wp-content\/uploads\/sites\/4\/2022\/01\/javascript-insanity.webp?fit=520%2C372&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":9664,"url":"https:\/\/monodes.com\/predaelli\/2022\/09\/27\/15-weird-googling-tricks-99-9-of-developers-dont-know-about-javascript-in-plain-english\/","url_meta":{"origin":9317,"position":2},"title":"15 Weird Googling Tricks 99.9% of Developers Don’t Know\u00a0About | JavaScript in Plain English","author":"Paolo Redaelli","date":"2022-09-27","format":false,"excerpt":"15 Weird Googling Tricks 99.9% of Developers Don't Know\u00a0About | JavaScript in Plain English Well, I know most of them.","rel":"","context":"In "Tricks"","block_context":{"text":"Tricks","link":"https:\/\/monodes.com\/predaelli\/category\/documentations\/tricks\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":5130,"url":"https:\/\/monodes.com\/predaelli\/2019\/01\/15\/intuitive-asynchronous-javascript-edwin-yung-medium\/","url_meta":{"origin":9317,"position":3},"title":"Intuitive Asynchronous Javascript \u2013 Edwin Yung \u2013 Medium","author":"Paolo Redaelli","date":"2019-01-15","format":false,"excerpt":"Escape callback hell! Source: Intuitive Asynchronous Javascript \u2013 Edwin Yung \u2013 Medium \u00a0 Asynchronous Javascript Explained Simply and Intuitively Edwin Yung Dec 29, 2017 Escape callback hell with this\u00a0article! Asynchronous Javascript is difficult to wrangle. The following is my quick attempt to elucidate their inner workings. Before we get started,\u2026","rel":"","context":"In "Documentations"","block_context":{"text":"Documentations","link":"https:\/\/monodes.com\/predaelli\/category\/documentations\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":11779,"url":"https:\/\/monodes.com\/predaelli\/2024\/06\/29\/state-of-javascript-2023\/","url_meta":{"origin":9317,"position":4},"title":"State of JavaScript 2023","author":"Paolo Redaelli","date":"2024-06-29","format":false,"excerpt":"State of JavaScript 2023 The 2023 edition of the annual survey about the latest trends in the JavaScript ecosystem.","rel":"","context":"In "Javascript"","block_context":{"text":"Javascript","link":"https:\/\/monodes.com\/predaelli\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3228,"url":"https:\/\/monodes.com\/predaelli\/2017\/07\/20\/reverse-engineering-one-line-of-javascript\/","url_meta":{"origin":9317,"position":5},"title":"Reverse Engineering One Line of JavaScript","author":"Paolo Redaelli","date":"2017-07-20","format":false,"excerpt":"ASCII animations in 1 line of #JS. #JavaScript is really the assembler of the Web","rel":"","context":"In "Javascript"","block_context":{"text":"Javascript","link":"https:\/\/monodes.com\/predaelli\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/posts\/9317","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/comments?post=9317"}],"version-history":[{"count":0,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/posts\/9317\/revisions"}],"wp:attachment":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/media?parent=9317"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/categories?post=9317"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/tags?post=9317"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}