Day 6: Scope, Hoisting and HOFs

Live shot of the Hoff trying to wrap his mind around HOFs

Scope this out

We hit the ground running to start week two. In the morning we discussed scope. I was familiar with global and functional scope, but block scope was something totally new for me.

Block scope is used in if statements, for loops, and things like that in Javascript. This is where the difference between using let and var is discussed.

The var keyword can be tricky in and around a for loop. For example, the incrementer might not work exactly as you think it would. Check it out:

for (var i = 0; i < 25; i+=1) {
//do awesome loop stuff
//this is me in block scope for my loop
};
//more code
//doing more important software stuff
console.log(i); // 25 (wait, whaaaa?)

See, a variable declared using the var keyword in a block scope is still available outside of that block scope. It survives! This is no good. And this is why we use let. Let is more predictable in its behavior. If I were to run the same code above using let i = 0 instead, then I would get a nice reference error telling me that i is not defined when I try to console.log(i). And why? Because the variable i stayed within its block scope, like a good little variable.

Const is kind of like let, but opposite. Let is used when you want a variable to go away as soon as possible, and const is used to make a variable that literally cannot be changed, ever! Here’s a good definition of const from old faithful, MDN:

“Constants are block-scoped, much like variables defined using the let statement. The value of a constant cannot change through re-assignment, and it can’t be redeclared.”

A good example for using const is when you want to pull in a Javascript library.

const _ = require('underscore');

Now the _ variable will always point to the underscore Javascript library, and it cannot be changed.

Hoisting

I can’t neglect to mention hoisting since we also covered that in the AM. In my reading and previous study before Galvanize, hoisting was always intimidating to me because it seemed like a super complex topic that I would never understand. Turns out it’s really not. It simply has to do with how the Javascript interpreter allocates memory when it’s interpreting a program. Basically, the interpreter will go through the code and take note of any variables being declared (including functions) and hoist those declarations (not including their values!) up to the top of the program. This little snippet might explain that better

console.log(i); // ???
i = 'hello';
console.log(i); // ???
i = 2;
console.log(i); // ???
let i = 'declared';
console.log(i); // ???

What will this log? This:

//undefined
//'hello'
//2
//'declared'

But how? The variable i wasn’t declared until the very last statement, so how did ‘hello’ and 2 get logged successfully? Answer: hoisting! The i variable was hoisted to the top of the code straight away, and set to undefined (hence the first log gives us undefined), making it possible to log out values of i “before” the variable is even declared. Wild stuff. Like I briefly mentioned, this same thing is done with functions. And here’s the kicker: if functions are written as a function declaration, the whole function and it’s value gets hoisted to the top, not just the empty variable. And a function declaration is probably what you’re thinking. It’s just writing a function like this.

function thisIsAFunc(){
return 'consider me declared';
};

HOFs

By lunch, I thought my brain was already pretty close to being fried, but it turns out I had no idea how fried it would become. Enter High Order Functions! In class we did this exercise where we paired up and wrote our own forEach function after briefly discussing what high order functions are. I will now try to replicate that function now from memory.

function forEach(arr, cb) {
for(let i = 0; i < arr.length; i++){
cb(arr[i]);
};
};

So that is just the generic forEach function that doesn’t itself do anything, but is really powerful because it can do a ton of different stuff depending on what callback function is passed in at cb.

There is so much more about high order functions, and luckily we will be spending a lot of this week on them, so I’m sure I’ll have more examples and a firmer grasp on what they are and how they’re used properly by the end of the week!