JavaScript: Under the Hood ( Beginner to Expert )

Name: JavaScript: Under the Hood ( Beginner to Expert )
Rating: 4.4 (14 reviews)

Learn advanced JavaScript concepts such as Hoisting, Closures, Prototypal Inheritance, Async JS, etc. by visualization.

Created byHarshit Agrawal

Last updated 10/2020

English

What you'll learn

Fundamental principles of JavaScript.
Visualize the underlying concepts when you code.
Understand the code execution by learning Hoisting, Call Stack, Scope Chain, Functional Execution Context.
Master functions by learning Closures, IIFEs, Callback, Function Statements, Function Expressions.
Understanding of the phrase "Everything is Object in JavaScript".
Master Asynchronous JS by learning the full model of JS and Browser that powers modern web apps.
Understand Fetch API, Callback Queue, Microtask Queue, and role of Browser in async code execution.
Learn Promises, Then/Catch, Callbacks, and Async/Await.
Master ES5 OOP by learning underlying Prototypal Inheritance in JavaScript.
Master ES6 OOP ( class, extends, constructor, and super in great detail ).
Understanding of 'this' keyword to debug confusing bugs.
Learn powerful JS functions like call, apply, etc.
Understand the difference between var, let, and const.
Understand the power of Arrow Functions.

Course content

7 sections • 46 lectures • 4h 21m total length

Welcome to the Course2:22

Lexical Environment and Execution Context3:30
Explore how the lexical environment defines where variables live and how execution context tracks the currently running code, including global and functional contexts.
The Global Execution Context and Window Object5:14
Hoisting and Code Execution10:53
The Functional Execution Context4:36
Call Stack and Scope Chain5:15
Examples: Call Stack and Scope Chain11:08
Explore how the call stack and scope chain govern variable lookup as execution contexts form, with memory allocation during creation and hoisting shaping output like hello and hola.
var, let, const9:50
Additional Reading0:01

Objects in JavaScript3:10
Functions are Objects (First Class Functions)6:18
Discover how functions are objects in JavaScript, enabling first-class functions you can pass to other functions, assign as properties (methods), and invoke with a code property.
Function Statements and Function Expressions6:03
Explore how JavaScript treats functions as first-class citizens, allowing passing and assignment; compare function statements with function expressions, including anonymous functions and their invocation within execution context.
Higher Order Functions7:34
Callbacks and Higher Order Functions2:33
Explore higher order functions and callbacks in JavaScript by examining map, reduce, and filter patterns, demonstrating how functions are passed and invoked later to power asynchronous code.
IIFE: Immediately Invoked Function Expression8:13
Arrow Functions3:51
Explore arrow functions, a shorter, cleaner alternative to function statements and expressions, and see how replacing the function keyword enables concise single-parameter usage and easier callbacks.

Introduction to Closures6:01
Returning Functions from Functions10:30
Nested Function Scope5:25
Backing up Function Memory6:27
Function Closure4:52
Discover how function closures in JavaScript capture and persist outer variables across calls, using a backpack-like private storage to access a number beyond local scope.
Creating Multiple Closure Instances4:10
Explore the power of closures by creating multiple closure instances, each with its own scope (backpack) and outputs independent from the others.
Additional Reading0:01

Synchronous vs Asynchronous5:11
Compare synchronous and asynchronous programming in JavaScript, highlighting the single-threaded call stack. Discover how the browser enables asynchronous features like timeouts, intervals, and HTTP requests for modern web apps.
Asynchronous JavaScript Execution5:01
Demystify asynchronous JavaScript execution by showing how browser features and the JavaScript engine handle delays, call stacks, and the two second timing, with skeleton loading as data arrives.
Event Loop and Callback Queue5:42
Promises - Overview3:41
Explore how asynchronous JavaScript works behind the scenes, the browser's role in fetch API network requests, and how promises move data into the JavaScript engine memory for use.
Fetch API - HTTP requests in JS3:52
Explore how the fetch API enables HTTP requests in JavaScript, returning a promise that resolves with data from the internet and can be logged or processed with then.
then and catch7:18
Microtask Queue4:49
Explore how the microtask queue prioritizes microtasks over callbacks in JavaScript, demonstrated by a two-second blocking operation and a promise, shaping execution order.
Async Await3:30

