Covering these topics makes you a JavaScript Interview Boss - Part 2

#javascript #webdev #beginners #intermediates

In the first part of our series, we were introduced to some basic but really important topics that are vital to understanding how JS works, in fact, the topics in this article depend a lot on what we discussed before, check it now.

So what are we waiting for? let's dive in.

4. Closures "The elephant in the room":

Last time we talked about how JS benefits from and arranges Scope Chains, so let's think about an interesting case, if we have a function inside another function, imagine a "console.log()" statement inside the nested one, what can it access in terms of variables?

Variables defined inside of the nested function at the same level as the statement.
Parameters passed to the nested function "which technically are just variables that get values when running the function".
Variables and Parameters in the parent function.
Down to "Check the stack of plates theory in last part's Scopes" what's in the global scope.

When you try to return the nested function when running the parent, something cool happens, in order to work, the nested function makes its own copy "not copy" from the scope we've mentioned in point 3, not all variables there, only ones that are needed for the inner function to work.

With that said, now when we return a function inside a function we have access to the layer in the middle that we couldn't access before, the return function is now armored with a box of variables to use, that we can't get elsewhere, we now have a state in that box, we can make processes on this variable, only the process we need and we specified in the returned function, in this example check how we can access "count" outside its local scope and increment it, only incrementing, not deleting, not changing, "count" is still private to the outside world!

In fact, wrapping this logic with something like modules and IIFE "Immediately-invoked Function Expression", now we can write our own packages and modules, and share it with others with useful states but only according to our specifications.

To sum up, if you get a question like What do you know about Closures? A very good and decisive start should be like: It's the process of returning a function inside a function, benefiting from Scope Chains and providing state and privacy to a certain scope. Neat!

5. Object-Oriented JS:

Once I was asked a question: Tell me about how Object-oriented JS is? What do Classes provide in JS? How Inheritance works?

To answer this one we should dive in our language's timeline, if we have an object, an object literal declared with "{}", it has properties, pairs of keys and values, then you need to add properties as functions to it, well, they're called methods, but this is too straight forward, we can use functions to be our constructors, instantiate an empty object in the beginning, and pass properties' values from the function parameters, return this object at the end of our function, now we have like a boilerplate that takes values and assign it to the same properties.

Actually, when making a new instance of your constructor function, you can replace both first and last steps of instantiating and returning the object, by using the "new" keyword when defining a new instance, it will create a "this" object and you can add properties to this, then it will be returned at the end.

What if we wanted to add another object with extra properties, extra methods, without losing the original ones? If you have to define an object you can use an object literal or another cool feature like "Object.create", you can use it to extend your original object if you pass it inside create "const newObject = Object.create(originalObject);" now all original properties are delegated to the new object, you can now build on top of it.

Back to our constructor function, you can use this feature to store all your methods inside an object, then using "Object.create" you can move these methods to your constructor, but our function actually has a builtin point inside of it called "prototype", you can hold all your methods inside of it, and that's exactly what "new" keyword does, you imagined it as "this" will be an empty object in the beginning, but it's actually an "Object.create" that holds all methods using "prototype".

Road to Inheritance: Now it started to be clear that we can take care of passing methods from a constructor function to another once they're in one place "Aka prototype", we call that prototypal inheritance, then how can we pass the properties itself? a constructor function has a cool method "call", while you're in the child function you can use it as "Parent.call(this, ...list of properties you want to extend)" this will copy properties instantiation from the parent but now will give it values from where the "call" method was called, Inheritance achieved!

In ES6 instead of making a constructor function, you can use classes, inside of it you have a constructor where you can list your properties, adding methods was never more straight forward, all it does under the hood is adding them to prototype.
A subclass can inherit from a class by just using "extends MainClass" when defining it, which, as you expected, all it does is using "Object.create" for passing prototype methods and using "call" to take care of our properties.
In the end, Classes are only, as we call it, a syntactic sugar, a predefined way that makes it easy to mimic constructor functions' functionality, which down the road represents how we boilerplate our objects, to reach inheritance and but as we said earlier in JS it's just prototypal inheritance.