{"id":4103,"date":"2019-03-14T15:07:13","date_gmt":"2019-03-14T09:37:13","guid":{"rendered":"https:\/\/code4developers.com\/?p=4103"},"modified":"2019-03-10T23:51:08","modified_gmt":"2019-03-10T18:21:08","slug":"top-array-hacks","status":"publish","type":"post","link":"https:\/\/code4developers.com\/top-array-hacks\/","title":{"rendered":"Top Array Hacks"},"content":{"rendered":"<p>Arrays are everywhere in JavaScript and with the new\u00a0<a href=\"https:\/\/developer.mozilla.org\/en\/docs\/Web\/JavaScript\/Reference\/Operators\/Spread_operator\" target=\"_blank\" rel=\"noopener\">spread operators<\/a>\u00a0introduced in ECMAScript 6, you can do awesome things with them. In this post I will show you 3 useful tricks you can use when programming.<!--more--><\/p>\n<h3 id=\"1-iterating-through-an-emptyarray\"><span id=\"1-iterating-through-an-empty-array\">1. Iterating through an empty\u00a0array<\/span><\/h3>\n<p>JavaScript arrays are sparse in nature in that there are a lot of holes in them. Try creating an array using the Array\u2019s constructor and you will see what I mean.<\/p>\n<pre class=\"theme:shell-default lang:js decode:true\">&gt; const arr = new Array(4);\r\n[undefined, undefined, undefined, undefined]<\/pre>\n<p>You may find that iterating over a sparse array to apply a certain transformation is hard.<\/p>\n<pre class=\"theme:shell-default lang:js decode:true \">&gt; const arr = new Array(4);\r\n&gt; arr.map((elem, index) =&gt; index);\r\n[undefined, undefined, undefined, undefined]<\/pre>\n<p>To solve this, you can use\u00a0<code class=\"highlighter-rouge\">Array.apply<\/code>\u00a0when creating the array.<\/p>\n<pre class=\"theme:shell-default lang:js decode:true \">&gt; const arr = Array.apply(null, new Array(4));\r\n&gt; arr.map((elem, index) =&gt; index);\r\n[0, 1, 2, 3]<\/pre>\n<h3 id=\"2-passing-an-empty-parameter-to-amethod\"><span id=\"2-passing-an-empty-parameter-to-a-method\">2. Passing an empty parameter to a\u00a0method<\/span><\/h3>\n<p>If you want to call a method and ignore one of its parameters, then JavaScript will complain if you keep it empty.<\/p>\n<pre class=\"theme:shell-default lang:js decode:true \">&gt; method('parameter1', , 'parameter3');\r\nUncaught SyntaxError: Unexpected token ,<\/pre>\n<p>A workaround that people usually resort to is to pass either\u00a0<code class=\"highlighter-rouge\">null<\/code>\u00a0or\u00a0<code class=\"highlighter-rouge\">undefined<\/code>.<\/p>\n<pre class=\"theme:shell-default lang:js decode:true \">&gt; method('parameter1', null, 'parameter3') \/\/ or\r\n&gt; method('parameter1', undefined, 'parameter3');<\/pre>\n<p>I personally don\u2019t like using\u00a0<code class=\"highlighter-rouge\">null<\/code>\u00a0since JavaScript treats it as an object and that\u2019s just weird. With the introduction of spread operators in ES6, there is a neater way of passing empty parameters to a method. As previously mentioned, arrays are sparse in nature and so passing empty values to it is totally okay. We\u2019ll use this to our advantage.<\/p>\n<pre class=\"theme:shell-default lang:js decode:true \">&gt; method(...['parameter1', , 'parameter3']); \/\/ works!<\/pre>\n<h3 id=\"3-unique-arrayvalues\"><span id=\"3-unique-array-values\">3. Unique array\u00a0values<\/span><\/h3>\n<p>I always wonder why the Array constructor does not have a designated method to facilitate the use of unique array values. Spread operators are here for the rescue. Use spread operators with the\u00a0<code class=\"highlighter-rouge\">Set<\/code>constructor to generate unique array values.<\/p>\n<pre class=\"theme:shell-default lang:js decode:true \">&gt; const arr = [...new Set([1, 2, 3, 3])];\r\n[1, 2, 3]<\/pre>\n<p>Let me know in comment if you have any other ideas or hacks.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Arrays are everywhere in JavaScript and with the new\u00a0spread operators\u00a0introduced in ECMAScript 6, you can do awesome things with them. In this post I will show you 3 useful tricks&hellip;<\/p>\n","protected":false},"author":7,"featured_media":3127,"comment_status":"open","ping_status":"closed","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":[280,279,22,66],"powerkit_post_featured":[],"class_list":{"0":"post-4103","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript","8":"tag-array","9":"tag-array-hacks","10":"tag-javascript","11":"tag-javascript-iteration-of-array"},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8NAi4-14b","jetpack-related-posts":[{"id":3152,"url":"https:\/\/code4developers.com\/slice-splice-one-use\/","url_meta":{"origin":4103,"position":0},"title":"Slice or Splice Which one to Use?","author":"Arif Khoja","date":"December 5, 2017","format":false,"excerpt":"In this article we will try to get a clear idea about Slice or Splice which one is better to use... Slice Slice is a method on the Array Prototype that you can use to extract a section of a array. Let\u2019s say you want to remove the first two\u2026","rel":"","context":"In &quot;JavaScript&quot;","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":3311,"url":"https:\/\/code4developers.com\/default-parameter-in-a-javascript-function\/","url_meta":{"origin":4103,"position":1},"title":"Default Parameter in JavaScript function","author":"Yatendrasinh Joddha","date":"March 17, 2018","format":false,"excerpt":"In any programming language we often require having default parameter or default value for the parameter in a function. JavaScript allow us to initialize parameter a default value. If you are not passing any value to the parameter, then the default value of the parameter will be undefined. Let's consider\u2026","rel":"","context":"In &quot;JavaScript&quot;","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":3321,"url":"https:\/\/code4developers.com\/spread-syntax-in-javascript\/","url_meta":{"origin":4103,"position":2},"title":"Spread syntax (three dots) in JavaScript","author":"Yatendrasinh Joddha","date":"March 21, 2018","format":false,"excerpt":"Spread syntax which is used by typing three dots (...) in JavaScript. It allows an array expression or string or anything which can be iterating to be expanded in places where zero or more arguments for function calls\u00a0or elements for array are expected. It can also be used for an\u2026","rel":"","context":"In &quot;JavaScript&quot;","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":2610,"url":"https:\/\/code4developers.com\/semicolon-in-javascript\/","url_meta":{"origin":4103,"position":3},"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 &quot;JavaScript&quot;","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":3106,"url":"https:\/\/code4developers.com\/javascript-template-literals\/","url_meta":{"origin":4103,"position":4},"title":"Javascript: What Are Template Literals?","author":"Arif Khoja","date":"September 30, 2017","format":false,"excerpt":"ES6 introduced two types of literals: Template Literals and Tagged Template Literals to tag Template Literals. In this post, we cover both of them in depth! In ES6, two types of literals were introduced: Template Literals for string concatenation and expression embedding in a string Tagged Template Literals to tag\u2026","rel":"","context":"In &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/code4developers.com\/category\/javascript\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/thumb-1-e1498942297714.png?fit=240%2C269&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3143,"url":"https:\/\/code4developers.com\/looping-without-loops\/","url_meta":{"origin":4103,"position":5},"title":"Looping without loops.","author":"Arif Khoja","date":"November 29, 2017","format":false,"excerpt":"As a coder or an aspiring one you have probably experienced many moments where all the smokes blows away and you understand something much clearer. One of these moments for me was when I was introduced to recursion. Probably, while learning Scheme or Haskell. The basic idea is that a\u2026","rel":"","context":"In &quot;JavaScript&quot;","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\/4103","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=4103"}],"version-history":[{"count":5,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/4103\/revisions"}],"predecessor-version":[{"id":4108,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/4103\/revisions\/4108"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media\/3127"}],"wp:attachment":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media?parent=4103"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/categories?post=4103"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/tags?post=4103"},{"taxonomy":"powerkit_post_featured","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/powerkit_post_featured?post=4103"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}