Closures, Hoisting, This, and Prototype

Closures

In Javascript, every function creates its own scope. Javascript also operates using lexical scope, this means that scope works from the inside out. A closure is when you pass an inner function a value from an outer scope or function. The inside cannot pass to the outside but the outside can pass in. Let’s look at an example.

let num = 10;
function logNum() {
    console.log(num);
}
logNum()
Result: 10

Notice that even though the variable numis declared outside of the scope of the function logNum , the function still has access to the variable and its value. The function can access the variable even without that variable being passed into it as an argument, that’s a closure.

function addNum(x) {
    return function(y) {
        return x + y
    }
}
const plus2 = addNum(2)
console.log(plus2(3))
Result: 5

When the function addNum is called, 2 is passed in. So in the nested function we basically have return 2 + y. So when the addNum function is called within the console.log, the number 3 is passed in which leads us to our result.

Hoisting

Photo by Andrew Coop on Unsplash

greeting()
function greeting() {
    console.log('Hello, World!')
}
Result: 'Hello, World!'

This is when we invoke a function before it has been defined. This is because Javascript hoists all declarations to the top of the current scope, script, or function. It’s important to know that let and const never get hoisted only var gets hoisted. It’s also important to know that declarations get hoisted but assignments do not. To put it simply, everything before the ‘=’ gets hoisted and everything after does not. Be careful when using hoisting because while it does make sense in Javascript it can be confusing for developers. Best practice is to declare your variables above your functions.

Photo by Zachary Keimig on Unsplash

What is ‘this’?

In Javascript, the ‘this’ keyword refers to whatever it calling the function. So, in the example below, this refers to the cat and the cat’s sound is ‘prrrrrrr.’ If we set another variable and set it equal to cat.makeSound()we would get undefined back unless the new variable had a sound like the cat object. Another way to get around this undefined error would be to bind the cat to the cat.makeSound() function to assign this to the cat. Bind prevents Javascript from trying to infer what we mean by this. When bind is used it explicitly tells Javascript what to assign to this.

const cat = {
    sound: 'prrrrrrr',
    makeSound: function() {
        console.log(this.sound)
    }
}
cat.makeSound()
Result: prrrrrrr

What is ‘prototype’?

Prototype in Javascript allows objects to inherit from each other.

const dog = {
    play: function() {
        console.log('The dog is playing');
    }
}
const koda= {
    type: 'Labrador'
}
Object.setPrototypeOf(koda, dog);
dog.play()
Result: The dog is playing

In this example we set kodato a prototype of dog, this gives koda access to the play method that exists within the dogobject. This is a pretty simple example but it should help you to see the capabilities of using prototype in Javascript.