create account

Less is More - Sexy JavaScript Array Transformations by robertdurst10

View this thread on: hive.blogpeakd.comecency.com
· @robertdurst10 ·
$0.64
Less is More - Sexy JavaScript Array Transformations
<center><h1>Less is More - Sexy JavaScript Array Transformations</h1></center>

For the coding bootcamp I am starting up next week, I've had some prepwork and have been learning about more advanced JavaScript techniques... and wow, what cool stuff! Here is an example where JavaScript can go from plain to sexy with a few sneaky techniques.
***
<h2>Filtering an Array of Data</h2>

**Scenario:** Let's say I have an array of data (we'll use Steem Witnesses and their made up favorite pizza ).

> var witness_array = [ 
&nbsp;&nbsp;&nbsp;{name: "good-karma", favorite_pizza: "hawaiian"},
&nbsp;&nbsp;&nbsp;{name: "gtg", favorite_pizza: "pepperoni"},
&nbsp;&nbsp;&nbsp;{name: "jesta", favorite_pizza: "cheese"},
&nbsp;&nbsp;&nbsp;{name: "timcliff", favorite_pizza: "hawaiian"},
&nbsp;&nbsp;&nbsp;{name: "roelandp", favorite_pizza: "cheese"}
];

Now, let's say I want to filter the array so I only get the array of witnesses who share my taste in pizza. How would I do that?

**Normal solution:** most normal people would say "Rob, why not just loop over the array and filter out the witnesses who have a bad taste in pizza?" So this is what I'd do:

> var filtered_array = [];
for (var i = 0; i < witness_array.length < i ++){
&nbsp;&nbsp;&nbsp; if (witness_array[i].favorite_pizza === "hawaiian") filtered_array.push(witness_array[i]);
}

This would return a filtered array with only good-karma and timcliff. But, this code is ugly and hard to read. If I passed on my code later to a friend, he may have to spend a few seconds trying to figure out what's going on in this loop.

**So, I propose a different approach:** how about we use some of JavaScript's higher order functions. 

Let's use the filter function. The filter function takes an array and filters it by applying a given function to each of it's elements. This function will either return true or false. If the function returns true, the element is added to the new, filtered array. Check it out:

> function likesHawaiian(witness){
&nbsp;&nbsp;&nbsp;return witness.favorite_pizza === "hawaiian";
}
var filtered_array = witness_array.filter(function(witness){
&nbsp;&nbsp;&nbsp; return likesHawaiian(witness);
});

This is a slight improvement over the normal solution, but not much. It is easy to read; you can see that we are applying the likesHawaiian function to each witness and filtering out the witnesses who don't like hawaiian pizza. BUT this is NOT sexy yet!

Let's make this function sexy.

> var filtered_array = witness_array.filter((x) => x.favorite_pizza === "hawaiian");

Wow... we just wrote a more readable, simpler filter function in half as many characters (82 vs. 169). Is it me or did it just get hotter in here?

<center>https://media3.giphy.com/media/26FxypSnWsXS69nTW/giphy.gif</center>

***

If you're more interested in the world of functional programming, I recommend you check out: <a href="https://www.youtube.com/channel/UCO1cgjhGzsSYb1rsB4bFe4Q">Fun Fun Function's YouTube Channel</a>. If it weren't for this guy, I'd still be writing normal JavaScript code.

