callbacks.js

// Callbacks!
// Reminder: Run this with quokka if you want to see results instantly in your editor.
// https://quokkajs.com/

// Part 1
// If I gave you an array of numbers, and told you to list just the odds, you might do this:

var numbers = [1, 2, 3, 4, 5, 6];

var odds = [];
for (var i = 0; i < numbers.length; i++) {
  if (numbers[i] % 2 === 1) {
    odds.push(numbers[i]);
  }
}
odds;




// Part 2
// The problem is, if I gave you another list of numbers, you'd have to write that same code all over again.

var moreNumbers = [8, 4, 23988, 94, 87, 1111, 98];
var moreOdds = [];
for (var i = 0; i < moreNumbers.length; i++) {
  if (moreNumbers[i] % 2 === 1) {
    moreOdds.push(moreNumbers[i]);
  }
}
moreOdds;



// Part 3
// We know functions are reusable code. They make our lives easier. So we could do this:

function getOdds(array) {
  var newArray = [];
  for (var i = 0; i < array.length; i++) {
    if (array[i] % 2 === 1) {
      newArray.push(array[i]);
    }
  }
  return newArray;
}
// This makes it easy to call the code. It's easy to read too.
var oddsWithFunction = getOdds(numbers);
oddsWithFunction;
// We could do it again, easily, if provided another array:
var oddsWithFunctionAgain = getOdds([1, 2, 3]);
oddsWithFunctionAgain;



// Part 4
// But what if you need the even numbers?
// var evens = ?
// Ok, well, you could write a function that does the loop for you, and takes an extra parameter 'type' where you specify which filter to run.
function filterer(array, type) {
  var newArray = [];
  for (var i = 0; i < array.length; i++) {
    if (type === 'odds') {
      if (array[i] % 2 === 1) {
        newArray.push(array[i]);
      }
    } else if (type === 'evens') {
      if (array[i] % 2 === 0) {
        newArray.push(array[i]);
      }
    } else if (type === 'something_else') {
      // And so on and so forth,
      // you add more filter abilities here.
    }
  }
  return newArray;
}
// Great. This means that it's pretty succinct and clear to do different types of filtering.
var filteredOdds = filterer(numbers, 'odds');
filteredOdds;
var filteredEvens = filterer(numbers, 'evens');
filteredEvens;
// If you needed negative numbers, you could add it above into the 'filterer' function as another 'type'.
// var filteredNegatives = ?

// Even if you added 'negatives' as another filter type, you couldn't add every conceivable type of filter that somebody might want.
// Let's say you added 1000 different filters though. If you shared that code with somebody else, you'd be sharing an awfully big file, when they probably only need one or a few of those filters. What a waste!



// Part 5
// Let's consider callbacks (you should already have been introduced to them by this point).
var odds2 = numbers.filter(function(num) {
  return num % 2 === 1;
})
// Look! No for loop needed when you call filter! You don't have to think about that part. All you're responsible for is saying "for each item, it should be kept in the list if it meets [some condition]".
// Not only is it less typing, but it's easier to read (after you're used to this pattern). When you read someone else's for loop, you have to read it carefully to know if they are going forwards or backwards, etc. But with array.filter, you know it's going to look at all items.
// So the value of callbacks is:
//  * less code to write
//  * less code to read
//  * easier to see what's happening (after you understand it well), due to less cruft
//   * no need to read for loop, or any other "setup" code
//   * just get to focus on 'meat' of what to do instead of fluff


// Part 6
// Extra challenge:
// You know that SOMEBODY had to write that filter function (the built-in Array.filter function). What does it look like? It basically looks like this:
function filter(array, callback) {
  var newArray = [];
  for (var i = 0; array.length; i++) {
    if (callback(array[i])) {
      newArray.push(array[i]);
    }
  }
  return newArray;
}
// It's the same idea with Array.map. Somebody had to write it.
// Can you? One way/answer is below (scroll way down).















































function mapArray(array, callback) {
  var newArray = [];
  for (var i = 0; i < array.length; i++){
    newArray.push(callback(array[i]));
  }
  return newArray;
}

// How would you call our function to, e.g., add 1 to all elements?
var mappedArray = mapArray(numbers, function(number) {
  return number + 1;
});
mappedArray;