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

Declarative

Imperative

Declarative

Imperative

Declarative

Codepen

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

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