The Complete JS Notes #4 🧵

Welcome to the fourth article of my JavaScript notes.

In this article we will talk about : Scoping, Hoisting, TDZ (let, const), Method Borrowing

All the content is taken from Jonas Schmedtmann’s amazing course The Complete JavaScript Course 2022: From Zero to Expert!

Please purchase the course to understand the content, this is simply my summarized notes of the course.

Lexical Scoping:

Scoping is controlled by placement of functions and blocks in the code

There are different scoping types

• global scope
• block scopes (With ES6)

Important thing is in block scopes you have to use let or const you can’t use vars.

Functions are also block scopes

Every scope has access to all of its parent scopes.

Hoisting in Js

Hoisting: Makes some type of variables accessible / usable in the code before they are actually declared. “Variables lifted to the top of their scope”

Hoisting exists in js because it lets some programming techniques like (mutual recursion) to be implemented in js. And var was the only way for doing this because of that we have this complicated hoisting.

We can’t remove this feature from the language so we use let and const to walk around this feature.

In this example we can clearly see temporal dead zone in practice.

me simply returns undefined because it is defined with var

job however creates a temporal dead zone and kills the code lines until finding where it is declared.

Functions act quite different. Normal function works just fine but other 2 creates a temporal dead zone.

If we print the functions with “var” used (instead of const) it will return an error but a different one.

Uncaught Reference Error its okay but why?

Because with var our function equals to “undefined” and in the console.log we are calling undefined like a function

Our window object has all the browser variables and functions such as “alert()”

But it also contains something interesting when we declare a variable with var it becomes a window object property. It doesn’t happen in let and const.

In the global scope this returns the window object and if we call it in a function it returns undefined (‘use strict’) mode.

However if we use it with the arrow function it returns the window object why? Because arrow function doesn’t have its own this it just inherits it from the parent object which is window

Method Borrowing

We can take method of an object and copy to another one

Here even though the method belongs to the jone method use mathilda’s year value because of this property.

See the first article of this js notes thread!

See the previous article of this js notes thread!

See the next article of this js notes thread!

Follow me on twitter 💣🔥