Git Product home page Git Product logo

js-advanced-functions-introduction-to-map-and-reduce-lab-nyc04-seng-ft-041920's Introduction

JavaScript Advanced Functions: Introduction to Map and Reduce Lab

Learning Goals

  • Define map-like function
  • Define reduce-like function

Introduction

In this lab, we're going to practice building our own versions of the collection-processing methods that do map-like and reduce-like work. In coding these, we'll sense the non-DRY (Don't Repeat Yourself) quality of writing map- and reduce-based functions and want a better way.

It's also a chance to know that if we ever go to a language that doesn't have awesome collection-processing methods built-in, we could write a replacement function easily.

For the next few lessons, we're only going to talk about collection-processing in the context of Arrays. Many of these ideas can be adapted to working with Objects, though.

Define map

As mentioned in the "Character of Collection Processing," we need to visit each member of a collection. This is common to all collection-processing methods. In the case of map, we're going to produce a new Array after "transforming" or applying "work" to each element. An example would be "multiply each number in this Array by -1, returning a new Array of the input Array "negative-ized."

Naming History "Map" comes from mathematics where it means:

  1. Taking an independent variable
  2. Plugging it into an equation
  3. Getting a result back

Mathematicians would say you're mapping a value in the domain to a value in the range.

If this sounds vaguely familiar, you might have learned it in algebra when learning to graph on the Cartesian coordinate system.

  1. Take a value on the x axis
  2. Plug it into a function like y=mx + b
  3. Get a y value

Hopefully you're having an "Ah-hah!" moment from that and might be considering sending your algebra teachers a thank-you note.

Define reduce

As mentioned in the "Character of Collection Processing," we need to visit each member of a collection. This is common to all collection-processing methods. In the case of reduce, we start with an initial value that we'll call the "memo" or "aggregator." Then we do some "work" involving the element and the memo and that work updates the memo.

This is complex language that describes something we do all the time: make a running total. When we enter a grocery store, our memo is 0.00. As we add items to our cart, each item's value updates the running total (the memo) thus changing it. Or imagine if someone "spells out" a word for you. Your initial memo is an empty String of "", but as someone spells ["C", "a", "t"] you aggregate each letter to the memo and, at the end, its value is "Cat".

This updating an aggregator value and returning it at the end is the essence of reduce.

The reduce function should be given a starting point as an argument.

Naming History This idea of "reduce" comes from lots of places, but we like to think about it coming from the realm of cooking where we make a "reduction" by applying work (aka "heat") until what's left over is the thing we want.

Lab

In this lab, we're going to write several map-like and reduce-like methods and put them in index.js:

map-like

  • mapToNegativize(sourceArray)
  • mapToNoChange(sourceArray)
  • mapToDouble(sourceArray)
  • mapToSquare(sourceArray)

Remember, all map methods return a new Array.

reduce-like

  • reduceToTotal(sourceArray, startingPoint)
  • reduceToAllTrue(sourceArray)
  • reduceToAnyTrue(sourceArray)

Remember, all reduce methods return a value.

Use the learn command to guide you until you get all the tests passing.

Conclusion

In this lab, you've created your own implementation of methods that work like two of the most powerful Enumerable methods: map and reduce. You've also experienced some of the non-DRY code that this requires.

js-advanced-functions-introduction-to-map-and-reduce-lab-nyc04-seng-ft-041920's People

Contributors

thuyanduong-flatiron avatar szib avatar dependabot[bot] avatar maxwellbenton avatar

Watchers

James Cloos avatar Kaitlin Vignali avatar Mohawk Greene avatar Victoria Thevenot avatar Bernard Mordan avatar Otha avatar raza jafri avatar  avatar Joe Cardarelli avatar The Learn Team avatar  avatar Ben Oren avatar Matt avatar Antoin avatar Alex Griffith avatar  avatar Amanda D'Avria avatar  avatar Ahmed avatar Nicole Kroese  avatar Dominique De León avatar  avatar Lisa Jiang avatar Vicki Aubin avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.