<h4>I hope you found this article as exciting as I did. Cheers and Steem on!</h4>
👍  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,
properties (23)
authorrobertdurst10
permlinkless-is-more-sexy-javascript-array-transformations
categoryjavascript
json_metadata{"tags":["javascript","dev","functions","life","wow"],"image":["https://media3.giphy.com/media/26FxypSnWsXS69nTW/giphy.gif"],"links":["https://www.youtube.com/channel/UCO1cgjhGzsSYb1rsB4bFe4Q"],"app":"steemit/0.1","format":"markdown"}
created2017-09-03 17:45:03
last_update2017-09-03 17:45:03
depth0
children6
last_payout2017-09-10 17:45:03
cashout_time1969-12-31 23:59:59
total_payout_value0.571 HBD
curator_payout_value0.068 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length3,135
author_reputation5,401,785,748,657
root_title"Less is More - Sexy JavaScript Array Transformations"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd0
post_id13,765,099
net_rshares176,156,215,544
author_curate_reward""
vote details (39)
@cheetah ·
Hi! I am a robot. I just upvoted you! I found similar content that readers might be interested in:
https://www.yahoo.com/beauty/tagged/health
properties (22)
authorcheetah
permlinkcheetah-re-robertdurst10less-is-more-sexy-javascript-array-transformations
categoryjavascript
json_metadata""
created2017-09-03 17:45:24
last_update2017-09-03 17:45:24
depth1
children1
last_payout2017-09-10 17:45:24
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length141
author_reputation942,693,160,055,713
root_title"Less is More - Sexy JavaScript Array Transformations"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id13,765,137
net_rshares0
@robertdurst10 · (edited)
Another garbage bot... @cheetah not even remotely close to a related article, but good try.
properties (22)
authorrobertdurst10
permlinkre-cheetah-cheetah-re-robertdurst10less-is-more-sexy-javascript-array-transformations-20170903t174701863z
categoryjavascript
json_metadata{"tags":["javascript"],"app":"steemit/0.1","users":["cheetah"]}
created2017-09-03 17:47:03
last_update2017-09-03 17:47:18
depth2
children0
last_payout2017-09-10 17:47:03
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length91
author_reputation5,401,785,748,657
root_title"Less is More - Sexy JavaScript Array Transformations"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id13,765,284
net_rshares0
@codero · (edited)
Cool post. 

Array.map() also does wonders :) 

[1,2,4,4].map((item) => {return item + 10; });  //[11, 12, 14, 14] 

Follow me @codero.
properties (22)
authorcodero
permlinkre-robertdurst10-less-is-more-sexy-javascript-array-transformations-20170905t115847590z
categoryjavascript
json_metadata{"tags":["javascript"],"app":"steemit/0.1","users":["codero"]}
created2017-09-05 11:58:45
last_update2017-09-05 12:00:21
depth1
children0
last_payout2017-09-12 11:58:45
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length135
author_reputation15,333,700,816
root_title"Less is More - Sexy JavaScript Array Transformations"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id13,939,740
net_rshares0
@pilcrow ·
$0.08
Yes! I _love_ these functional approaches to handling arrays in JavaScript. It keeps code so much cleaner and there a lot less state variables to keep track of. I'm always on the lookout to refactor some old method in my codebase to something that uses map, filter and/or reduce.
👍  
properties (23)
authorpilcrow
permlinkre-robertdurst10-less-is-more-sexy-javascript-array-transformations-20170904t085559236z
categoryjavascript
json_metadata{"tags":["javascript"],"app":"steemit/0.1"}
created2017-09-04 08:55:54
last_update2017-09-04 08:55:54
depth1
children0
last_payout2017-09-11 08:55:54
cashout_time1969-12-31 23:59:59
total_payout_value0.062 HBD
curator_payout_value0.020 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length279
author_reputation2,531,070,549,481
root_title"Less is More - Sexy JavaScript Array Transformations"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id13,825,734
net_rshares23,844,082,740
author_curate_reward""
vote details (1)
@sacred-agent ·
$0.08
Am so darn excited... can barely contain myself...  >> : ~ ))

But seriously, it's always Good to read Your Posts...

Hope You're having a Great Weekend !!

Cheers Robert !!
👍  
properties (23)
authorsacred-agent
permlinkre-robertdurst10-less-is-more-sexy-javascript-array-transformations-20170903t175319896z
categoryjavascript
json_metadata{"tags":["javascript"],"app":"steemit/0.1"}
created2017-09-03 17:53:21
last_update2017-09-03 17:53:21
depth1
children1
last_payout2017-09-10 17:53:21
cashout_time1969-12-31 23:59:59
total_payout_value0.084 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length173
author_reputation4,833,164,215,661
root_title"Less is More - Sexy JavaScript Array Transformations"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id13,765,817
net_rshares23,486,421,499
author_curate_reward""
vote details (1)
@robertdurst10 ·
$0.04
Thanks!! You too!
👍  
properties (23)
authorrobertdurst10
permlinkre-sacred-agent-re-robertdurst10-less-is-more-sexy-javascript-array-transformations-20170903t175420274z
categoryjavascript
json_metadata{"tags":["javascript"],"app":"steemit/0.1"}
created2017-09-03 17:54:21
last_update2017-09-03 17:54:21
depth2
children0
last_payout2017-09-10 17:54:21
cashout_time1969-12-31 23:59:59
total_payout_value0.028 HBD
curator_payout_value0.009 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length17
author_reputation5,401,785,748,657
root_title"Less is More - Sexy JavaScript Array Transformations"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id13,765,915
net_rshares10,961,431,546
author_curate_reward""
vote details (1)