{"id":205,"date":"2019-12-15T07:19:34","date_gmt":"2019-12-15T07:19:34","guid":{"rendered":"https:\/\/www.samarthya.me\/wps\/?p=205"},"modified":"2019-12-15T07:19:34","modified_gmt":"2019-12-15T07:19:34","slug":"js-reduce-and-foreach","status":"publish","type":"post","link":"https:\/\/blog.samarthya.me\/wps\/2019\/12\/15\/js-reduce-and-foreach\/","title":{"rendered":"JS Reduce and forEach"},"content":{"rendered":"

\"Matrix\"<\/p>\n

I have been polishing my Go and JS skills recently and today learned about how to use the reduce<\/a>() and forEach<\/a>() method. The problem I was trying to solve was return columns and rows from an input string.<\/p>\n

A new line separator is used to define a new row and for each element is separated by ‘ ‘.<\/p><\/blockquote>\n

I started off with a basic class (code below)<\/p>\n

\n
export class Matrix {\r\n  constructor(matrix) {}\r\n}<\/pre>\n
The matrix is the input string that we shall be using to populate rows<\/strong> and columns.<\/strong><\/p>\n
Parsing<\/h2>\n
Rows<\/h3>\n
\n
this.rows = matrix.split('\\n')\r\n      .map(row => row.split(' ')\r\n      .map(r => +r));<\/pre>\n
Parsing rows was relatively simple, I used the map method to find individual element and convert it to a number. (Numeric representation), if numeric is not required a simple split should do.<\/p>\n
Columns<\/h3>\n
\n
1.  this.columns = this.rows.reduce(\r\n2.  (columns, row, i) => {\r\n3.   row.forEach((current, j) => {\r\n4.   if (i===0) {\r\n5.    columns.push([row[j]]);\r\n6.   } else {\r\n7.    columns[j].push(current);\r\n8.   }\r\n9.  });\r\n10.  return columns;\r\n11. }, []);<\/pre>\n
In row 1. I simply invoked reduce()<\/a> method on rows which we parsed in the step above.<\/p>\n
The reducer<\/strong> function takes four arguments:<\/p>\n
    \n
  1. Accumulator (acc)<\/li>\n
  2. Current Value (cur)<\/li>\n
  3. Current Index (idx)<\/li>\n
  4. Source Array (src)<\/li>\n<\/ol>\n
    Your reducer<\/strong> function’s returned value is assigned to the accumulator, whose value is remembered across each iteration throughout the array and ultimately becomes the final, single resulting value.<\/p>\n
    (columns, row, i)<\/pre>\n<\/div>\n
    We intent to return the columns which shall have the individual column read from the array of rows. Each ‘row’ will be representation of one such row [ ] and ‘i’ is the index.<\/p>\n<\/div>\n
    If there are 3 rows that were read. e.g. [0,1,2],[3,4,5],[5,6,7] the i will iterate through 0..2<\/pre>\n
    For each row that we get in step 2, we will iterate through the individual elements within that row to be added to column array (forEach<\/a>).<\/p>\n
    forEach is taking two arguments<\/p>\n
    (current, j)\r\nCurrent -> Identifies the value being processed.\r\nj       -> Identifies the index.<\/pre>\n
    The processing is done between line 4 – 8.<\/p>\n
    So if we consider an example<\/p>\n
        0 1 2\r\n--------------\r\n0 | 1 2 3 \\n\r\n1 | 4 5 6 \\n\r\n2 | 7 8 9 \\n<\/pre>\n
    So the rows get populated as<\/p>\n
    row = [\r\n    rows[0] = [1, 2, 3]\r\n    rows[1] = [4, 5, 6]\r\n    rows[2] = [7, 8, 9]\r\n]<\/pre>\n
    So, the processing of line 4 – 8<\/p>\n
    row +> 1, 2 ,3 & i =0\r\nThe first iteration starts at\r\ncurrent = 1, j = 0\r\n\r\nLine 4. since i = 0\r\ncolumns[0] = 1\r\nThe loop repeats\r\ncolumns[1] = 2\r\nThe loop repeats\r\ncolumns [2] = 3\r\nThe outer loop repeats\r\nrow +> 4, 5 ,6 & i =1\r\ncurrent = 4, j = 0\r\n\r\n& the same way the logic repeats.<\/pre>\n
    Finally you will have columns<\/strong><\/em><\/p>\n
    columns = [[1,4,7], [2, 5, 8], [3, 6, 9]]<\/pre>\n
    – THE – END –<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
    I have been polishing my Go and JS skills recently and today learned about how to use the reduce() and forEach() method. The problem I was trying to solve was return columns and rows from an input string. A new line separator is used to define a new row and for each element is separated […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[1],"tags":[22,19],"class_list":["post-205","post","type-post","status-publish","format-standard","hentry","category-others","tag-array","tag-js"],"_links":{"self":[{"href":"https:\/\/blog.samarthya.me\/wps\/wp-json\/wp\/v2\/posts\/205","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.samarthya.me\/wps\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.samarthya.me\/wps\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.samarthya.me\/wps\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.samarthya.me\/wps\/wp-json\/wp\/v2\/comments?post=205"}],"version-history":[{"count":0,"href":"https:\/\/blog.samarthya.me\/wps\/wp-json\/wp\/v2\/posts\/205\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.samarthya.me\/wps\/wp-json\/wp\/v2\/media?parent=205"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.samarthya.me\/wps\/wp-json\/wp\/v2\/categories?post=205"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.samarthya.me\/wps\/wp-json\/wp\/v2\/tags?post=205"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}