Lecturer 5: Higher Order functions, Other array functions with callback, Asynchronous Callbacks, clearTimeout, Interval, Using functions to make modules

- Functions that operates on other functions. - by taking them as arguments or by returning them. - Manipulating each elements of an Array - Callback function - Creating modules Example

var nums = [1,2,3,4];
var sum=0;
forEachItem(nums, function(num){
        sum+=num;
});

function forEachItem(array,action){
        var x = array.length;
        for(var i=0; i<x; i++)
                action(array[i]);
}

What does this do?

function forEachItem(array,action){
        var x = array.length;
        for(var i=0; i<x; i++)
                action(array[i]);
}
arr = [["a","b"], ["c","d"], ["e","f"]];
var zAdded="";
forEachItem(arr, function(innerArr){
        forEachItem(innerArr, function(item){
                zAdded += item+"z";
        });
});
console.log(zAdded);

But javascript already has this method for an array.

["a","c","e"].forEach(function(element,index,array){
    console.log(element+" is at "+index);
});

Create new functions

function greaterThan(n){
        return function(m){return(m>n);};
}
var greaterThan10 = greaterThan(10);
console.log(greaterThan10(11));

function convert(type){
        return function(val){
                var result = type(val) ;
                return result;
        };
}
convert(Boolean)("a");

Other array functions with callback

arr.filter(callback[, thisArg])

returns new array of elements which pass the check condition

function biggerThan10(element) {
  return element > 10;
}
var filtered = [11, 5, 8, 130, 44].filter(biggerThan10);

arr.map(callback[, thisArg])

returns new array after applying callback on each item

var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);

for you to study
arr.reduce(callback[, initialValue])

Asynchronous Callbacks

- setTimeOut function waits for given time to call another function

document.body.style.background = "blue";
setTimeout(function(){
        document.body.style.background = "yellow";
},2000); // executes after 2 sec
document.body.style.background = "red"; // this line doesn't wait for the function in setTimeout to be executed

What if you want to call some other function after the function passed to setTimeout executes??

document.body.style.background = "blue";
var toYellowIn2Sec = function(callback){
        setTimeout(function(){
                document.body.style.background = "yellow";
                callback();
        },2000);
};
toYellowIn2Sec(makeRed);
function makeRed(){
        document.body.style.background = "red";
}

clearTimeout

var idOfToYellowTimer=setTimeout(function(){
        document.body.style.background = "yellow";
},3000); //setTimeout function returns an Id
var x  = prompt("changing to yellow in 5 sec, enter 'no' to cancel.");
if(x=="no"){
        clearTimeout(idOfToYellowTimer);//needs Id returned by setTimeout
        document.body.style.background = "red";
}

Interval

var ticks = 0;
var lbl= document.createElement("label");
document.body.appendChild(lbl);
var idClockInterval= setInterval(function(){
        lbl.innerHTML = ticks++;
        if(ticks == 10)
        clearInterval(idClockInterval);
},1000);

Using functions to make modules

var names= ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
function dayName(number){
        return names[number];
}
console.log(dayName(1));

var dayName= function(){
        var names=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
        return function(number){
                return names[number];
        };
}();
console.log(dayName(3));

Lets make a week module

converts number to day, day to number

var week = {};
(function(exports){
        var names=["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
        exports.name=function(number){
                return names[number];
        };
        exports.number=function(name){
                return names.indexOf(name);
        };
})(week);

console.log(week.name(1));
console.log(week.number("Friday"));