Back to some JavaScript Basics, Part II
Last week I began a series made to go through some of JavaScript’s basics, the quirks. In my previous post, which you can find here, I briefly touched on JavaScript functions, understanding scope in JavaScript and how to use the .bind(), .call() and .apply() methods. Today I will go into hoisting, callback functions and closures.
Hoisting
Hoisting is a JavaScript mechanism that allows variables and function declarations to be moved to the top of their scope before code execution. So regardless of where the functions and variables are declared and whether their scope is global or local, they are moved to the top of their scope. In my previous post, I mentioned hoisting a few times while explaining scope and variables — and while variable declarations are one of the most basic concepts of any language, hoisting (what I consider to be one of the JS quirks) can give you some trouble if it isn’t understood.
Something to keep in mind, is that declaring a variable and assigning a value to it will effect hoisting.
Here is some simple code that would return exactly what we would expect:
Let’s add another variable, d, but mix it up a bit..
Here we get undefined, because there is no value assigned to the variable d. So what if we assign it a value?
We still get undefined because only the declarations are hoisted above the console.log, the values are not. If we instead assign the value above, while declaring it below the value will be logged:
In JavaScript, functions are also hoisted. Let’s create a named function that returns a value. In the same way the variables are hoisted, this function will be taken out and hoisted to the top of the file:
Hoisting is easy to understand, but it’s often an overlooked nuance of JavaScript.
Callback Functions
In JavaScript, functions are objects and because of this, they are able to take other functions as arguments, they can also be returned by other functions. These are known as higher-order functions, while functions that are passed as arguments are considered callback functions. A callback is a function that is executed after another function has executed.
What’s the point?
JavaScript is an event-driven language, meaning instead of waiting for a specific response to move on, it will keep executing while listening for other events in the code. Take a second to consider factors such as the setTimeout() function. If you have a nested setTimeout function inside of your first function, JavaScript won’t wait for a response from that first function, instead it will move on to the second. This is just to point out that you can’t call one function after the other and hope they execute in the expected order… Callbacks are a way to make sure that certain code doesn’t execute until other specified code has finished executing.
Closures
I’ll end this part of the series with closures. Closures are an important concept to know as they control what is and isn’t in scope in a particular function. It’s a feature in JavaScript where an inner function has access to the outer (enclosing) functions variables. Let’s look at a simple closure:
In my previous post when talking about scope, I didn’t mention lexical scope. Lexical scope (also static scope) is what allows that inner scope to have access to the variables in the outer scope. More generally, lexical scope determines the accessibility of variables by the position within the source code of nesting scopes.
From MDN: A closure is the combination of a function and the lexical environment within which that function was declared. This environment consists of any local variables that were in-scope at the time the closure was created.
You can of course get into great depth on closures in JavaScript, and any programming language for that matter! But simply put, a closure is when an inner function always has access to the variables and parameters of its outer function — even after the outer function has returned.
Hopefully this section has given you an understanding of hoisting, callback functions and closures in JavaScript. I plan to continue to chip away at these JavaScript concepts in hope to give a brief but sufficient understanding of them. If you found this to be helpful, please do let me know! I will be following this post with a third part to the series shortly, so be sure to check back.
