Array Methods and Callbacks

Callbacks

We have mentioned that in Javascript functions are special objects...but since they are objects we can do anything with functions that we can a normal object. This includes assigning functions to variables, and passing functions into other functions as arguments, as well as returning functions from functions.

When we pass a function into another function we call it a 'callback'. Callbacks are used a lot in Javascript.

Array helper methods

If we enter something like [1,2,3] in the console of a browser we will see our array show up with an arrow, if we expand the array by clicking on the arrow we see the values in our array and something that looks like this: __proto__. Open that up and we see a bunch of stuff associated with every array. Most of the list is helper functions, methods that do useful things with arrays.

Let's take a look at a few of the more common ones.

forEach

Looping through arrays is a very common task in programming. You can do this with a for loop, but there is a better way. forEach 


  arr.forEach(callback(currentValue [, index [, array]])[, thisArg])

That is the official syntax for the method. How do we read that?

  1. First note that we will call this method from an existing array.
  2. Second notice that it expects a callback function as it's first argument. This callback can be a named function or an anonymous function.
  3. The callback is where the action takes place...it defines what we want to happen for each item in the array. .forEach() will handle the looping, where to start, where to stop, and will automatically pass each item in the array one at a time into the callback function.
  4. That callback function will have up to three parameters passed in that we can use.
    1. First and required is the current array value.
    2. Second (optional) the index of the current array value
    3. Third (optional) the entire array.
  5. After the callback there is an optional parameter to use as this. We will talk more about this later. 

// example 1
const steps = ['one', 'two', 'three'];
// callback declaration
function makeList(item) {
  const listElement = document.getElementById('myList');
  listElement.innerHTML += `<li>${item}</li>`;
}
steps.forEach(makeList);

// example 2
// is the luckyNumber in the list?
const myArray = [12, 34, 21, 54];
const luckyNumber = 21;
let luckyIndex = -1;
myArray.forEach(function(item, index) {
  if(item === luckyNumber) {
    luckyIndex = index;
  }
});

map

map is great when we need to change each item in an array somehow. It returns a new array and does NOT modify the original array. 


let new_array = arr.map(function callback( currentValue[, index[, array]]) {
    // return element for new_array
}[, thisArg])

The syntax looks very similar to forEach, but notice that it needs a variable to store the new array it will return. We also need to make sure that the callback function we provide returns a value...usually the modified version of the array element. 


// example 1
const steps = ['one', 'two', 'three'];
const stepsHtml = steps.map(function(step) {
  return `<li>${step}</li>`;
});
document.getElementById('myList').innerHTML = stepsHtml.join();

// example 2
const grades = ['A', 'B', 'A'];
function convertGradeToPoints(grade) {
  let points = 0;
  if(grade === 'A') {
    points = 4;
  } else if (grade === 'B') {
    points = 3;
  }
  return points;
}
const gpaPoints = grades.map(convertGradeToPoints);

reduce

reduce is useful when we need to compress an array into a single value. It is most often used when the array has at least one value that can be mathematically flattened 


arr.reduce(callback( accumulator, currentValue, [, index[, array]] )[, initialValue])

Once again there is that callback. The parameters are different however. The first argument is going to be for the accumulator...the total of whatever operation we are performing. 


// example 1
// see map example for where the gpaPoints array came from...
const gpaPoints = grades.map(convertGradeToPoints);
const pointsTotal = gpaPoints.reduce(function(total, item) {
  return total + item;
});
const gpa = pointsTotal / gpaPoints.length;

// example 2
// this is the same thing as above, but with an arrow function
const pointsTotal = gpaPoints.reduce((total, item) => total + item);
const gpa = pointsTotal / gpaPoints.length;

// this could be further simplified as
const gpa = gpaPoints.reduce((total, item) => total + item) / gpaPoints.length;

indexOf


  // improved luckyNumber
const myArray = [12, 34, 21, 54];
const luckyNumber = 21;
let luckyIndex = myArray.indexOf(luckyNumber);

filter


let newArray = arr.filter(callback(element[, index, [array]])[, thisArg])

filter is similar to map in that it returns a new array of elements. The elements in the calling array will be included in the new array if they pass a test that you include in the callback you pass in. 


const words = ['watermelon', 'peach', 'apple', 'tomato', 'grape'];
const shortWords = words.filter(function(word) {
  return word.length < 6;
});

//same thing with an arrow function
const shortWords = words.filter((word) => word.length < 6);

shift, pop, push


let classes = ['CSE121b', ' CIT111', ' WDD130']; 
console.log(classes); 
console.log(classes[2]); 
classes[2] = "CIT222"; 
console.log(classes); 
document.querySelector('#class').textContent = classes.join('  '); 
  
// take off from beginning 
classes.shift(); 
document.querySelector('#class').textContent = classes.join('  '); 
  
// take off the end 
classes.pop(); 
document.querySelector('#class').textContent = classes.join('  '); 
  
// add one to the array 
classes.push('CIT 230'); 
document.querySelector('#class').textContent = classes.join('  ');
Next: Organizing our code