<info 340/>

Functional JavaScript

Joel Ross
Spring 2020

Functions

function sayHello(name){
    return "Hello, "+name;
}

let msg = sayHello("Joel");
console.log(msg); //"Hello Joel"

FUNCTIONS

 

ARE ALSO

VALUES

Functions are Values

Functions are a type of value (just like number, string, array).
Anywhere you can put an Array, you can put a Function.

They can be assigned as values to other variables.

//assign array to variable
let myArray = ['a','b','c'];



typeof myArray //=> 'object'
let other = myArray;

//access value in other
console.log( other[1] ); //print 'b'
//assign function to variable
function sayHello(name) { 
   console.log("Hello, "+name);
}

typeof sayHello // 'function'
let other = sayHello;

//prints "Hello, everyone"
other('everyone');

special array ability

special function ability

Anonymous Value

let array = [1,2,3]; //named variable (not anonymous)
console.log(array); //pass in named var

console.log( [4,5,6] ); //pass in anonymous value

An anonymous value is a value to which we don't assign a name/label (variable). Also a literal value.

//named function
function sayHello(person){ 
   console.log("Hello, "+person); 
}

//named function
function sayHello(person){ 
   console.log("Hello, "+person); 
}

//anonymous function (no name!) - technically invalid
function(person) {
   console.log("Hello, "+person);
}

//named function
function sayHello(person){ 
   console.log("Hello, "+person); 
}

//anonymous function (no name!) - technically invalid
function(person) {
   console.log("Hello, "+person);
}

//anonymous function (value) assigned to variable
let sayHello = function(person) {
   console.log("Hello, "+person);
}

So they can be assigned to properties (values) in Objects. 

let obj = {};
let myArray = ['a','b','c'];



//assign array to object
obj.array = myArray;

//access with dot notation
obj.array[0]; //gets 'a'


//assign literal (anonymous value)
obj.otherArray = [1,2,3]
let obj = {}
function sayHello(name) { 
   console.log("Hello, "+name);
}

//assign function to object
let obj.sayHi = sayHello;

//access with dot notation
obj.sayHi('all'); //prints "Hello all"


//assign literal (anonymous value)
obj.otherFunc = function() { 
    console.log("Hello world!");
}

this is how you make
"non-static" methods

Functions are Values

Functions are Values

So they can be passed as parameters to other functions!

let myArray = ['a','b','c'];



//takes array as an argument
//will access the arg array
//with an index of 1
function doOneth(array) {
  console.log( array[1] );
}



//call function and pass value
doOneth(myArray); //prints 'b'


//pass literal (anonymous value)
doOneth([1,2,3]) //prints '2'


function sayHello(name) { 
   console.log("Hello, "+name);
}

//takes ANOTHER FUNCTION as an arg
//will call the arg function, 
//passing it "world"
function doWorld(aFunction) {
   aFunction("world");
}



//call function and pass value
doWorld(sayHello); //prints "Hello world"


//pass literal (anonymous value)
doWorld(function(msg) {
  console.log("you said: "+msg);
}); //prints "you said: world"

/* note where parens and braces close! */

array ability with hard-coded value

function ability with hard-coded value

Passing vs. Calling

When you pass a function as an argument, do not put parentheses after it. Putting parentheses calls the function (executes it), and replaces that expression with the returned value.

function sayHello() { //version with no args
    return "Hello";
}

//print out the function
console.log( sayHello ); // logs "[Function: sayHello]" 
                         // the function

//resolve the expression, THEN print that out
console.log( sayHello() ); // logs "Hello", which is 
                            // what `sayHello()` resolves to.

Callback Functions

A function that is passed into another function for the receiver to "call back to" and execute later. 

//takes in TWO callback functions!
function doTogether(firstCallback, secondCallback){
    firstCallback();  //execute the first function
    secondCallback();  //execute the second function
    console.log('at the "same time"!');
}

function patHead() {
    console.log('pat your head');
}

function rubBelly() {
    console.log('rub your belly');
}

//pass in the callbacks to do them together
doTogether(patHead, rubBelly);

no parens, not calling now (just passing the variable!)

Array Iteration

To iterate through each item in an array you can, use
the .forEach() function and pass it a callback to execute on each array item.

//Iterate through an array
let array = ['a','b','c'];
let printItem = function(item) {
   console.log(item);
}

array.forEach(printItem);

//more common to use anonymous function
array.forEach(function(item) {
   console.log(item);
});

callback

Mapping

function square(n) { //a function that squares a number
    return n*n;
}

let numbers = [1,2,3,4,5];  //an initial array

//transform the numbers using the square() function
let squares = []; //the transformed array
for(let i=0; i<numbers.length; i++) {
   let transformed = square(numbers[i]);
   squares.push(transformed); //add transformed to array
}
console.log(squares); // [1, 4, 9, 16, 25]

The .map() function applies the given callback function to each element in an array and returns a new array of the transformed values.

function square(n) { //a function that squares a number
    return n*n;
}

let numbers = [1,2,3,4,5];  //an initial array

//map the numbers using the `square` transforming function
let squares = numbers.map(square);




console.log(squares); // [1, 4, 9, 16, 25]




let numbers = [1,2,3,4,5];  //an initial array

//map the numbers using anonymous callback function
let squares = numbers.map(function(n) {
    return n*n;
})


console.log(squares); // [1, 4, 9, 16, 25]

Filtering

The .filter() function applies the given callback function to each element in an array and returns a new array containing only those elements for which the callback returns true.

let array = [3,1,4,2,5];

let isACrowd = array.filter(function(n) { 
   return n >= 3; //keep if > 3
}); //returns [3,4,5]

Reducing

The .reduce() function uses the given callback function to aggregate (combine) the elements in the list into a single value. 

function link(accumulation, newItem) { //adds two numbers
    let newAccumulation = accumulation + "->" + newItem;
    return newAccumulation;
}

let letters = ['a','b','c','d','e'];  //an initial array

let linked = ""; //an accumulated aggregate, start at ""
for(let i=0; i<letters.length; i++){
    linked = link(linked, letters[i]);
}
console.log(linked); //"->a->b->c->d->e"
function link(accumulation, newItem) { //adds two numbers
    let newAccumulation = accumulation + "->"+newItem;
    return newAccumulation;
}

let letters = ['a','b','c','d','e'];  //an initial array

let linked = letters.reduce(link, ""); //pass func, starting value



console.log(linked); //"->a->b->c->d->e"

info340sp20-functional-js

By Joel Ross

info340sp20-functional-js

  • 759

More from Joel Ross