Introduction to Object Oriented Programming6:10
Object Creation in JavaScript5:07
Creating object with Functions7:58
Saving memory with Object.create6:15
Prototype property of functions.2:45
Creating objects with help of new, prototype, and this7:49
Create objects in JavaScript using the new keyword and this, and extend them with prototype-based methods like walk and eat, illustrating constructor patterns with a human creator function.
this keyword and Arrow Functions10:24
class in JavaScript4:27
Explore how to create objects with the class keyword in JavaScript, using constructors and methods, arrow functions, and reveal what happens behind the scenes with prototypes and object instantiation.
call and apply functions6:18
Inheritance in JavaScript2:37
Inheritance with new and call: Part 16:21
Inheritance with new and call: Part 210:24
Inheritance with class, extends, and super: Part 13:50
Inheritance with class, extends, and super: Part 214:28

Requirements

Very basic programming knowledge (we'll dive deep in all JS concepts)

Description

According to the Stack Overflow, 2020 survey JavaScript is the most in-demand programming language. Also, with the rising popularity of React, Angular, Vue, Svelte, MEAN stack, MERN stack, JAM stack, etc. there is more and more demand for JavaScript developers. As a rule of thumb when there is more demand, the quality of developers gets compromised and that's where this course comes for you.

In this course, we will dive deep into the core JavaScript concepts from the basics of JavaScript. After completing the course you will be in the top 10% of JavaScript developers and in some concepts even in the top 5%. You can use this knowledge in your everyday job, give webinars, nail any JavaScript interview at any level whatsoever.

This course follows a different path than most of the online courses out there who teach you to just use JavaScript without understanding what's going on under the hood. We will go through a different path and understand the concepts by visualizing through diagrams.

This course will cover advanced concepts ( by assuming you're a beginner of course) such as Hoisting, Global Execution Context, Functional Execution Context, Scope Chain, Call Stack, Higher-order functions, Callbacks, Immediately Invoked Function Expressions (IIFEs), Closures, Asynchronous JavaScript in detail using Browser, Async/Await, Promises, Fetch API, Then/Catch, Callback queue, Microtask queue, objects and object literals, OOP using ES5 and ES6, function constructors, prototypal inheritance, class, extends, super keywords in detail, call, apply, and lot more.

It's my promise to you that after completing the course you will be confident in your JavaScript skills like never before, you may even have more knowledge than your interviewer in some cases, imagine how great that is for your future. This could be the best investment for your career in terms of long-term and timeless rewards you'll get.

This course is very comprehensive and detailed. You'll understand every line of code with different diagrams and sketches that would embed the knowledge in your brain forever.

Who this course is for:

Anyone who wants to be among the top 10% JavaScript developers.
Anyone who wants to visualize what they are coding rather then just doing it.
Anyone who couldn't wrap their head around concepts like Hoisting, 'this', Higher Order Functions, Closure, Prototypal Inheritance, etc.
Experienced developers coming from different programming languages and frameworks.
Anyone who is working with React, Angular, Node but are not confident in core JavaScript.
Anyone who wants to nail JavaScript interviews at any level by understanding underlying concepts.
Anyone who wants to understand what they are coding in JavaScript instead of just doing it.

JavaScript: Under the Hood ( Beginner to Expert )

What you'll learn

Explore related topics

Course content

Introduction1 lecture • 2min

Fundamental Principles of JavaScript8 lectures • 50min

Objects, Functions, Callbacks and IIFEs7 lectures • 38min

Closures7 lectures • 37min

Asynchronous JavaScript8 lectures • 39min

Object Oriented JavaScript14 lectures • 1hr 35min

Bonus Lecture1 lecture • 1min

Requirements

Description

Who this course is for: