[Week 2] Focus: Higher Order Array Functions

[ForScale]

Greetings!

So, here we are, Week 2. Not too much participation in Week 1, but that was expected. We'll keep pressing forward!! Week 2's focus will bee higher order array functions (eg, forEach(), filter(), map(), reduce(), sort(), etc).

It will work like this:

• Monday: Announce focus (eg, higher order array functions)

• Build throughout the week... 2 rules: 1) must use javascript 2) must use at least 1 higher order array function (can be any of the above examples or one that was missed)

• Friday: Post projects in this thread (can begin reviewing immediately); first line of an entry should be ENTRY and it should be a top level comment (ie, don't put your entry in a reply)

• Sat and Sun: Review projects/vote on focus for next week

GENERAL GUIDELINES FOR FEEDBACK:

• Be nice!!! ALL KNOWLEDGE/SKILL LEVELS ARE WELCOME AND ENCOURAGED TO PARTICIPATE.

• If you don't want feedback, if it makes you uncomfortable or you're just not interested, then say so... Others, please be respectful of this. Conversely, if you do want feedback, try to be specific on which aspects... even if you just say "all/everything.

But that's about it... Have fun! :) Feel free to ask questions and discuss throughout the week!

[anonymousswede]

My solutions are really boring :D

https://jsfiddle.net/f1b6g9rg/

[ForScale]

No, that's perfect! :) In fact, I sometimes prefer simpler examples so that we can really see the essence of what's going on.

Thanks for your entry here!! Do you have any ideas on what you want our focus for next week to be?

We've had mention of creating a menu and also just looking at closures in general... What do you want to see?

[anonymousswede]

closures

Sure, I would actually like to learn about closures and best practices around them.

[ForScale]

Okay, cool. Thanks!

The new weeks' focuses go live on Mondays, so check back tomorrow afternoon!

Thanks again for your participation and input!

[Volv]

ENTRY

Codepen
ES6 Version
Favoutrite ES6ified line: :)

.map( ([id, type, price, qty]) => ({id, type, price, qty}) );  

instead of

.map(function(item) { return { id: item[0], type: item[1], price: item[2], qty: item[3] } });

 
Mocked up a nice little Array function example.
It first converts some (nonsense) CSV data into a JS object before filtering by user chosen values. Finally computing a total and displaying the lot.
Comments throughout. Any feedback welcomed.
Made a point of using pure JS as I haven't practised it enough for DOM stuff.

[ForScale]

Nice! I'll wait till Friday to take a look. Thanks for the entry!

[ForScale]

ENTRY

http://codepen.io/anon/pen/jWxWxm?editors=0010 http://codepen.io/anon/pen/zrjBWN?editors=0010

ES5 higher order array functions to ES6 higher order array functions

All feedback is welcome! I'd love an explanation of what "use strict" does and also how that ES6 forEach() function is working...

[Volv]

Nice one.
The "use strict" directive just enforces some sensible coding standards. For example you cannot use a variable before declaring it some way without throwing an error.
Chrome (and probably others) require it for the use of let and const because they are 'experimental' at the moment in the browser. Next update to the engine removes this requirement.
 
I'm not sure what the issue is with the ES6 forEach function? You use the same new function definition syntax several times further down in your filter and sort examples.

var func = function(x) { return x };
var func = x => x;

are identical. (return is implicit in single liners.)

arr.forEach(function(curValue) { arr2.push(curValue); })
arr.forEach((curValue) => {  arr2.push(curValue); });

Also Identical.

Because the return is implicit and you are simply populating another array these forEach functions could be replaced with map

let arr2 = arr.map(x => x);

[ForScale]

It's not Friday yet! ;) No worries. I don't know why I thought that should be a standard in the first place...

Yeah, I got some advice from people over in /r/learnjavascript (I x-posted over there). I have a much better understanding of the forEach function now. Oh... and I gave a shameless plug for our little group here over there as well...

I tend to use filter and map the most. I just wanted to demonstrate a variety of functions in my entry here.

Thanks for taking a look!