JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

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.

Maxime Bourgeois

Taylor Bell: Hey Tyler, thanks so much for joining me today.Tyler Clark: Hey, thanks for having me.Taylor Bell: Yeah, so I wanted to ask you a few things about your new advanced JavaScript foundations course.Tyler Clark: Yeah.Taylor Bell: Why is it important to further one's knowledge of the foundations?Tyler Clark: Yeah, that's a good question. I really like this course because... And I mentioned this somewhere in there, maybe I think it was in the intro video, but what I talk about in this course is not required for somebody to know these principles in order to make your first website at React or Angular or whatever framework you want to use. But what I've seen with these concepts is they're not things that are talked about too often. Mainly because people don't need to know them to get into web development, but what I have seen is they can sometimes be used against you when going up in interviews.Tyler Clark: A lot of these questions, a lot of these concepts I teach in this course I've seen get asked in a Q&A of an interview, which can affect your salary range. It can even affect the title they give you, whether you're a senior, mid, just by simply answering some of these questions and disregarding if you know React or to build an app. But if you answer some of these questions wrong, I've seen it knock your title and your salary.Tyler Clark: And then also there's some cases where if you get stuck in a debug mode where you get an error that's kind of complex and you don't really know why something's happening the way it is. Without understanding some of these fundamentals, it can be difficult and you don't even know what to Google in some cases to get the stack overflow answer. So debugging, interviewing, and then just overall code quality, right? Understanding how things work can help you write code and in a proper manner so that when people come in and see your code, they know what's going on because it's readable, they understand what's happening and it's able to translate across developers better.Taylor Bell: Cool. And so when you were teaching the workshop, as you were developing this material, were there any kind of surprises that you had about questions people asked?Tyler Clark: There were a few nuances that came up maybe about specific syntax or there were some questions like, "When would I ever do this?" Or, "Why would ever do this?" And again, a lot of these things that I talk about are things that people sometimes avoid because they don't know them. And so there wasn't really any questions that were asked to me that really jumped out like, "Oh, why would you ask that?" Mainly because people don't really think about these things too often. They just write it and move on. So a lot of the questions about this course kind of stemmed from where and why would I use these things and how does that work now that I use it in React. That kind of stuff.Taylor Bell: Cool. And so what's kind of the general flow of how the course goes?Tyler Clark: A lot of this stuff, we're not building an application. We're not building a user interface where someone can click around with. This course mainly is just one off bullet point concepts to JavaScript. So they're not entirely related to each other. Some of these things go hand in hand like prototypes and this and classes, they're all kind of related, right? It's all JavaScript. But most of these concepts are one off things. From the beginning to the end I assume that you know basic JavaScript knowledge. You don't need to watch the course all in order. It'll be best if you watch it in order, but it's mainly just me typing in a terminal into my IDE, sorry. And just explaining what each syntax does and how they relate.Taylor Bell: Cool. And so after somebody takes this course, what should they do next? What's a good stepping stone from here?Tyler Clark: From here, another course on egghead about prototypes that dive a bit more into prototypes and prototype inheritance. There are some other egghead courses on this keyword. There's some on variables. So I think that the next step would be to actually dive deeper on each individual topic. I merely scratch the surface on a lot of these things. Some of them are a little more straightforward, but classes, even with the this keyword, I hit a lot of use cases, but there still is a good amount more. So I think the next step would be is diving deeper on each individual concept. Because like I said, there's a lot more that goes on in these.Taylor Bell: Cool. Well thanks so much for meeting today to talk a little bit about your course and I'm excited to check it out.Tyler Clark: Yeah, thanks. Thanks for having me.

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

Tyler Clark

What you'll learn:

Prerequisites:

Credits

Course Content

You might also like these resources:

Introduction to Cloudflare Workers

Create an eCommerce Store with Next.js and Stripe Checkout

Practical Git for Everyday Professional Use