It’s always a good idea to go back to the fundamentals and review what you’ve learned so far. With so many languages and frameworks out there, it’s easy sometimes to be confused with the syntax and terms. In this post, I will be highlighting the more crucial concepts of JavaScript. Some of these terms might probably appear in an interview along the road! Note that this post will not be covering everything there is to know about JavaScript. There are numerous sources out there (which I will link on the bottom) that you should check out if you are brand new to JavaScript, or want more of an in depth coverage of the language.

From what I’ve observed, the key concepts that everyone currently learning JavaScript should know and/or review are the following: scope, context, this, hoisting, and closure.

To start off with the basics, JavaScript is a single threaded language that only executes a single task at a time. What does this mean? — it means that the rest of the tasks that need to be executed are queued in a stack to wait for their turn. The location at which the tasks are queued is the Execution Context. To put things in comparison, node.js is different from JavaScript in that it is able to execute multiple tasks simultaneously, and there is no queue for the later ones. There is a concept however called async, which allows multiple tasks to be done simultaneously without having to wait in the queue.

And now, we jump into the short recap of these concepts for your last minute preparation purposes!

Scope: scope refers to the visibility/accessibility of variables, functions, and objects. There are two types of scopes which are global and local. Variables that are defined inside a function are known to be local, whereas variables defined outside of a function are global. Take this as an example:

let name = 'Zoey';function getScope() {
console.log(name);
// logs 'Zoey'
let hobby = 'NBA'
}
console.log(name); // 'Zoey'

If you console.log name, it will log out Zoey. Global variables can be accessed from any other scope. Variables defined inside of a function are in the local scope. To side track a little bit, although we are able to console.log name inside of the function because the variable is global which means it is accessible at any scope, if we were to create a new function to reference the variable hobby, it would not be possible because that variable is a local one enclosed inside of the getScope() function. The reason why scope exists is to prevent gaining access to private data.

This: this refers to the object that is being passed in as the argument. Prior to ES6, we had to utilize apply, call, and bind to keep track of the context in this. There are a couple cases in which the value of this changes. When we create a new object using ‘new’, a whole new obj is created and this is that whole object. When using a dot notation, this is equal to the object that the function is a property of. For example, let’s say that we have a person object and we are invoking a function to it. person.randomFunction(). This is the object that is on the left side of the dot. Thus, the value of this is the person object.

Context: context goes hand in hand with this. It refers to the value of ‘this.’ In the global scope, the value of this will be the window object. In strict mode, context is undefined.

Hoisting: hoisting, which I think is a funny word, is a term that is defined as the variable that is lifted and declared to the top of a function if it was defined inside of the function. Remember this! Variable assignment takes precedence over functions which takes precedence over variable declarations (Variable assignment > functions > variable declarations).

let globalVar = 'first';function testHoisting() {
let varInside;
console.log(varInside)
varInside = 'inside function'
}
console.log(globalVar)
console.log(testHoisting())

After the first console.log is run, ‘first’ prints out. The console logging of varInside however evokes an error saying that the variable is not defined. This is because declaring a variable but not assigning a value only until after the console.log doesn’t notify varInside at the time that it’s equal to ‘inside function’. It’s just good practice to define all variables at the top of the scope. If we move the assignment of the variable above the console.log, then it will log out ‘first’ and then ‘inside function.’

Closure: closures are created when an inner function tries to access the scope chain that is in its outer function. The inner function is gained access to the outer function’s variables and arguments. There are three scope chains: its own, outer function, and global. Closures accentuate the idea of inner functions being able to access variables and arguments of the outer functions while the outer functions cannot access the inner functions’ information.

Please let me know if you see any mistakes!

Resources:

https://dev.to/arnavaggarwal/10-javascript-concepts-you-need-to-know-for-interviews