Implementing Array Callback Methods (Under The Hood)

Array Callback Methods Implemented With For Loops

How to implement array callback methods in JavaScript

Array Callback Methods Implemented With For Loops

How to implement array callback methods in JavaScript

#### Functions are called “First Class Objects” in JavaScript because:

A function is an instance of the Object type
A function can have properties and has a link back to its constructor method
You can store the function in a variable
You can pass the function as a parameter to another function
You can return the function from a function

What do you think will be printed in the following:

Anonymous callback, a named callback

function foo(callback) {
    console.log('grape');
    callback();
}

function bar() {
    console.log('banana');
}

const fruitBasket = function() {
    console.log('apple');
    bar();
    foo(bar);
    foo(function() {
        console.log('orange');
    });
    console.log('pear');
};

fruitBasket();

Function that takes in a value and two callbacks. The function should return the result of the callback who’s invocation results in a larger value.

function greaterValue(value, cb1, cb2) {
    // compare cb1 invoked with value to cb2 invoked with value
    // return the greater result

    let res1 = cb1(value);
    let res2 = cb2(value);
    if (res1 > res2) {
        // if this is false, we move out of if statement
        return res1;
    }
    return res2;
}

let negate = function(num) {
    return num * -1;
};

let addOne = function(num) {
    return num + 1;
};

console.log(greaterValue(3, negate, addOne));
console.log(greaterValue(-2, negate, addOne));

Note: we do not invoke negate or addOne (by using () to call them), we are passing the function itself.

Write a function, myMap, that takes in an array and a callback as arguments. The function should mimic the behavior of Array.prototype.map.

function myMap(arr, callback) {
    // iterate through the array, perform the cb on each element
    // return a new array with those new values
    let mapped = [];

    for (let i = 0; i < arr.length; i++) {
        // remember that map passes three args with each element.
        let val = callback(arr[i], i, arr);
        mapped.push(val);
    }

    return mapped;
}

let double = function(num) {
    return num * 2;
};
console.log(myMap([1, 2, 3], double));

Write a function, myFilter, that takes in an array and a callback as arguments. The function should mimic the behavior of Array.prototype.filter.

function myFilter(arr, callback) {
    let filtered = [];

    for (let i = 0; i < arr.length; i++) {
        let element = arr[i];

        if (callback(element, i, arr)) {
            filtered.push(element);
        }
    }

    return filtered;
}

Write a function, myEvery, that takes in an array and a callback as arguments. The function should mimic the behavior of Array.prototype.every.

function myEvery(arr, callback) {
    for (let i = 0; i < arr.length; i++) {
        let element = arr[i];

        if (callback(element, i, arr) === false) {
            return false;
        }
    }
    return true;
}

Further Examples of the above concepts

const createMeowValue = () => {
  console.log(this.name);
  let meow = function () {
    console.log(this);
    console.log(this.name + ' meows');
  }
  meow = meow.bind(this);
  return meow;
};

const name = 'Fluffy';

const cat = {
  name: name,
  age: 12,
  createMeow: function () {
    console.log(this.name);
    let meow = () => {
      const hello = 'hello';
      console.log(this.name + ' meows');
    };
    let world = '';
    if (true) {
      world = 'world';
    }
    console.log(world);
    // meow = meow.bind(this);
    return meow;
  }
};

cat.newKey = function () {
  const outermostContext = this;
  const innerFunc = () => {
    secondContext = this;
    console.log(secondContext === outermostContext)
    return function () {
      innermostContext = this;
    }
  };
  return innerFunc.bind(outermostContext);
};

const meow = cat.createMeow(); // method-style invocation
meow(); // function-style invocation

console.log('-------')

const createMeow = cat.createMeow;
const globalMeow = createMeow(); // function-style
globalMeow(); // function-style

function createSmoothie(ingredient) {
  const ingredients = [ingredient];
  return ingredients;
}

// console.log(createSmoothie('banana'));
// console.log(createSmoothie('apple'));

// one parameter only
// first argument is a string
// return an array
// DO NOT USE forEach

References:

App Academy Open

App Academy Open is the first free, online web development course that's meant to get you hired as a developer. Get…open.appacademy.io

MDN Web Docs

Read more at hacks.mozilla.org Roughly a year ago at Mozilla we started an effort to improve Firefox stability on…developer.mozilla.org

Introduction: callbacks

To demonstrate the use of callbacks, promises and other abstract concepts, we'll be using some browser methods…javascript.info