Introduction to Functional Programming

with JavaScript

Objectives

• describe what functional programming is
• create a functional function
• use provided array methods like map, filter, and forEach

What Does Functional Mean?

programming with functions, right?

What Does Functional Really Mean?

What Does Functional Really Really Mean?

• A different paradigm of programming than object oriented
• No changes to state allowed
• The function is completely self reliant

Simple Filtering

The Object Oriented way

var evens = [];

function filterEvens(arr){
    for(var i = 0; i < arr.length; i++){
        if(arr[i] % 2 === 0) evens.push(arr[i]);
    }
}

filterEvens([1, 2, 3, 4]);

var evens = [1, 2, 3, 4].filter(function(num){
    return num % 2 === 0;
});

The Functional way

Try Creating Your Own Functional Function?

Array Methods

• forEach
• map
• filter

But First Lets Recreate ForEach

I have seen this on an interview!

Create a function that takes in an array and a callback function. For each item in the array the callback function will be executed with the following parameters

• current item value
• current index
• the entire array

var arr = [1, 2, 3, 4];

function forEach(arr, cb){
    // your code here
}

forEach(arr, function(num, i, arr){
    console.log(num);
});

ForEach

Another way to iterate over arrays!

var arr = [1, 2, 3, 4];

arr.forEach(function(item, i, arr){
    console.log('item: ' + item);
    console.log('i: ' + i);
    console.log('arr: ' + arr);
});

But Now Lets Recreate Map

I have also seen this on an interview!

Create a function that takes in an array and a callback function. For each item in the array the callback function will be executed with the returned value creating a new element in an array.

• current item value
• current index
• the entire array

var arr = [1, 2, 3, 4];

function map(arr, cb){
    // your code here
}

var newArray = map(arr, function(num, i, arr){
    return num * 2;
});

console.log(newArray); // [2, 4, 6, 8]

Map

A great way to manipulate arrays

var arr = ['bob', 'suzie', 'dave', 'lauren'];

var newArr = arr.map(function(item, i, arr){
    return {name: item};
});

console.log(newArr);

But Again Lets Recreate Filter

Again, another interview question!

Create a function that takes in an array and a callback function. For each item in the array the callback function will be executed with the following parameters

• current item value
• current index
• the entire array

var arr = [1, 2, 3, 4];

function filter(arr, cb){
    // your code here
}

var newArr = filter(arr, function(num, i, arr){
    return num % 2 === 0;
});

console.log(newArr); // [2, 4]

Filter

We don't like part of that array anyways!

var arr = [1, 2, 3, 4];

var newArr = arr.filter(function(item, i, arr){
    return item % 2 === 0;
});

console.log(newArr);

Questions