Day 2 of JavaScript Week hit me right between the eyes. Callbacks. I understand them theoretically, but even now, I confuse myself when trying to implement them. I didn’t complete our Day 2 project/homework on Day 2. I didn’t complete it on Day 3 either. I finally got it together on Day 4! Yes – the day before our weekly Sprint Challenge. There’s a learning curve. Its supposed to get easier. Just, not this week. This day was the start of the hardest week I’ve had so far.

JavaScript II

So, Day 2 dealt with closure, callback functions and advanced JavaScript arrays. There was about an hour’s worth of video to watch, with a 15-minute video going over closure and two 25-minute videos going over callbacks in JavaScript and array methods, respectively.

Closure

Closure wasn’t too hard – at least not at the level in which we’re dealing with it. Its largely focused on what data a given part of a program (usually a function) has access to. Its similar to nesting in most languages. There’s a hierarchy, and basically outside functions can’t access data from functions further in. Its like having tiered defensive walls surrounding a castle, or having higher and higher levels of security clearance with the government. The information that’s deeper in is only knowable to functions on that level. Those deeper functions can still reach outward and get information from their parent, grandparent and earlier ancestor functions.

Callback functions

Callback functions beat me up pretty badly. The main idea is simply this: a callback function is a function that can take another function as a parameter. That’s all there is to it. The function being used as the parameter/variable is referred to as the callback (or cb, for short). Its a common practice to always use the word “callback” as the parameter’s name when defining function that will use it, and inside of that function, its a common practice to refer to it as “cb”.

This is a function that takes a name and says hello to it:

  function greet(name) {
    console.log(`Hello, ${name}`);
  }

This is a callback function that uses the “greet” function, above:

 function greetVish(callback) {
    const innerName = 'Vish';
    callback(innerName);
  }

The callback in greetVish will become “greet” when its invoked using “greet” as a parameter.

greetVish(greet);

greetVish executes “greet” as its callback and passes innerName to “greet” as its parameter. As expected, it console logs “Hello, Vish”. We can then just change innerName and it can callback “greet” and say hello to anyone we want.

See? Its simple in theory. I don’t know why I can’t execute it without staring at each letter in the function for 5 minutes and rewriting every callback function I’ve attempted until 12 hours have passed. I think some of it is when we start to combine it with anonymous functions, and with arrow functions. It might also be lack of sleep.

I also now notice that I could have called it greetGroot and had innerName = “Groot” and then the callback could have said “My name is Groot.” Missed opportunity…

Ok. So, then we started to complicate things by learning that callbacks are used all over the place… like in array methods. We saw how we could use a for look to iterate over every item in an array and perform a task. Then we saw how the .forEach array method could do the same thing with one line of code. This led to us writing callback functions that took an array and a callback as two parameters and did stuff to the individual elements in the array. Because they were functions, we could use them on different arrays. Being callbacks, we could also modify them for use with different methods (create a callback that returns the first item in a given array, create a callback that shows the length of a given array).

Array methods

After the above, we moved on to array methods, starting with a comparison of .forEach and .map. The big difference between the two of them (each iterates over the entire given array) is that .map returns a new array without modifying the original, while .forEach mutates the original array.  Also, .forEach doesn’t give us back anything, but .map returns a new array. We also experimented with .reduce and .filter and were exposed to the word immutability, which apparently becomes very important in React.