<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 = [ {name: "good-karma", favorite_pizza: "hawaiian"}, {name: "gtg", favorite_pizza: "pepperoni"}, {name: "jesta", favorite_pizza: "cheese"}, {name: "timcliff", favorite_pizza: "hawaiian"}, {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 ++){ 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){ return witness.favorite_pizza === "hawaiian"; } var filtered_array = witness_array.filter(function(witness){ 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>
author | robertdurst10 |
---|---|
permlink | less-is-more-sexy-javascript-array-transformations |
category | javascript |
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"} |
created | 2017-09-03 17:45:03 |
last_update | 2017-09-03 17:45:03 |
depth | 0 |
children | 6 |
last_payout | 2017-09-10 17:45:03 |
cashout_time | 1969-12-31 23:59:59 |
total_payout_value | 0.571 HBD |
curator_payout_value | 0.068 HBD |
pending_payout_value | 0.000 HBD |
promoted | 0.000 HBD |
body_length | 3,135 |
author_reputation | 5,401,785,748,657 |
root_title | "Less is More - Sexy JavaScript Array Transformations" |
beneficiaries | [] |
max_accepted_payout | 1,000,000.000 HBD |
percent_hbd | 0 |
post_id | 13,765,099 |
net_rshares | 176,156,215,544 |
author_curate_reward | "" |
voter | weight | wgt% | rshares | pct | time |
---|---|---|---|---|---|
cheetah | 0 | 706,264,238 | 0.5% | ||
mada | 0 | 62,064,207,449 | 100% | ||
rasl | 0 | 126,398,634 | 100% | ||
morlurgas | 0 | 123,713,970 | 100% | ||
robertdurst10 | 0 | 23,844,082,740 | 100% | ||
steven-patrick | 0 | 0 | 100% | ||
solomka | 0 | 429,963,071 | 100% | ||
karkusha | 0 | 433,044,408 | 100% | ||
immort | 0 | 430,403,398 | 100% | ||
jowel | 0 | 441,245,445 | 100% | ||
lewa | 0 | 433,860,360 | 100% | ||
anari | 0 | 429,018,146 | 100% | ||
charlik | 0 | 426,822,460 | 100% | ||
rudifoller | 0 | 421,559,286 | 100% | ||
mindst | 0 | 425,925,850 | 100% | ||
ruiberc | 0 | 435,127,490 | 100% | ||
sacred-agent | 0 | 19,729,077,476 | 18% | ||
syrokplavlenyi | 0 | 491,477,821 | 100% | ||
kwgof2gpkp8 | 0 | 508,716,745 | 100% | ||
nirewwe | 0 | 495,310,758 | 100% | ||
pilcrow | 0 | 25,050,707,545 | 50% | ||
msp-lovebot | 0 | 27,021,101,567 | 10% | ||
fshsuhs4627 | 0 | 496,441,329 | 100% | ||
kost | 0 | 458,444,800 | 100% | ||
aniasq | 0 | 497,399,966 | 100% | ||
mosinpf | 0 | 496,738,141 | 100% | ||
olpite | 0 | 499,410,812 | 100% | ||
ditya | 0 | 499,577,143 | 100% | ||
palasest | 0 | 502,479,344 | 100% | ||
ijenirina | 0 | 513,646,025 | 100% | ||
saiveil | 0 | 924,185,430 | 100% | ||
rostichin | 0 | 918,009,355 | 100% | ||
jbya | 0 | 930,421,055 | 100% | ||
chiantia | 0 | 1,173,578,078 | 100% | ||
nonachujkov | 0 | 940,111,868 | 100% | ||
trubcev | 0 | 969,127,544 | 100% | ||
bodar | 0 | 928,505,408 | 100% | ||
harlam | 0 | 940,110,389 | 100% | ||
itsmikechu | 0 | 0 | 100% |
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
author | cheetah |
---|---|
permlink | cheetah-re-robertdurst10less-is-more-sexy-javascript-array-transformations |
category | javascript |
json_metadata | "" |
created | 2017-09-03 17:45:24 |
last_update | 2017-09-03 17:45:24 |
depth | 1 |
children | 1 |
last_payout | 2017-09-10 17:45:24 |
cashout_time | 1969-12-31 23:59:59 |
total_payout_value | 0.000 HBD |
curator_payout_value | 0.000 HBD |
pending_payout_value | 0.000 HBD |
promoted | 0.000 HBD |
body_length | 141 |
author_reputation | 942,693,160,055,713 |
root_title | "Less is More - Sexy JavaScript Array Transformations" |
beneficiaries | [] |
max_accepted_payout | 1,000,000.000 HBD |
percent_hbd | 10,000 |
post_id | 13,765,137 |
net_rshares | 0 |
Another garbage bot... @cheetah not even remotely close to a related article, but good try.
author | robertdurst10 |
---|---|
permlink | re-cheetah-cheetah-re-robertdurst10less-is-more-sexy-javascript-array-transformations-20170903t174701863z |
category | javascript |
json_metadata | {"tags":["javascript"],"app":"steemit/0.1","users":["cheetah"]} |
created | 2017-09-03 17:47:03 |
last_update | 2017-09-03 17:47:18 |
depth | 2 |
children | 0 |
last_payout | 2017-09-10 17:47:03 |
cashout_time | 1969-12-31 23:59:59 |
total_payout_value | 0.000 HBD |
curator_payout_value | 0.000 HBD |
pending_payout_value | 0.000 HBD |
promoted | 0.000 HBD |
body_length | 91 |
author_reputation | 5,401,785,748,657 |
root_title | "Less is More - Sexy JavaScript Array Transformations" |
beneficiaries | [] |
max_accepted_payout | 1,000,000.000 HBD |
percent_hbd | 10,000 |
post_id | 13,765,284 |
net_rshares | 0 |
Cool post. Array.map() also does wonders :) [1,2,4,4].map((item) => {return item + 10; }); //[11, 12, 14, 14] Follow me @codero.
author | codero |
---|---|
permlink | re-robertdurst10-less-is-more-sexy-javascript-array-transformations-20170905t115847590z |
category | javascript |
json_metadata | {"tags":["javascript"],"app":"steemit/0.1","users":["codero"]} |
created | 2017-09-05 11:58:45 |
last_update | 2017-09-05 12:00:21 |
depth | 1 |
children | 0 |
last_payout | 2017-09-12 11:58:45 |
cashout_time | 1969-12-31 23:59:59 |
total_payout_value | 0.000 HBD |
curator_payout_value | 0.000 HBD |
pending_payout_value | 0.000 HBD |
promoted | 0.000 HBD |
body_length | 135 |
author_reputation | 15,333,700,816 |
root_title | "Less is More - Sexy JavaScript Array Transformations" |
beneficiaries | [] |
max_accepted_payout | 1,000,000.000 HBD |
percent_hbd | 10,000 |
post_id | 13,939,740 |
net_rshares | 0 |
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.
author | pilcrow |
---|---|
permlink | re-robertdurst10-less-is-more-sexy-javascript-array-transformations-20170904t085559236z |
category | javascript |
json_metadata | {"tags":["javascript"],"app":"steemit/0.1"} |
created | 2017-09-04 08:55:54 |
last_update | 2017-09-04 08:55:54 |
depth | 1 |
children | 0 |
last_payout | 2017-09-11 08:55:54 |
cashout_time | 1969-12-31 23:59:59 |
total_payout_value | 0.062 HBD |
curator_payout_value | 0.020 HBD |
pending_payout_value | 0.000 HBD |
promoted | 0.000 HBD |
body_length | 279 |
author_reputation | 2,531,070,549,481 |
root_title | "Less is More - Sexy JavaScript Array Transformations" |
beneficiaries | [] |
max_accepted_payout | 1,000,000.000 HBD |
percent_hbd | 10,000 |
post_id | 13,825,734 |
net_rshares | 23,844,082,740 |
author_curate_reward | "" |
voter | weight | wgt% | rshares | pct | time |
---|---|---|---|---|---|
robertdurst10 | 0 | 23,844,082,740 | 100% |
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 !!
author | sacred-agent |
---|---|
permlink | re-robertdurst10-less-is-more-sexy-javascript-array-transformations-20170903t175319896z |
category | javascript |
json_metadata | {"tags":["javascript"],"app":"steemit/0.1"} |
created | 2017-09-03 17:53:21 |
last_update | 2017-09-03 17:53:21 |
depth | 1 |
children | 1 |
last_payout | 2017-09-10 17:53:21 |
cashout_time | 1969-12-31 23:59:59 |
total_payout_value | 0.084 HBD |
curator_payout_value | 0.000 HBD |
pending_payout_value | 0.000 HBD |
promoted | 0.000 HBD |
body_length | 173 |
author_reputation | 4,833,164,215,661 |
root_title | "Less is More - Sexy JavaScript Array Transformations" |
beneficiaries | [] |
max_accepted_payout | 1,000,000.000 HBD |
percent_hbd | 10,000 |
post_id | 13,765,817 |
net_rshares | 23,486,421,499 |
author_curate_reward | "" |
voter | weight | wgt% | rshares | pct | time |
---|---|---|---|---|---|
robertdurst10 | 0 | 23,486,421,499 | 100% |
Thanks!! You too!
author | robertdurst10 |
---|---|
permlink | re-sacred-agent-re-robertdurst10-less-is-more-sexy-javascript-array-transformations-20170903t175420274z |
category | javascript |
json_metadata | {"tags":["javascript"],"app":"steemit/0.1"} |
created | 2017-09-03 17:54:21 |
last_update | 2017-09-03 17:54:21 |
depth | 2 |
children | 0 |
last_payout | 2017-09-10 17:54:21 |
cashout_time | 1969-12-31 23:59:59 |
total_payout_value | 0.028 HBD |
curator_payout_value | 0.009 HBD |
pending_payout_value | 0.000 HBD |
promoted | 0.000 HBD |
body_length | 17 |
author_reputation | 5,401,785,748,657 |
root_title | "Less is More - Sexy JavaScript Array Transformations" |
beneficiaries | [] |
max_accepted_payout | 1,000,000.000 HBD |
percent_hbd | 10,000 |
post_id | 13,765,915 |
net_rshares | 10,961,431,546 |
author_curate_reward | "" |
voter | weight | wgt% | rshares | pct | time |
---|---|---|---|---|---|
sacred-agent | 0 | 10,961,431,546 | 10% |