Code Challenge #11: JavaScript Functional Programming

Celý článek

Previously on the code challenge #10, we delved into lazy loading images for performance, you can check out the challenge post and solution.

This week on the code challenge, we'll be re-visiting the basics of JavaScript with Arrays. Arrays are like containers which hold various data types.

While these containers are useful for holding various data types it is important to understand the manipulation of arrays to analyze and utilize withheld data. This is done with the use of specific functions which are actionable on Arrays called Methods.

The Challenge

This challenge is quite unique such that we will be using some really useful built-in array methods to manipulate the provided arrays. Three arrays are provided and each comes with 3 problem parts to be solved. In the first array:

• Part 1 - Find all users older than 24
• Part 2 - Find the total age of all users
• Part 3 - List all female coders

In the second array:

• Part 1 - List all users in the US in ascending order
• Part 2 - Sort all users by age
• Part 3 - List all female coders

In the third array:

• Part 1 - Find the total age of male coders under 25
• Part 2 - List all male coders over 30
• Part 3 - Find the total age of everyone in texasss, newieyork and vegzas combined.

Complete these problems using any array method in the best way possible. Useful methods include:

• .map()
• .filter()
• .find()
• .replace()
• .reduce()
• forEach()

Note that you can write your results to the DOM or even log to console, whichever is fine by you.

Requirement

This challenge can be completed by using any technique or method. However, try to completely solve each part in as little lines as possible using functions.

Goals for this Challenge

On completion of this challenge you should be able to:

• Learn basic functional programming concepts and immutability
• Utilize built-in array methods to sort, filter and traverse arrays.
• Choose the right methods and alternatives to analyzing data in an array.

Bonus

In a bid to make this more fun and challenging, a bonus will be to complete this the challenge parts without the aid of built-in methods and functions.

Resources

To get started quickly, a base codepen containing required arrays is provided. These arrays to be utilized contain objects with data in key-value pairs.

Fork this base codepen to get started

This previous Scotch post could be useful to you in solving this challenge.

Community

On completion of the challenge, if you wish to showcase your work and receive reviews, kindly,

• Post it on Twitter using the hashtag #scotchchallenge and be sure to tag us to see it!
• Build your writing skills by writing about how you solved it and we'll be glad to feature it in our community posts!
• Post it in the comment section under this post.
• Post it on the #codechallenge Slack channel in the Scotch Slack.
• Join the chatter on Spectrum and showcase your solution.

Solution

The solution to this challenge will be released on Saturday. Happy coding!.