It all starts with syntax. From there, once you’ve got the concepts down, you can move into using a framework where you figure out how to make things “just work”.

Everything is great, until it’s not.

If someone put you on the spot right now and asked you to explain `this`, would they like your answer?

What about prototypal inheritance or coercion?

In this workshop, you’ll be taking things to the next level, shining a light into “black-box” concepts like prototypes, the `this` keyword, and what primitive types are.

Tyler will walk you through each concept, and build your understanding through examples in the areas you need to know.

Thanks for watching my advanced javascript fundamentals course! This course has been really fun to put together and is a subject close to my heart. Not just because I love Javascript but because I came from a mostly self-taught background. A lot of these concepts were a mystery to me for far too long in the beginning of my career. 

Also, I often see many of these concepts tripping up developers today… especially in edge case scenarios or during interviews. My hope is that I can save you from a lower salary offer, not getting a job, debugging a difficult code bases, and actually help you write cleaner code. 

Sure knowing these concepts are not required to use React, Angular, Vue, or just JavaScript in general, but I firmly believe that these advanced fundamentals can make a significant impact in your career. 

Intro to Advanced JavaScript Foundations 

advanced-javascript-fundamentals-resources-sketchnote

Sketch Notes

Everything within JavaScript is not actually an object. There are many primitive types that are not objects and are used everyday by developers. A primitive value represents the lowest level of the language implementation. We'll review what are considered primitive types in JavaScript today and how primitive types are treated differently than objects. 

Working with Primitive Types

Primitive values by rule are not objects. However when we treat a primitive type like an object, such as getting the .length of a string, JavaScript will wrap that primitive type into an object. This new object is then linked to the corresponding built-in .prototype, so that we can utilize prototype methods on primitive types. 

Autoboxing Primitive Types in JavaScript

Unlike classical languages like C# and Java, JavaScript does not have a true class. It utilizes linking objects together in order to inherit properties. Every single object that you create, unless specified not to, is automatically linked to the corresponding global object prototype. 

We also have the ability through utility functions and other methods to link objects together to share functionality. This lesson walks through a simple implementation of this inheritance paradigm and attempts to show how prototypes are used. 

Understanding Prototypal Inheritance within JavaScript

It can be confusing to understand when and how the .prototype and .__proto__ properties are created and used. They both seem to imply having something to do with prototypal inheritance. This is true but possibly not how you think. We'll review each of these properties' role within prototypal inheritance and how they are used in everyday code. 

Understanding the difference between .prototype and .__proto__ in JavaScript

`{}` is overloaded to be either an object literal or a block scope. When an assignment is made to a variable inside of the `{}`, it then becomes a block scope. Otherwise it is treated as an object literal. 

`var`, `let`, and `const` respect block and function scopes differently. `var` is also hoisted and can be redeclare while that is not true for `let` and `const`. This lesson goes more in depth on scope and how each variable declaration treats it differently. 

Working with var, let, const, and block scopes

The "this" keyword seems to be one of the most complex concepts within JavaScript. It is a dynamic keyword that when used correctly, can make your code more flexible and dynamic. In this lesson, we'll work through some examples of "this" in action, specifically by implicitly binding it to its context. 

Implicit Binding of the "this" Keyword

Arrow functions came into existence with ES6. Since then they have been looked at as the fix all solution when running into problems with `this` in our code. However it might not magically work all the time and this lesson is designed to show you how it really resolves `this`. We first need to understand what lexical scope is. It references the author time of our code which can be confusing considering `this` is runtime dependant. Let's look at all three of these examples to figure out how arrow functions work with `this`. 

Arrow Functions and Lexical Scoping "this"

 As one of the most commonly asked interview questions, "What is the this keyword"? This lesson focuses on how you can explicitly bind the context of your function to a specific object. Thus making it obvious what the "this" context will be. 

We review the call, apply, and bind prototype method and work to understand how they bind the "this" context explicitly. 

Explicit binding of the "this" keyword

An IIFE (immediately invoked function expression) is when a function is called immediately after it is defined. These functions are defined and called once and are not accessed by other functions, variables, or from the global namespace. This is because it uses the grouping operator to make these function declarations an expression. Because of this one time invocation and lack of accessibility, we can use their function scope to hide variables from being access from anywhere else. 

Private Variables with IIFEs

Coercion can be a scary word for many developers today. The inventor of JavaScript himself has publicly stated that some of the rules around coercion is the biggest thing he regrets about JavaScript. 

Simply put, coercion is the conversion of one type to another type. It happens implicitly in our code and there are also many ways to explicitly coerce our types. This lesson is designed to show you both types of coercion in action. 

Use Implicit and Explicit Coercion in JavaScript

Sure you've seen and heard of the ES6 `class` keyword. You might of also used the `extends` keyword before in order to subclass your `class` as well. However, do you actually understand what is happening behind the scenes? Could you de-sugar these keywords into basic programming functions? In this lesson we work with two classes that use the `extends` keyword and recreate them with functions and built in methods. We also talk about some of the differences between a `function` and a `class`. 

De-sugar an ES6 Class and the Extends Keyword  

When the ES6 class shipped back in 2015, a number of additional keywords came with it. Two of these are `constructor` and `super`. Both of these are specific to the `class` keyword and make working with classes manageable. Both are utilized when the `new` keyword is used to create a new instance of a `class`. `constructor`s are called initially with the `new` keyword and `super` is how a subclass can utilize it's parent's methods (like it's parent's constructor function) within that child class. 

ES6 Class Constructors and the Super Keyword

Classes are syntactic sugar over functions and functions are also referred to as "callable" objects. So it is possible to treat a function like an object and give them key / value properties like objects. The `static` keyword gives us the ability to assign a key / value property to a class itself, not an instance of that class. This lesson will walk you through using the static keyword and even show how to replicate it with regular functions. 

Working with Static Properties on a Class

Strict mode catches silent errors and throws them, fixes mistakes that can make it difficult for JavaScript engines to perform optimizations, and prohibits some syntax likely to be defined in future versions of ECMAScript. It can be used within entire scripts or to individual functions (does not apply to block statements). In this lesson we talk about some of these strict mode catches and see how to implement strict mode. 

How to use 'strict mode'

Closure is a buzzword you'll hear in most of your programming interviews. Some say that understanding what a closure is can affect the salary your offered tremendously. So what the heck is a closure? At its simplest definition, it's a nested function that has access to at least three levels of scopes (it's own scope, the parent scope, and the global scope). Let's write out some code of a closure in action and break down what makes it unique. 

Advanced JavaScript Foundations

Instructor

Credits

What you'll learn

Course content (16 lessons)

Instructor

Credits