Map, Reduce, Filter - No loops needed

Hacken 101

30.01.2018

About me

manniL TheAlexLichter
lichter.io

Alexander Lichter

  • 5th semester (Diploma)
  • wrote the jExamUpdates bot
  • full-stack developer
  • in the belief that PHP isn't dead
  • self-employed since 2015

Introduction round

To become a little more familiar with each other:

  • Introduce yourself
  • Tell us your expectation

Agenda

  1. Imperative vs Declarative
  2. Higher order functions
  3. Building blocks
  4. Live coding 🙀🐞
  5. Concluding words

Let's get started!

(Beware - upcoming JavaScript)

JavaScript (re)cap


                let greeting = 'Hey' //Normal string variable
                let arr = [1,2,3,4] //Array
                let dude = {surname: 'Elon', name: 'Musk'} //Object
                console.log(dude.surname) //Elon

                //Normal function
                function sum (a, b) {
                  return a + b
                }

                //Arrow function
                const sum = (a, b) => { return a + b }

                //Even shorter
                const sum = (a, b) => a + b

1. Imperative vs. Declarative

Example scenario

Filter all people that are older than 17 years

Imperative programming

Describes "how to do"

               
                const people = [
                  {name: 'Evan You', age: 27},
                  {name: 'Taylor Otwell', age: 31},
                  {name: 'John Doe', age: 16},
                  {name: 'Ralph Dineen', age: 12}
                ]

                const peopleOlderThan18 = collection => {
                  const results = []
                  for (let i = 0; i < collection.length; i++) {
                    const person = collection[i]

                    if (person.age >= 18) {
                      results.push(person)
                    }
                  }

                  return results
                }

Declarative programming

Describes "what to do"

SQL

               
                   SELECT * FROM people WHERE age >= 18

2. Higher Order Functions

Functions that take other functions as argument

                
                    const twice = (f, v) => f(f(v));
                    const add3 = v => v + 3;

                    twice(add3, 7); // 13

Let's build one!

                
                  const filter = (collection, fun) => {
                    const results = []
                    //Do sth here

                    return results
                  }
                
            
                
                    const filter = (collection, fun) => {
                      const results = []
                      for (let i = 0; i < collection.length; i++) {
                        const person = collection[i]
                        if(fun(person)){
                          results.push(person)
                        }
                      }
                      return results
                    }

Tada! Our own filter function

                
                   const people = [
                      {name: 'Evan You', age: 27},
                      {name: 'Taylor Otwell', age: 31},
                      {name: 'John Doe', age: 16},
                      {name: 'Ralph Dineen', age: 12}
                    ]

                    const is18Plus = person => person.age >= 18

                    const peopleAbove18 = filter(people, is18Plus)

There is also one built into javascript!

               
                    const people = [
                      {name: 'Evan You', age: 27},
                      {name: 'Taylor Otwell', age: 31},
                      {name: 'John Doe', age: 16},
                      {name: 'Ralph Dineen', age: 12}
                    ]

                    const is18Plus = person => person.age >= 18

                    const peopleAbove18 = collection => collection.filter(is18Plus)

3. Building blocks

Filter

Already seen before

Map

               
                const employees = [
                  {name: 'Evan You', mail: 'example@evanyou.me'},
                  {name: 'Taylor Otwell', mail: 'example@totwell.com'},
                  {name: 'John Doe', mail: 'john@doe.com'}
                ]

                const getMails = collection => collection.map(e => e.mail)

                getMails(employees)
                // ["example@evanyou.me", "example@totwell.com", "john@doe.com"]

Each

               
                ["Let's", "log","some","stuff"].forEach(console.log)
  • Only use for actions
  • Do not use for transformation
  • Use map() instead

Don't do that!

               
                const sumAge = (collection) => {
                  let num = 0;

                  collection.forEach((person) => {
                    num += person.age;
                  });

                  return num;
                }

Reduce

               
                const people = [
                      {name: 'Evan You', age: 27},
                      {name: 'Taylor Otwell', age: 31},
                      {name: 'John Doe', age: 16},
                      {name: 'Ralph Dineen', age: 12}
                ]

                const sumUpPersonAge = (acc, person) => acc + person.age
                const sumAge = (collection) => collection.reduce(sumUpPersonAge, 0)

Live coding 🙀🐞

Concluding Words

Some awesome links

Thanks for your attention!

Questions?