higher_order_functions.js

/*
    ABOUT FUNCTIONS
    ---------------
    While coding, we could notice there are some similar tasks we
    do over and over again. An example would be looping.
    Most of the time, we do the same thing:
        - declare a counter variable
        - check if is is less than the array length
        - increment the counter until the condition is false
    This tasks above is pretty much the same thing. 
    Why dont we just create a function to do this?
    In programming we use functions to hide the inner workings
    of a particular operation. This concept is called "Abstraction."
    We just call the function and it knows what to do.
    Example: console.log(), alert(), etc all have some code in it
    that makes it possible to print to the browser's console and
    show a pop up dialog respectively.

    We don't care about how this works. The inner workings is hidden 
    in other words abstracted from the user.
    This advantageous because:
        - it reduces cognitive load on the programmer's
        brain. With just one line of code, i could show and alert box.
        I don't need to care how it was coded to actually use it.
        - it promotes resuability. Can you count how many times you've
        used console.log()? You see the idea about functions?
        Write Once and Use as much as you like with less code.
        Imagine there was nothing like functions and the code that
        powers console.log() was 15 lines long. That means you'll have
        to copy and past 15 lines of code anytime you want to log 
        something to the browser's console.
        This idea of reusability has led to creation of many libraries
        with common functions that programmers could use.
        You could create your library if you want too.
        - it reduces the likelyhood of more errors. What if you copied
        and pasted the 15 lines of the code powering console.log() and
        you mistakenly copied 14 lines or the wrong lines?
        What if the condition in your loop was wrong and you have copied
        and pasted the code in 20 different places?
        You see, when you write a function correctly once, the possibility
        of all these errors are eliminated if the function is used properly.
    
    If you don't understand this theoritical explantion of the use of
    functions or can't at least see its benefits, my professional advice
    would be to check in for a deliverance session...lol
    I just added lol to pretend it was a joke...lol
    Plus, if you read this up to this point...
*/

/*
    HIGHER ORDER FUNCTIONS AND CALLBACK FUNCTIONS
    ---------------------------------------------
    Higher Order Functions(HOF) - are functions that take another function as an argument.
    Callback Functions - are functions that are passed to HOFs'
   
    document.addEventListener("click", () => {
        console.log("I am inside the ");
    })
    addEventListener() is the HOF
    The arrow function arg is the callback function
    It is not called immediately (asynchronous). It is called after the
    addEventListener() is executed/done ie when the button has received
    a click event.

*/


function forEach(array, load) {
    for (const element of array) {
        load(element);
    }
}

// forEach([2,4,5], (element) => console.log(element));


function filter(array, check) {
    const filteredArray = [];
    for (const element of array) {
        if(check(element)) {
            filteredArray.push(element);
        }
    }
    return filteredArray;
}

let evenArray = filter([4,6,7,5], (element) => element % 2 === 0);
// console.log(evenArray);


function map(array, transform) {
    const transformedArray = [];
    for (const element of array) {
        transformedArray.push(transform(element));
    }
    return transformedArray;
}

let doubledArray = map([2,5,10], (element) => element * 2);
// console.log(doubledArray);

function reduce(array, compute, startValue) {
    let computedValue = startValue;
    for (let element of array) {
        computedValue = compute(computedValue, element);
    }
    return computedValue;
}

// let sum = reduce([2,3,2,3], (prev, next) => prev + next, 0);
// console.log(sum);


//map(), reduce() and filter() is already in-built in JS
// No need to manually create them like we did above
// They are methods of the Array object
const numbers = [0, 1, 2, 3, 4, 5, 6];
const doubledNumbers = numbers.map(n => n * 2); // [0, 2, 4, 6, 8, 10, 12]
const evenNumbers = numbers.filter(n => n % 2 === 0); // [0, 2, 4, 6]
const sum = numbers.reduce((prev, next) => prev + next, 0); // 21
//prev is known as the accumulator variable and it is the seconde arg
//of the reduce function. It is set to 0 here. Next is the current value
//of the array and the updates as the function iterates through the array

// console.log(numbers);
// console.log(doubledNumbers);
// console.log(evenNumbers);
// console.log(sum);


const students = [
  { name: "Nick", grade: 10 },
  { name: "John", grade: 15 },
  { name: "Julia", grade: 19 },
  { name: "Nathalie", grade: 9 },
];

const aboveTenSum = students
  .map(student => student.grade) // we map the students array to an array of their grades
  .filter(grade => grade >= 10) // we filter the grades array to keep those 10 or above
  .reduce((prev, next) => prev + next, 0); // we sum all the grades 10 or above one by one

// console.log(aboveTenSum) // 44 -- 10 (Nick) + 15 (John) + 19 (Julia), Nathalie below 10 is ignored


/* 
    EXECUTION CONTEXT AND THE FUNCTION CALLSTACK
    --------------------------------------------
    The place where the computer stores the execution context of
    functions is called the "call stack".
    When a function is called, its current context (location of where is called)
    is placed on top of the stack.
    When the function is done, it is popped out of the stack and the context
    information is used to continue execution of the script.
*/

/*
    CLOSURES (Ignore for now if it is confusing)
    --------
    Closures are inner functions that have access to its own local variables,
    its parents local variables and global scoped variables.
    The inner function always remembers the environment it was created.
    So whenever you call the inner function, it has access to its 
    parent (the function that created it) variables.

    // Object constructor declaration already uses the concepts of closures

    JS is full of functions and sometimes inner functions might want to access
    data that their defining scope has but the browser doesnt have directly.
    Closure can be used here. Eg in event listeners.
    Variables declared in closures are closed from the global scope
*/

function outer(n) {
    let local = n;
    let inner = () => {
        return local;
    }
    return inner;
}

let inner = outer(2); // The first call returns the inner function
let inner2 = outer(4);
// console.log(inner()); // The second call executes the inner function
// console.log(inner2());


function Counter() {
    var value = 0;
    this.getValue = function() { 
        return value; 
    }
    this.increase = function() { 
        value++; 
    }
}
 
 var myCounter = new Counter();
//  console.log(myCounter.getValue());
 myCounter.increase();
//  console.log(myCounter.getValue());

/* 
    Can be used for Namespacing private functions
    Namespacing in programming is the concept of having a group of
    variables or functions with a common named parent.
    This helps to group similar variables, objects or functions and
    in turn helps to create a modular system which prevents naming conflicts.
    eg file.create(), file.delete(), file.name all belong to the file namespace
    JS doesnt have this feature, so we could use closures to achieve this.
*/

// Self executing functions execute immediately. variables declared inside it
// are locally scoped (cannot be accessed outside it)
// JQuery uses self executing functions very well.

var dwightSalary = function() {
    var salary = 60000;
    function changeBy(amount) {
        salary += amount;
    }
    return {
        raise: function() {
            changeBy(5000);
        },
        lower: function() {
            changeBy(-5000);
        },
        currentAmount: function() {
            return salary;
        }
    }; 
}();

// alert(dwightSalary.currentAmount()); // $60,000
// dwightSalary.raise();
// alert(dwightSalary.currentAmount()); // $65,000
// dwightSalary.lower();
// dwightSalary.lower();
// alert(dwightSalary.currentAmount()); // $55,000

// dwightSalary.changeBy(10000) // TypeError: undefined is not a function