Functional Programming

&

Array Methods

The Power of Functions

Functions are "First-class" citizens of JavaScript

They can be:

 

  • assigned to variables
  • passed as arguments to other functions
  • returned from other functions.
  • included in data structures

codepen demo

Function Syntax

JavaScript syntax allows for several different function syntaxes

 

It is important to recognize functions as functions, regardless of the syntax used

codepen demo

First class functions using arrow notation

codepen demo

  • assigned to variables
  • passed as arguments to other functions
  • returned from other functions.
  • included in data structures

What does it mean that JavaScript is a

functional language?

Imperative

Drive North on 1-15

Take Exit to Riverdale

Turn East

Turn on 1000 S

Turn on 4400 W

Drive for 300 feet

 

Declarative

Navigate to 

123 W 4400 S, Riverdale 84405

How do I get to your house?

Imperative

Load the user table into memory

loop through rows

check if name == "jim"

if so return that row

 

Declarative

Select * from Users

Where name == "jim"

How do I get "jim" from the user database

Imperative

Declarative

Codepen

 

Write a function which accepts an array as a parameter, and returns a new array with each number doubled

Array functions

secret awesomeness

33 methods on an array

const nums = [1,2,3];
nums.indexOf(2);

[1,2,3].indexOf(2) //2


Many might be familiar

[ ].indexOf( )

[ ].sort( )

[ ].push( )

[ ].pop( )

[ ].join( )

. . .

The Power 3

map

reduce

filter

 

map

Maps a set of values in an array to another set of values using a function

map

Maps a set of values in an array to another set of values using a function

[1,2,3,4].map(e => e*2);

//[2,4,6,8]

 

(same number of elements)

http://codepen.io/mdjasper/pen/KaVeVK?editors=0010

 

Reduce

Reduces a set of values to a single value using a function which accepts Current, Previous, and Initial values

Sum Function

 

[1,2,3,4].reduce((curr,prev)=>curr+prev, 0); 

//10

 

http://codepen.io/mdjasper/pen/PWZabX?editors=0010

Filter

Array filter accepts a function which returns a boolean. This function is a test. If the value passes the test, then it is returned into the new array

Sum Function

 

[1,2,3,4].filter(e => e>2); 

//[3,4]

 

http://codepen.io/mdjasper/pen/PWZabX?editors=0010

Combining Map, Filter, and Reduce

 

These array functions can be combined to create very powerful declarative statements 

 

http://codepen.io/mdjasper/pen/EZPRGo?editors=0010

Assignment

 

http://codepen.io/mdjasper/pen/RKrJmO?editors=0010

References

  • https://tylermcginnis.com/imperative-vs-declarative-programming/
  • https://medium.com/javascript-scene/master-the-javascript-interview-what-is-functional-programming-7f218c68b3a0#.ufz5f9ys8
  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
  • http://cryto.net/~joepie91/blog/2015/05/04/functional-programming-in-javascript-map-filter-reduce/
Made with Slides.com