{"id":5418,"date":"2020-02-20T15:45:28","date_gmt":"2020-02-20T10:15:28","guid":{"rendered":"https:\/\/pheonixsolutions.com\/blog\/?p=5418"},"modified":"2020-02-20T15:45:31","modified_gmt":"2020-02-20T10:15:31","slug":"arrays-in-javascript","status":"publish","type":"post","link":"https:\/\/pheonixsolutions.com\/blog\/arrays-in-javascript\/","title":{"rendered":"Arrays in Javascript"},"content":{"rendered":"\n

Arrays in Javascript<\/h3>\n\n\n\n

Date: 19\/02\/2020<\/h4>\n\n\n\n

Introduction<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Array in Javascript has some of the in-built methods that are very much handy when manipulating the array contents than whatever operation you can do with forEach or for a loop. If you know how to handle those in-built methods, you can tackle some of the complex logic without complex implementations. I do use them in everyday work. In this tutorial, though I will not all of those in-built methods, will explain the most useful methods. <\/p>\n\n\n\n

Map<\/strong><\/p>\n\n\n\n

Array.prototype.map(currentValue, index, array)<\/code><\/p>\n\n\n\n

let 1dArrray = [1, 2,  3, 4]\n\nlet 2dArray = 1dArray.map((currentValue) => {\n    return [currentValue, currentValue]\n});\n\nconsole.log(2dArray) \/\/ [ [1, 1], [ 2, 2], [3, 3], [4, 4] ]<\/pre>\n\n\n\n
What happens behind is that no matter what work you do inside the parenthesis it will replace the currentValue with the value you return eventually. If you don’t ‘undefined’ will be there. In other words, the transformation will happen with a current array value. 

Note<\/strong>: it will array with same size<\/p>\n\n\n\n
Filter<\/strong><\/p>\n\n\n\n
Array.prototype.filter(currentValue, index, array)<\/code><\/p>\n\n\n\n
let oddEven = [1, 2,  3, 4]\nlet even = oddEven.map((currentValue) => {\n    return currentValue % 2 == 0\n});\nconsole.log(even) \/\/ [ 2, 4]<\/pre>\n\n\n\n
In this filter case, the difference with a map is it will return array value that satisfies the return statement inside the parenthesis.

Note<\/strong>: it may or may not array with the same size depending on what you do. but the returned array will be a new array.<\/p>\n\n\n\n
Reduce<\/strong>:<\/p>\n\n\n\n
Array.prototype.reduce((prev, next),initialValue)<\/code><\/p>\n\n\n\n
let ones = [1, 1, 1, 1, 1, 1]\nlet sum = ones.reduce((prev, next) => {\n  return prev + next;\n}, 100)\n\nconsole.log(sum)  \/\/ 106\n<\/pre>\n\n\n\n
The reduce function is very different from the map or filter. It will one return a Number for your array of numbers. If you didn’t mention initial value, it will take the array value at index 0 as the initial value and index at 1 as the next value for the first iteration. If there is no next value, then iteration will stop as know.<\/p>\n\n\n\n
You can also check out slice, reduceRight, and others too. 

Note<\/strong>: splice considered an impure function. To know more about what is pure or not check here https:\/\/www.freecodecamp.org\/news\/what-is-a-pure-function-in-javascript-acb887375dfe\/<\/a>

For more interesting concepts in javascript, check the below.
https:\/\/javascript.info\/<\/a>
<\/p>\n\n\n\n
Conclusion<\/h4>\n\n\n\n
Thanks for you. If you found it useful share it with others to keep it afloat.<\/p>\n","protected":false},"excerpt":{"rendered":"
Arrays in Javascript Date: 19\/02\/2020 Introduction Array in Javascript has some of the in-built methods that are very much handy […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_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":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1022],"tags":[754,661,739],"class_list":["post-5418","post","type-post","status-publish","format-standard","hentry","category-web-architecture","tag-array","tag-javascript","tag-programming","psol-cat-web-architecture"],"jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/phn2x7-1po","jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/5418","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=5418"}],"version-history":[{"count":0,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/5418\/revisions"}],"wp:attachment":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=5418"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=5418"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=5418"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}