<info 340/>
Functional JavaScript
Joel Ross
Spring 2020
Functions
function sayHello(name){
return "Hello, "+name;
}
let msg = sayHello("Joel");
console.log(msg); //"Hello Joel"
![](https://s3.amazonaws.com/media-p.slid.es/uploads/377018/images/2193148/recall-stamp.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/377018/images/2616313/giphy.gif)
FUNCTIONS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/377018/images/2108483/mind-blown-jackie-chan-720x340.jpg)
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"
![](https://s3.amazonaws.com/media-p.slid.es/uploads/377018/images/3115078/map-filter-reduce-in-emoji-1.png)
info340sp20-functional-js
By Joel Ross
info340sp20-functional-js
- 623