The JavaScript Survival Guide 🧟 provides protection from the so-called "weird" features that you will encounter as a JS developer. This primer will introduce you to variables, functions, objects, closures, hoisting, this-binding, and more.  https://fireship.io/courses/javascript/

#javascript #tutorial

Primary source: https://developer.mozilla.org

Take the quiz 🤓

iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
2024-02-04T06:38:28.794Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
bce9c1eb-daab-4831-8a7b-65ee937ed695
c9cb65dcbf07d20b39ee7a9b7255d445d2aa1a9bad68f3e36c5aba50bb417655
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Some people call JavaScript a virus.
And if that's true, it means developers are the host.
No matter what you label yourself as today, you have to face the reality that one day you may join the hordes of JavaScript developers out there.
And when that day comes, you need to be prepared by understanding the practical and fundamental concepts of the JavaScript programming language.
Java.
Today's video is not about victory, it's about survival.
Welcome to Episode 3 of the Full JavaScript Jaws.
In the last video, we looked at how JavaScript works under the hood.
And today, we'll look at many of the fundamental features of a language as they relate to practical programming.
But more importantly, I want to help you survive some of the weirder parts of JavaScript that might trip you up or that you might find on an interview question.
And many of these concepts like closures and hoisting can be easily understood by Removing the head or destroying the brain.
Chapter 1.
Where and how do I run my JavaScript code?
Let's find out by creating a hello world app.
Open up an editor like vscode, create a file called index dotjs, and type in console log hello world.
Now assuming you have Node.
Js installed, you can run the script directly on your machine via the command line.
We'll have an entire video dedicated to Node.
Js later in the course, JOB.
All you need to know for right now is that if you type in node index dotjs in the command line, it will execute the code in your script.
So you just wrote a back end server side JavaScript application.
But J.
But when most people think about JS, they're thinking about browsers and web applications.
It's possible to run code in the browser just like we did from the command line by opening the developer console.
In the previous video, we learned that JavaScript has an interpreter or JIT compiler to be precise that will execute your code when you type it in here.
But the browser console is really just a debugging tool.
The way that web applications actually work is they declare a script tag in an HTML document.
We can go ahead and create an index dot HTML file, then we'll add a script tag and set the source attribute to the JavaScript file.
When the browser parses this HTML file, it's going to see the script tag and then try to load and execute the script.
In our case, it won't execute the JavaScript until the document is fully loaded because we use this defer attribute.
This is useful because a lot of times your JavaScript will reference HTML elements in the body, which won't be available until the document is fully loaded.
Now the big caveat here is that most developers are using frameworks, which will set up the script tag for you.
But if you're doing any kind of web development, it's important to understand how script tags work.
But now it's time to move on to chapter 2, primitives and objects, which are 2 of the lowest level building blocks in the language.
There is a total of 7 primitive types in modern JavaScript with the most common ones being string, number, Boolean, null, and undefined.
John.
A special characteristic of primitives is that they're immutable, which means their value can't be directly changed once they've been assigned to a variable.
They can be reassigned to a different value, but they just can't be changed directly.
And because JavaScript is a dynamic weekly type language, we don't actually use type annotations in our code.
J, but we can use this type of operator to check a type at runtime if needed.
And just for those who are wondering, I'm using the Quoca plugin for Versus Code, which displays the output of my code on the right here in blue.
J We'll look at these data types in more detail as we go through the video, but for right now you should know the difference between undefined and null.
Undefined is the default default value that you'll see for a variable that doesn't have a value assigned to it or for a function that just returns nothing.
Null is similar in the sense that it represents an empty value, but it's something that you, the developer, would assign explicitly.
Now these primitive data types can be contrasted with the object type, which represents more complex data structures like arrays, objects, and functions.
The big difference is that objects can be seen as a collection of keys and values or properties, and they can be mutated after being assigned to a variable.
So So the bottom line that you need to understand is that anything that's not a primitive type is going to inherit from object.
That includes things like functions, arrays, or any class instances.
Now, there's one other little piece of weirdness that you might encounter, and that is primitive wrapper objects.
The reason I bring this up is because you may see these out there in the wild, and they allow you to jostly wrap a primitive type in a class instance.
But you should never really use them unless you have a good reason to.
Chapter 3.
Control flow and truthy versus falsy.
In JavaScript, we can implement conditional logic with an if statement.
If a condition is truthy, then we execute this block of code, else we execute this other block of code.
And we can also use else if if there are multiple conditions to check.
But the more important thing to understand here is what is truthy and what is falsy in JavaScript.
Because JavaScript will always try to coerce a value into a boolean when it's encountered inside of a conditional statement.
True is obviously truthy, and anything that's an object is also truthy, even if it's an empty array or an empty object.
The ones you have to watch out for are strings and numbers.
A string that has length will be truthy, but an empty string will be falsy.
Then the number 0 will be falsy, but all other numbers will be truthy.
And if you're ever unsure about a value, you can simply add a double bang in front of it to course it to a boolean yourself.
Now, the reason this works is because the exclamation mark is a logical not operator.
Jar.
A single exclamation mark will return false if a value can be converted to true.
So if you add 2 of them, then it will give you the actual boolean that that value will be coerced to.
And while we're talking about logical operators, you should also know that a double ampersand is logical and, which ensures that all expressions in the condition will be converted to true.
And we also have logical or which returns true if at least one of the expressions is truthy.
Now, another thing you should know is that JavaScript provides 2 different equality operators.
Jot.
A double equal sign is called an abstract comparison, and it will try to make a type conversion before actually running the comparison.
That's pretty weird, so most linters will tell you to never use it.
You want answers.
I want the truth.
You can't handle the truth.
In contrast, the strict equality operator will check for equality on both the type and the value, which will give you much more predictable behavior.
When it comes to conditional logic, it can get pretty verbose if you use an if statement to define a variable.
But you'll commonly see this done with the ternary operator, which gives you a shorthand syntax for defining a variable based on an if else statement.
It has a logical condition on the left side, then a question mark, then the first value is what will be assigned if the condition is truthy, and the second value after the colon is the value if it's falsey.
Java.
Now before we leave the topic of Control Flow, it's also worth noting that JavaScript has a switch statement, which allows you to start with an expression and then compare it to multiple cases.
And and this can be a good alternative to if else statements if you have a lot of conditions to check.
And we can also wrap our code in a try catch statement, which will attempt to run the code in the try block, but if an error is thrown, then it will move to the catch block.
You can try this out yourself by using throw inside of the try block, and then you'll see that it runs the code inside of catch and provides that error that was thrown up above in try.
If an error is not thrown, then the code inside of catch will never be run.
And you can also add a finally block to the end of all this to run some code after both try and catch have been executed.
And finally, a full 6 and a half minutes into this video, we're ready for chapter 4, variables.
Jop.
We'll look at the difference between var let and const and also figure out what hoisting means.
Var allows you to initialize a variable, assign a value to it, and then also reassign a value to it later.
Now before you can really understand anything else about variables, you need to understand the execution context.
And this simply refers to the way your code is being interpreted.
Because your JavaScript program likely contains variables and functions defined all over the place, so the context defines the relationship between how your code Java's written to how it will be interpreted by the JavaScript engine.
We can define a variable anywhere in our script and that will be considered a global variable.
In other words, it's available in the global execution context.
That means if I have a function somewhere else in my code, I can still reference that variable.
I like to think of global as an imaginary function that wraps my script.
In other words, running a script is just like calling this imaginary global function.
And that means if we define additional functions in our code, we have a different execution context for defining variables.
For example, if we try to define a variable inside this function and then reference it in the global context will get a reference error because the local variable is not available in this context.
Now that's pretty straightforward, but there are a few pieces of weirdness that you need to be aware of.
If you assign a value to an undeclared variable, which you should really never do, it will jolly be assigned as a global variable even if it's done inside of an enclosing function.
And the other thing you need to know about is hoisting, which applies to variables, but also function declarations as well.
Now whenever JavaScript processes an execution context, it will basically put all the variables at the top, or in other words hoist them to the top of the context.
That means if we initialize a variable down here at the bottom and then reference it somewhere higher up in the code, it will still be considered declared within this scope.
But the actual assignment of a value will still happen wherever you define it in the code.
So if you want to keep your sanity, it's always a good idea to declare your variables at the top of the context.
But the bigger problem with var is that it becomes very hard to keep track of the scope of variables, and there can be a lot of name collisions as your app grows more complex.
Luckily, we no longer have to use var because in modern JavaScript, we have let and const.
Let is similar to var in most ways, but it's limited to the scope of a block statement.
That means if you define a variable inside of an if statement or a loop, it will be limited to that block.
And this differs from var, which would leak out into the parent scope.
J.
And also like var, variables defined with let can be reassigned to different values later in the code.
But in many cases, you'll have values that should never be reassigned.
This makes it a lot more difficult to accidentally override values in your code.
So when it comes to variables, a good rule to follow is to always use const, unless you absolutely know that you'll override that value later, in which case you can use let.
And you should respect the legacy of R, but just never use it.
John.
And with that, we're ready for chapter 5, functions.
Aren't you gonna say hello?
This course.
We'll have an entire video on functions, but there are a few basic things you should know.
So let's start by answering the question of what is a function.
And the answer is that it's simply a piece of code takes an input and produces an output when it's called.
You can use the function keyword as we're doing here, or you can use the more concise arrow syntax in modern JavaScript.
J.
If you omit braces, the code following the arrow will implicitly return a value, so you can define a function that returns something on a single line.
Java.
But as easy as that sounds, there's all kinds of complexity and terminology that goes along with functions.
So let's try to unpack some of the most important concepts that you should understand as a JS developer.
Java.
First of all, functions can be anonymous, or they can have a name, which will immediately follow the function keyword.
And you'll also commonly see anonymous functions assigned to the value of a variable.
Java.
And another thing you'll hear is that JavaScript supports higher order functions, and that means we can provide functions as the input or arguments to another function or as the return value from a function.
In the previous video, we talked about the JavaScript event loop and callbacks, and this is important with functions because you'll often use anonymous functions as arguments to other functions that will be called back JWT later after some asynchronous code is finished executing.
In addition, you can define new functions within a function.
In this example, the outer function is the one that wraps the inner function, John.
And that's related to a very important question that you'll hear in a lot of JavaScript interviews, what is a closure?
In the most simple sense, a closure is just a function within a function, where the inner function references a variable that was declared in the scope of the outer function.
Now what makes this special versus a lot of other programming images is that the variable in the outer function will be maintained in memory even after that function returns and is popped off the call stack.
So this means the inner function always has access to this state from the outer function at the time it was created.
In the code here, you can see we define a couple of variables in the outer function, j.
Then we operate on them and return them from the inner function and then expose the inner function by simply returning it.
And now because that outer function has Jot closed over the inner function.
We can call it and still have reference to the state in the outer function.
Even though we only called the outer function once, we still have access to its local variables.
Jot, and that's how you make a closure.
If you have experience with an object oriented programming language, a closure is very similar to a class instance, at least from a conceptual standpoint.
Because you have a function that contains some state, and then you have an inner function that can operate and change that state.
In the same way that a class instance has some properties, and then you have methods that can change those properties.
In fact, the class keyword in JavaScript is just syntactic sugar for functions and closures.
But we'll look at classes and object oriented programming in a future video because now we're ready for chapter 6, objects.
An object as just a data structure that allows you to associate a collection of key value pairs, which is similar to a map or a hash map in other languages.
J.
It's possible to instantiate an object and then add properties to it 1 by 1, but in most cases, you'll use the object literal syntax.
This allows you to define an object by simply enclosing your key value pairs inside of braces.
You can access the value of a key by using dot notation or with brackets and a string.
And you can mutate properties on an object even when it's defined as a const variable.
And it's also important to point out that functions can be used as values on an object.
Then inside a function, we can actually reference properties on this object by using this.
But what the hell is this?
This is one of the more challenging concepts to grasp in JavaScript.
Now remember earlier, I said that anything that's not a primitive value is an object, and this is just a keyword that refers to the current object that the code is operating in.
If you go into the browser console and say console log this, it's going to print out the window object.
That's because window is the global scope in browsers.
J.
When referenced by itself or if used in a function that's called normally, it will reference the global object.
That's easy enough, but what if we have our own custom object, and on that object we have 2 properties that define functions.
The first function uses the function keyword, but the second function uses the arrow syntax.
Now intuitively, you might think that these functions are exactly the same, but that's not the case.
In the first function, this refers to the object that it's defined on.
When it comes to the arrow function, it doesn't have its own bindings to this, which means it bypasses our custom function and this becomes the global object.
J.
Now the other thing you should know is that when you have a function, there are other ways to call it beyond just using parentheses.
For example, you can use its call method and then pass in the this context that you want to bind to the function.
Now any references that you have to this in the function will reference the object that you pass to call.
In the code here, we're calling this face in the function, but it's currently bound to the global object, which doesn't have a face property.
But if we pass in an object that does have a face property like a clown or a ghost, then it will return a defined value.
Understanding this will make you a better JavaScript developer, but it won't be something that you have to use on a daily basis.
And with that being said, I think we've covered enough information for one video.
And don't worry too much if that felt overwhelming.
We can't have anyone freak out out there, okay?
We've gotta keep our composure.
We've got too far.
There's too much to lose.
It's not just keep our composure.
We'll revisit many of these concepts when we look at the practical applications of functions, objects, and more.
I'm gonna go ahead and wrap things up there.
If this video helped you, please like and subscribe, and make sure to check out the full source code on Fireship IO.
Thanks for watching, and I will talk to you soon.

Speaker 0: Some people call JavaScript a virus. And if that's true, it means developers are the host. No matter what you label yourself as today, you have to face the reality that one day you may join the hordes of JavaScript developers out there. And when that day comes, you need to be prepared by understanding the practical and fundamental concepts of the JavaScript programming language. Java.

Today's video is not about victory, it's about survival. Welcome to Episode 3 of the Full JavaScript Jaws. In the last video, we looked at how JavaScript works under the hood. And today, we'll look at many of the fundamental features of a language as they relate to practical programming. But more importantly, I want to help you survive some of the weirder parts of JavaScript that might trip you up or that you might find on an interview question.

And many of these concepts like closures and hoisting can be easily understood by Removing the head or destroying the brain. Chapter 1. Where and how do I run my JavaScript code? Let's find out by creating a hello world app. Open up an editor like vscode, create a file called index dotjs, and type in console log hello world.

Now assuming you have Node. Js installed, you can run the script directly on your machine via the command line. We'll have an entire video dedicated to Node. Js later in the course, JOB. All you need to know for right now is that if you type in node index dotjs in the command line, it will execute the code in your script.

So you just wrote a back end server side JavaScript application. But J. But when most people think about JS, they're thinking about browsers and web applications. It's possible to run code in the browser just like we did from the command line by opening the developer console. In the previous video, we learned that JavaScript has an interpreter or JIT compiler to be precise that will execute your code when you type it in here.

But the browser console is really just a debugging tool. The way that web applications actually work is they declare a script tag in an HTML document. We can go ahead and create an index dot HTML file, then we'll add a script tag and set the source attribute to the JavaScript file. When the browser parses this HTML file, it's going to see the script tag and then try to load and execute the script. In our case, it won't execute the JavaScript until the document is fully loaded because we use this defer attribute.

This is useful because a lot of times your JavaScript will reference HTML elements in the body, which won't be available until the document is fully loaded. Now the big caveat here is that most developers are using frameworks, which will set up the script tag for you. But if you're doing any kind of web development, it's important to understand how script tags work. But now it's time to move on to chapter 2, primitives and objects, which are 2 of the lowest level building blocks in the language. There is a total of 7 primitive types in modern JavaScript with the most common ones being string, number, Boolean, null, and undefined.

John. A special characteristic of primitives is that they're immutable, which means their value can't be directly changed once they've been assigned to a variable. They can be reassigned to a different value, but they just can't be changed directly. And because JavaScript is a dynamic weekly type language, we don't actually use type annotations in our code. J, but we can use this type of operator to check a type at runtime if needed.

And just for those who are wondering, I'm using the Quoca plugin for Versus Code, which displays the output of my code on the right here in blue. J We'll look at these data types in more detail as we go through the video, but for right now you should know the difference between undefined and null. Undefined is the default default value that you'll see for a variable that doesn't have a value assigned to it or for a function that just returns nothing. Null is similar in the sense that it represents an empty value, but it's something that you, the developer, would assign explicitly. Now these primitive data types can be contrasted with the object type, which represents more complex data structures like arrays, objects, and functions.

The big difference is that objects can be seen as a collection of keys and values or properties, and they can be mutated after being assigned to a variable. So So the bottom line that you need to understand is that anything that's not a primitive type is going to inherit from object. That includes things like functions, arrays, or any class instances. Now, there's one other little piece of weirdness that you might encounter, and that is primitive wrapper objects. The reason I bring this up is because you may see these out there in the wild, and they allow you to jostly wrap a primitive type in a class instance.

But you should never really use them unless you have a good reason to. Chapter 3. Control flow and truthy versus falsy. In JavaScript, we can implement conditional logic with an if statement. If a condition is truthy, then we execute this block of code, else we execute this other block of code.

And we can also use else if if there are multiple conditions to check. But the more important thing to understand here is what is truthy and what is falsy in JavaScript. Because JavaScript will always try to coerce a value into a boolean when it's encountered inside of a conditional statement. True is obviously truthy, and anything that's an object is also truthy, even if it's an empty array or an empty object. The ones you have to watch out for are strings and numbers.

A string that has length will be truthy, but an empty string will be falsy. Then the number 0 will be falsy, but all other numbers will be truthy. And if you're ever unsure about a value, you can simply add a double bang in front of it to course it to a boolean yourself. Now, the reason this works is because the exclamation mark is a logical not operator. Jar.

A single exclamation mark will return false if a value can be converted to true. So if you add 2 of them, then it will give you the actual boolean that that value will be coerced to. And while we're talking about logical operators, you should also know that a double ampersand is logical and, which ensures that all expressions in the condition will be converted to true. And we also have logical or which returns true if at least one of the expressions is truthy. Now, another thing you should know is that JavaScript provides 2 different equality operators.

Jot. A double equal sign is called an abstract comparison, and it will try to make a type conversion before actually running the comparison. That's pretty weird, so most linters will tell you to never use it.

Speaker 1: You want answers. I want the truth. You can't handle the truth.

Speaker 0: In contrast, the strict equality operator will check for equality on both the type and the value, which will give you much more predictable behavior. When it comes to conditional logic, it can get pretty verbose if you use an if statement to define a variable. But you'll commonly see this done with the ternary operator, which gives you a shorthand syntax for defining a variable based on an if else statement. It has a logical condition on the left side, then a question mark, then the first value is what will be assigned if the condition is truthy, and the second value after the colon is the value if it's falsey. Java.

Now before we leave the topic of Control Flow, it's also worth noting that JavaScript has a switch statement, which allows you to start with an expression and then compare it to multiple cases. And and this can be a good alternative to if else statements if you have a lot of conditions to check. And we can also wrap our code in a try catch statement, which will attempt to run the code in the try block, but if an error is thrown, then it will move to the catch block. You can try this out yourself by using throw inside of the try block, and then you'll see that it runs the code inside of catch and provides that error that was thrown up above in try. If an error is not thrown, then the code inside of catch will never be run.

And you can also add a finally block to the end of all this to run some code after both try and catch have been executed. And finally, a full 6 and a half minutes into this video, we're ready for chapter 4, variables. Jop. We'll look at the difference between var let and const and also figure out what hoisting means. Var allows you to initialize a variable, assign a value to it, and then also reassign a value to it later.

Now before you can really understand anything else about variables, you need to understand the execution context. And this simply refers to the way your code is being interpreted. Because your JavaScript program likely contains variables and functions defined all over the place, so the context defines the relationship between how your code Java's written to how it will be interpreted by the JavaScript engine. We can define a variable anywhere in our script and that will be considered a global variable. In other words, it's available in the global execution context.

That means if I have a function somewhere else in my code, I can still reference that variable. I like to think of global as an imaginary function that wraps my script. In other words, running a script is just like calling this imaginary global function. And that means if we define additional functions in our code, we have a different execution context for defining variables. For example, if we try to define a variable inside this function and then reference it in the global context will get a reference error because the local variable is not available in this context.

Now that's pretty straightforward, but there are a few pieces of weirdness that you need to be aware of. If you assign a value to an undeclared variable, which you should really never do, it will jolly be assigned as a global variable even if it's done inside of an enclosing function. And the other thing you need to know about is hoisting, which applies to variables, but also function declarations as well. Now whenever JavaScript processes an execution context, it will basically put all the variables at the top, or in other words hoist them to the top of the context. That means if we initialize a variable down here at the bottom and then reference it somewhere higher up in the code, it will still be considered declared within this scope.

But the actual assignment of a value will still happen wherever you define it in the code. So if you want to keep your sanity, it's always a good idea to declare your variables at the top of the context. But the bigger problem with var is that it becomes very hard to keep track of the scope of variables, and there can be a lot of name collisions as your app grows more complex. Luckily, we no longer have to use var because in modern JavaScript, we have let and const. Let is similar to var in most ways, but it's limited to the scope of a block statement.

That means if you define a variable inside of an if statement or a loop, it will be limited to that block. And this differs from var, which would leak out into the parent scope. J. And also like var, variables defined with let can be reassigned to different values later in the code. But in many cases, you'll have values that should never be reassigned.

This makes it a lot more difficult to accidentally override values in your code. So when it comes to variables, a good rule to follow is to always use const, unless you absolutely know that you'll override that value later, in which case you can use let. And you should respect the legacy of R, but just never use it. John. And with that, we're ready for chapter 5, functions.

Aren't you gonna say hello? This course. We'll have an entire video on functions, but there are a few basic things you should know. So let's start by answering the question of what is a function. And the answer is that it's simply a piece of code takes an input and produces an output when it's called.

You can use the function keyword as we're doing here, or you can use the more concise arrow syntax in modern JavaScript. J. If you omit braces, the code following the arrow will implicitly return a value, so you can define a function that returns something on a single line. Java. But as easy as that sounds, there's all kinds of complexity and terminology that goes along with functions.

So let's try to unpack some of the most important concepts that you should understand as a JS developer. Java. First of all, functions can be anonymous, or they can have a name, which will immediately follow the function keyword. And you'll also commonly see anonymous functions assigned to the value of a variable. Java.

And another thing you'll hear is that JavaScript supports higher order functions, and that means we can provide functions as the input or arguments to another function or as the return value from a function. In the previous video, we talked about the JavaScript event loop and callbacks, and this is important with functions because you'll often use anonymous functions as arguments to other functions that will be called back JWT later after some asynchronous code is finished executing. In addition, you can define new functions within a function. In this example, the outer function is the one that wraps the inner function, John. And that's related to a very important question that you'll hear in a lot of JavaScript interviews, what is a closure?

In the most simple sense, a closure is just a function within a function, where the inner function references a variable that was declared in the scope of the outer function. Now what makes this special versus a lot of other programming images is that the variable in the outer function will be maintained in memory even after that function returns and is popped off the call stack. So this means the inner function always has access to this state from the outer function at the time it was created. In the code here, you can see we define a couple of variables in the outer function, j. Then we operate on them and return them from the inner function and then expose the inner function by simply returning it.

And now because that outer function has Jot closed over the inner function. We can call it and still have reference to the state in the outer function. Even though we only called the outer function once, we still have access to its local variables. Jot, and that's how you make a closure. If you have experience with an object oriented programming language, a closure is very similar to a class instance, at least from a conceptual standpoint.

Because you have a function that contains some state, and then you have an inner function that can operate and change that state. In the same way that a class instance has some properties, and then you have methods that can change those properties. In fact, the class keyword in JavaScript is just syntactic sugar for functions and closures. But we'll look at classes and object oriented programming in a future video because now we're ready for chapter 6, objects. An object as just a data structure that allows you to associate a collection of key value pairs, which is similar to a map or a hash map in other languages.

J. It's possible to instantiate an object and then add properties to it 1 by 1, but in most cases, you'll use the object literal syntax. This allows you to define an object by simply enclosing your key value pairs inside of braces. You can access the value of a key by using dot notation or with brackets and a string. And you can mutate properties on an object even when it's defined as a const variable.

And it's also important to point out that functions can be used as values on an object. Then inside a function, we can actually reference properties on this object by using this. But what the hell is this? This is one of the more challenging concepts to grasp in JavaScript. Now remember earlier, I said that anything that's not a primitive value is an object, and this is just a keyword that refers to the current object that the code is operating in.

If you go into the browser console and say console log this, it's going to print out the window object. That's because window is the global scope in browsers. J. When referenced by itself or if used in a function that's called normally, it will reference the global object. That's easy enough, but what if we have our own custom object, and on that object we have 2 properties that define functions.

The first function uses the function keyword, but the second function uses the arrow syntax. Now intuitively, you might think that these functions are exactly the same, but that's not the case. In the first function, this refers to the object that it's defined on. When it comes to the arrow function, it doesn't have its own bindings to this, which means it bypasses our custom function and this becomes the global object. J.

Now the other thing you should know is that when you have a function, there are other ways to call it beyond just using parentheses. For example, you can use its call method and then pass in the this context that you want to bind to the function. Now any references that you have to this in the function will reference the object that you pass to call. In the code here, we're calling this face in the function, but it's currently bound to the global object, which doesn't have a face property. But if we pass in an object that does have a face property like a clown or a ghost, then it will return a defined value.

Understanding this will make you a better JavaScript developer, but it won't be something that you have to use on a daily basis. And with that being said, I think we've covered enough information for one video. And don't worry too much if that felt overwhelming.

Speaker 1: We can't have anyone freak out out there, okay? We've gotta keep our composure. We've got too far. There's too much to lose. It's not just keep our composure.

Speaker 0: We'll revisit many of these concepts when we look at the practical applications of functions, objects, and more. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe, and make sure to check out the full source code on Fireship IO. Thanks for watching, and I will talk to you soon.
Some people call JavaScript a virus. And if that's true, it means developers are the host. No matter what you label yourself as today, you have to face the reality that one day you may join the hordes of JavaScript developers out there. And when that day comes, you need to be prepared by understanding the practical and fundamental concepts of the JavaScript programming language. Java. Today's video is not about victory, it's about survival. Welcome to Episode 3 of the Full JavaScript Jaws. In the last video, we looked at how JavaScript works under the hood. And today, we'll look at many of the fundamental features of a language as they relate to practical programming. But more importantly, I want to help you survive some of the weirder parts of JavaScript that might trip you up or that you might find on an interview question. And many of these concepts like closures and hoisting can be easily understood by Removing the head or destroying the brain. Chapter 1. Where and how do I run my JavaScript code? Let's find out by creating a hello world app. Open up an editor like vscode, create a file called index dotjs, and type in console log hello world. Now assuming you have Node. Js installed, you can run the script directly on your machine via the command line. We'll have an entire video dedicated to Node. Js later in the course, JOB. All you need to know for right now is that if you type in node index dotjs in the command line, it will execute the code in your script.
So you just wrote a back end server side JavaScript application. But J. But when most people think about JS, they're thinking about browsers and web applications. It's possible to run code in the browser just like we did from the command line by opening the developer console. In the previous video, we learned that JavaScript has an interpreter or JIT compiler to be precise that will execute your code when you type it in here. But the browser console is really just a debugging tool.
programming
The way that web applications actually work is they declare a script tag in an HTML document. We can go ahead and create an index dot HTML file, then we'll add a script tag and set the source attribute to the JavaScript file. When the browser parses this HTML file, it's going to see the script tag and then try to load and execute the script. In our case, it won't execute the JavaScript until the document is fully loaded because we use this defer attribute. This is useful because a lot of times your JavaScript will reference HTML elements in the body, which won't be available until the document is fully loaded. Now the big caveat here is that most developers are using frameworks, which will set up the script tag for you. But if you're doing any kind of web development, it's important to understand how script tags work. But now it's time to move on to chapter 2, primitives and objects, which are 2 of the lowest level building blocks in the language. There is a total of 7 primitive types in modern JavaScript with the most common ones being string, number, Boolean, null, and undefined. John. A special characteristic of primitives is that they're immutable, which means their value can't be directly changed once they've been assigned to a variable. They can be reassigned to a different value, but they just can't be changed directly. And because JavaScript is a dynamic weekly type language, we don't actually use type annotations in our code. J, but we can use this type of operator to check a type at runtime if needed. And just for those who are wondering, I'm using the Quoca plugin for Versus Code, which displays the output of my code on the right here in blue. J We'll look at these data types in more detail as we go through the video, but for right now you should know the difference between undefined and null. Undefined is the default default value that you'll see for a variable that doesn't have a value assigned to it or for a function that just returns nothing. Null is similar in the sense that it represents an empty value, but it's something that you, the developer, would assign explicitly. Now these primitive data types can be contrasted with the object type, which represents more complex data structures like arrays, objects, and functions. The big difference is that objects can be seen as a collection of keys and values or properties, and they can be mutated after being assigned to a variable. So So the bottom line that you need to understand is that anything that's not a primitive type is going to inherit from object. That includes things like functions, arrays, or any class instances. Now, there's one other little piece of weirdness that you might encounter, and that is primitive wrapper objects. The reason I bring this up is because you may see these out there in the wild, and they allow you to jostly wrap a primitive type in a class instance.
But you should never really use them unless you have a good reason to. Chapter 3. Control flow and truthy versus falsy. In JavaScript, we can implement conditional logic with an if statement. If a condition is truthy, then we execute this block of code, else we execute this other block of code. And we can also use else if if there are multiple conditions to check. But the more important thing to understand here is what is truthy and what is falsy in JavaScript. Because JavaScript will always try to coerce a value into a boolean when it's encountered inside of a conditional statement. True is obviously truthy, and anything that's an object is also truthy, even if it's an empty array or an empty object. The ones you have to watch out for are strings and numbers. A string that has length will be truthy, but an empty string will be falsy. Then the number 0 will be falsy, but all other numbers will be truthy. And if you're ever unsure about a value, you can simply add a double bang in front of it to course it to a boolean yourself. Now, the reason this works is because the exclamation mark is a logical not operator. Jar. A single exclamation mark will return false if a value can be converted to true. So if you add 2 of them, then it will give you the actual boolean that that value will be coerced to. And while we're talking about logical operators, you should also know that a double ampersand is logical and, which ensures that all expressions in the condition will be converted to true. And we also have logical or which returns true if at least one of the expressions is truthy. Now, another thing you should know is that JavaScript provides 2 different equality operators. Jot. A double equal sign is called an abstract comparison, and it will try to make a type conversion before actually running the comparison. That's pretty weird, so most linters will tell you to never use it. You want answers. I want the truth. You can't handle the truth. In contrast, the strict equality operator will check for equality on both the type and the value, which will give you much more predictable behavior. When it comes to conditional logic, it can get pretty verbose if you use an if statement to define a variable. But you'll commonly see this done with the ternary operator, which gives you a shorthand syntax for defining a variable based on an if else statement. It has a logical condition on the left side, then a question mark, then the first value is what will be assigned if the condition is truthy, and the second value after the colon is the value if it's falsey. Java. Now before we leave the topic of Control Flow, it's also worth noting that JavaScript has a switch statement, which allows you to start with an expression and then compare it to multiple cases.
logic
logical reasoning
And and this can be a good alternative to if else statements if you have a lot of conditions to check. And we can also wrap our code in a try catch statement, which will attempt to run the code in the try block, but if an error is thrown, then it will move to the catch block.
logic
You can try this out yourself by using throw inside of the try block, and then you'll see that it runs the code inside of catch and provides that error that was thrown up above in try. If an error is not thrown, then the code inside of catch will never be run. And you can also add a finally block to the end of all this to run some code after both try and catch have been executed. And finally, a full 6 and a half minutes into this video, we're ready for chapter 4, variables. Jop. We'll look at the difference between var let and const and also figure out what hoisting means.
Var allows you to initialize a variable, assign a value to it, and then also reassign a value to it later. Now before you can really understand anything else about variables, you need to understand the execution context. And this simply refers to the way your code is being interpreted.
programming
Because your JavaScript program likely contains variables and functions defined all over the place, so the context defines the relationship between how your code Java's written to how it will be interpreted by the JavaScript engine. We can define a variable anywhere in our script and that will be considered a global variable. In other words, it's available in the global execution context. That means if I have a function somewhere else in my code, I can still reference that variable. I like to think of global as an imaginary function that wraps my script.
In other words, running a script is just like calling this imaginary global function. And that means if we define additional functions in our code, we have a different execution context for defining variables. For example, if we try to define a variable inside this function and then reference it in the global context will get a reference error because the local variable is not available in this context.
programming
Now that's pretty straightforward, but there are a few pieces of weirdness that you need to be aware of. If you assign a value to an undeclared variable, which you should really never do, it will jolly be assigned as a global variable even if it's done inside of an enclosing function. And the other thing you need to know about is hoisting, which applies to variables, but also function declarations as well. Now whenever JavaScript processes an execution context, it will basically put all the variables at the top, or in other words hoist them to the top of the context. That means if we initialize a variable down here at the bottom and then reference it somewhere higher up in the code, it will still be considered declared within this scope. But the actual assignment of a value will still happen wherever you define it in the code. So if you want to keep your sanity, it's always a good idea to declare your variables at the top of the context. But the bigger problem with var is that it becomes very hard to keep track of the scope of variables, and there can be a lot of name collisions as your app grows more complex. Luckily, we no longer have to use var because in modern JavaScript, we have let and const. Let is similar to var in most ways, but it's limited to the scope of a block statement. That means if you define a variable inside of an if statement or a loop, it will be limited to that block. And this differs from var, which would leak out into the parent scope. J. And also like var, variables defined with let can be reassigned to different values later in the code. But in many cases, you'll have values that should never be reassigned.
This makes it a lot more difficult to accidentally override values in your code. So when it comes to variables, a good rule to follow is to always use const, unless you absolutely know that you'll override that value later, in which case you can use let. And you should respect the legacy of R, but just never use it.
logic
John. And with that, we're ready for chapter 5, functions. Aren't you gonna say hello?
This course. We'll have an entire video on functions, but there are a few basic things you should know. So let's start by answering the question of what is a function. And the answer is that it's simply a piece of code takes an input and produces an output when it's called. You can use the function keyword as we're doing here, or you can use the more concise arrow syntax in modern JavaScript. J. If you omit braces, the code following the arrow will implicitly return a value, so you can define a function that returns something on a single line.
programming
Java. But as easy as that sounds, there's all kinds of complexity and terminology that goes along with functions. So let's try to unpack some of the most important concepts that you should understand as a JS developer. Java. First of all, functions can be anonymous, or they can have a name, which will immediately follow the function keyword. And you'll also commonly see anonymous functions assigned to the value of a variable. Java. And another thing you'll hear is that JavaScript supports higher order functions, and that means we can provide functions as the input or arguments to another function or as the return value from a function. In the previous video, we talked about the JavaScript event loop and callbacks, and this is important with functions because you'll often use anonymous functions as arguments to other functions that will be called back JWT later after some asynchronous code is finished executing. In addition, you can define new functions within a function. In this example, the outer function is the one that wraps the inner function, John. And that's related to a very important question that you'll hear in a lot of JavaScript interviews, what is a closure? In the most simple sense, a closure is just a function within a function, where the inner function references a variable that was declared in the scope of the outer function. Now what makes this special versus a lot of other programming images is that the variable in the outer function will be maintained in memory even after that function returns and is popped off the call stack. So this means the inner function always has access to this state from the outer function at the time it was created. In the code here, you can see we define a couple of variables in the outer function, j.
Then we operate on them and return them from the inner function and then expose the inner function by simply returning it. And now because that outer function has Jot closed over the inner function. We can call it and still have reference to the state in the outer function.
operations
Even though we only called the outer function once, we still have access to its local variables. Jot, and that's how you make a closure. If you have experience with an object oriented programming language, a closure is very similar to a class instance, at least from a conceptual standpoint. Because you have a function that contains some state, and then you have an inner function that can operate and change that state. In the same way that a class instance has some properties, and then you have methods that can change those properties. In fact, the class keyword in JavaScript is just syntactic sugar for functions and closures. But we'll look at classes and object oriented programming in a future video because now we're ready for chapter 6, objects. An object as just a data structure that allows you to associate a collection of key value pairs, which is similar to a map or a hash map in other languages. J. It's possible to instantiate an object and then add properties to it 1 by 1, but in most cases, you'll use the object literal syntax. This allows you to define an object by simply enclosing your key value pairs inside of braces. You can access the value of a key by using dot notation or with brackets and a string. And you can mutate properties on an object even when it's defined as a const variable. And it's also important to point out that functions can be used as values on an object. Then inside a function, we can actually reference properties on this object by using this. But what the hell is this? This is one of the more challenging concepts to grasp in JavaScript. Now remember earlier, I said that anything that's not a primitive value is an object, and this is just a keyword that refers to the current object that the code is operating in. If you go into the browser console and say console log this, it's going to print out the window object. That's because window is the global scope in browsers. J. When referenced by itself or if used in a function that's called normally, it will reference the global object. That's easy enough, but what if we have our own custom object, and on that object we have 2 properties that define functions. The first function uses the function keyword, but the second function uses the arrow syntax. Now intuitively, you might think that these functions are exactly the same, but that's not the case. In the first function, this refers to the object that it's defined on. When it comes to the arrow function, it doesn't have its own bindings to this, which means it bypasses our custom function and this becomes the global object. J. Now the other thing you should know is that when you have a function, there are other ways to call it beyond just using parentheses. For example, you can use its call method and then pass in the this context that you want to bind to the function. Now any references that you have to this in the function will reference the object that you pass to call. In the code here, we're calling this face in the function, but it's currently bound to the global object, which doesn't have a face property. But if we pass in an object that does have a face property like a clown or a ghost, then it will return a defined value. Understanding this will make you a better JavaScript developer, but it won't be something that you have to use on a daily basis. And with that being said, I think we've covered enough information for one video. And don't worry too much if that felt overwhelming. We can't have anyone freak out out there, okay? We've gotta keep our composure. We've got too far. There's too much to lose. It's not just keep our composure. We'll revisit many of these concepts when we look at the practical applications of functions, objects, and more.
I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe, and make sure to check out the full source code on Fireship IO. Thanks for watching, and I will talk to you soon.
streaming
video gaming
youtube
Some people call JavaScript a virus. And if that's true, it means developers are the host. No matter what you label yourself as today, you have to face the reality that one day you may join the hordes of JavaScript developers out there. And when that day comes, you need to be prepared by understanding the practical and fundamental concepts of the JavaScript programming language. Java. Today's video is not about victory, it's about survival. Welcome to Episode 3 of the Full JavaScript Jaws. In the last video, we looked at how JavaScript works under the hood. And today, we'll look at many of the fundamental features of a language as they relate to practical programming. But more importantly, I want to help you survive some of the weirder parts of JavaScript that might trip you up or that you might find on an interview question. And many of these concepts like closures and hoisting can be easily understood by Removing the head or destroying the brain. Chapter 1. Where and how do I run my JavaScript code? Let's find out by creating a hello world app. Open up an editor like vscode, create a file called index dotjs, and type in console log hello world. Now assuming you have Node. Js installed, you can run the script directly on your machine via the command line. We'll have an entire video dedicated to Node. Js later in the course, JOB. All you need to know for right now is that if you type in node index dotjs in the command line, it will execute the code in your script. So you just wrote a back end server side JavaScript application. But J. But when most people think about JS, they're thinking about browsers and web applications. It's possible to run code in the browser just like we did from the command line by opening the developer console. In the previous video, we learned that JavaScript has an interpreter or JIT compiler to be precise that will execute your code when you type it in here. But the browser console is really just a debugging tool. The way that web applications actually work is they declare a script tag in an HTML document. We can go ahead and create an index dot HTML file, then we'll add a script tag and set the source attribute to the JavaScript file. When the browser parses this HTML file, it's going to see the script tag and then try to load and execute the script. In our case, it won't execute the JavaScript until the document is fully loaded because we use this defer attribute. This is useful because a lot of times your JavaScript will reference HTML elements in the body, which won't be available until the document is fully loaded. Now the big caveat here is that most developers are using frameworks, which will set up the script tag for you. But if you're doing any kind of web development, it's important to understand how script tags work. But now it's time to move on to chapter 2, primitives and objects, which are 2 of the lowest level building blocks in the language. There is a total of 7 primitive types in modern JavaScript with the most common ones being string, number, Boolean, null, and undefined. John. A special characteristic of primitives is that they're immutable, which means their value can't be directly changed once they've been assigned to a variable. They can be reassigned to a different value, but they just can't be changed directly. And because JavaScript is a dynamic weekly type language, we don't actually use type annotations in our code. J, but we can use this type of operator to check a type at runtime if needed. And just for those who are wondering, I'm using the Quoca plugin for Versus Code, which displays the output of my code on the right here in blue. J We'll look at these data types in more detail as we go through the video, but for right now you should know the difference between undefined and null. Undefined is the default default value that you'll see for a variable that doesn't have a value assigned to it or for a function that just returns nothing. Null is similar in the sense that it represents an empty value, but it's something that you, the developer, would assign explicitly. Now these primitive data types can be contrasted with the object type, which represents more complex data structures like arrays, objects, and functions. The big difference is that objects can be seen as a collection of keys and values or properties, and they can be mutated after being assigned to a variable. So So the bottom line that you need to understand is that anything that's not a primitive type is going to inherit from object. That includes things like functions, arrays, or any class instances. Now, there's one other little piece of weirdness that you might encounter, and that is primitive wrapper objects. The reason I bring this up is because you may see these out there in the wild, and they allow you to jostly wrap a primitive type in a class instance. But you should never really use them unless you have a good reason to. Chapter 3. Control flow and truthy versus falsy. In JavaScript, we can implement conditional logic with an if statement. If a condition is truthy, then we execute this block of code, else we execute this other block of code. And we can also use else if if there are multiple conditions to check. But the more important thing to understand here is what is truthy and what is falsy in JavaScript. Because JavaScript will always try to coerce a value into a boolean when it's encountered inside of a conditional statement. True is obviously truthy, and anything that's an object is also truthy, even if it's an empty array or an empty object. The ones you have to watch out for are strings and numbers. A string that has length will be truthy, but an empty string will be falsy. Then the number 0 will be falsy, but all other numbers will be truthy. And if you're ever unsure about a value, you can simply add a double bang in front of it to course it to a boolean yourself. Now, the reason this works is because the exclamation mark is a logical not operator. Jar. A single exclamation mark will return false if a value can be converted to true. So if you add 2 of them, then it will give you the actual boolean that that value will be coerced to. And while we're talking about logical operators, you should also know that a double ampersand is logical and, which ensures that all expressions in the condition will be converted to true. And we also have logical or which returns true if at least one of the expressions is truthy. Now, another thing you should know is that JavaScript provides 2 different equality operators. Jot. A double equal sign is called an abstract comparison, and it will try to make a type conversion before actually running the comparison. That's pretty weird, so most linters will tell you to never use it. You want answers. I want the truth. You can't handle the truth. In contrast, the strict equality operator will check for equality on both the type and the value, which will give you much more predictable behavior. When it comes to conditional logic, it can get pretty verbose if you use an if statement to define a variable. But you'll commonly see this done with the ternary operator, which gives you a shorthand syntax for defining a variable based on an if else statement. It has a logical condition on the left side, then a question mark, then the first value is what will be assigned if the condition is truthy, and the second value after the colon is the value if it's falsey. Java. Now before we leave the topic of Control Flow, it's also worth noting that JavaScript has a switch statement, which allows you to start with an expression and then compare it to multiple cases. And and this can be a good alternative to if else statements if you have a lot of conditions to check. And we can also wrap our code in a try catch statement, which will attempt to run the code in the try block, but if an error is thrown, then it will move to the catch block. You can try this out yourself by using throw inside of the try block, and then you'll see that it runs the code inside of catch and provides that error that was thrown up above in try. If an error is not thrown, then the code inside of catch will never be run. And you can also add a finally block to the end of all this to run some code after both try and catch have been executed. And finally, a full 6 and a half minutes into this video, we're ready for chapter 4, variables. Jop. We'll look at the difference between var let and const and also figure out what hoisting means. Var allows you to initialize a variable, assign a value to it, and then also reassign a value to it later. Now before you can really understand anything else about variables, you need to understand the execution context. And this simply refers to the way your code is being interpreted. Because your JavaScript program likely contains variables and functions defined all over the place, so the context defines the relationship between how your code Java's written to how it will be interpreted by the JavaScript engine. We can define a variable anywhere in our script and that will be considered a global variable. In other words, it's available in the global execution context. That means if I have a function somewhere else in my code, I can still reference that variable. I like to think of global as an imaginary function that wraps my script. In other words, running a script is just like calling this imaginary global function. And that means if we define additional functions in our code, we have a different execution context for defining variables. For example, if we try to define a variable inside this function and then reference it in the global context will get a reference error because the local variable is not available in this context. Now that's pretty straightforward, but there are a few pieces of weirdness that you need to be aware of. If you assign a value to an undeclared variable, which you should really never do, it will jolly be assigned as a global variable even if it's done inside of an enclosing function. And the other thing you need to know about is hoisting, which applies to variables, but also function declarations as well. Now whenever JavaScript processes an execution context, it will basically put all the variables at the top, or in other words hoist them to the top of the context. That means if we initialize a variable down here at the bottom and then reference it somewhere higher up in the code, it will still be considered declared within this scope. But the actual assignment of a value will still happen wherever you define it in the code. So if you want to keep your sanity, it's always a good idea to declare your variables at the top of the context. But the bigger problem with var is that it becomes very hard to keep track of the scope of variables, and there can be a lot of name collisions as your app grows more complex. Luckily, we no longer have to use var because in modern JavaScript, we have let and const. Let is similar to var in most ways, but it's limited to the scope of a block statement. That means if you define a variable inside of an if statement or a loop, it will be limited to that block. And this differs from var, which would leak out into the parent scope. J. And also like var, variables defined with let can be reassigned to different values later in the code. But in many cases, you'll have values that should never be reassigned. This makes it a lot more difficult to accidentally override values in your code. So when it comes to variables, a good rule to follow is to always use const, unless you absolutely know that you'll override that value later, in which case you can use let. And you should respect the legacy of R, but just never use it. John. And with that, we're ready for chapter 5, functions. Aren't you gonna say hello? This course. We'll have an entire video on functions, but there are a few basic things you should know. So let's start by answering the question of what is a function. And the answer is that it's simply a piece of code takes an input and produces an output when it's called. You can use the function keyword as we're doing here, or you can use the more concise arrow syntax in modern JavaScript. J. If you omit braces, the code following the arrow will implicitly return a value, so you can define a function that returns something on a single line. Java. But as easy as that sounds, there's all kinds of complexity and terminology that goes along with functions. So let's try to unpack some of the most important concepts that you should understand as a JS developer. Java. First of all, functions can be anonymous, or they can have a name, which will immediately follow the function keyword. And you'll also commonly see anonymous functions assigned to the value of a variable. Java. And another thing you'll hear is that JavaScript supports higher order functions, and that means we can provide functions as the input or arguments to another function or as the return value from a function. In the previous video, we talked about the JavaScript event loop and callbacks, and this is important with functions because you'll often use anonymous functions as arguments to other functions that will be called back JWT later after some asynchronous code is finished executing. In addition, you can define new functions within a function. In this example, the outer function is the one that wraps the inner function, John. And that's related to a very important question that you'll hear in a lot of JavaScript interviews, what is a closure? In the most simple sense, a closure is just a function within a function, where the inner function references a variable that was declared in the scope of the outer function. Now what makes this special versus a lot of other programming images is that the variable in the outer function will be maintained in memory even after that function returns and is popped off the call stack. So this means the inner function always has access to this state from the outer function at the time it was created. In the code here, you can see we define a couple of variables in the outer function, j. Then we operate on them and return them from the inner function and then expose the inner function by simply returning it. And now because that outer function has Jot closed over the inner function. We can call it and still have reference to the state in the outer function. Even though we only called the outer function once, we still have access to its local variables. Jot, and that's how you make a closure. If you have experience with an object oriented programming language, a closure is very similar to a class instance, at least from a conceptual standpoint. Because you have a function that contains some state, and then you have an inner function that can operate and change that state. In the same way that a class instance has some properties, and then you have methods that can change those properties. In fact, the class keyword in JavaScript is just syntactic sugar for functions and closures. But we'll look at classes and object oriented programming in a future video because now we're ready for chapter 6, objects. An object as just a data structure that allows you to associate a collection of key value pairs, which is similar to a map or a hash map in other languages. J. It's possible to instantiate an object and then add properties to it 1 by 1, but in most cases, you'll use the object literal syntax. This allows you to define an object by simply enclosing your key value pairs inside of braces. You can access the value of a key by using dot notation or with brackets and a string. And you can mutate properties on an object even when it's defined as a const variable. And it's also important to point out that functions can be used as values on an object. Then inside a function, we can actually reference properties on this object by using this. But what the hell is this? This is one of the more challenging concepts to grasp in JavaScript. Now remember earlier, I said that anything that's not a primitive value is an object, and this is just a keyword that refers to the current object that the code is operating in. If you go into the browser console and say console log this, it's going to print out the window object. That's because window is the global scope in browsers. J. When referenced by itself or if used in a function that's called normally, it will reference the global object. That's easy enough, but what if we have our own custom object, and on that object we have 2 properties that define functions. The first function uses the function keyword, but the second function uses the arrow syntax. Now intuitively, you might think that these functions are exactly the same, but that's not the case. In the first function, this refers to the object that it's defined on. When it comes to the arrow function, it doesn't have its own bindings to this, which means it bypasses our custom function and this becomes the global object. J. Now the other thing you should know is that when you have a function, there are other ways to call it beyond just using parentheses. For example, you can use its call method and then pass in the this context that you want to bind to the function. Now any references that you have to this in the function will reference the object that you pass to call. In the code here, we're calling this face in the function, but it's currently bound to the global object, which doesn't have a face property. But if we pass in an object that does have a face property like a clown or a ghost, then it will return a defined value. Understanding this will make you a better JavaScript developer, but it won't be something that you have to use on a daily basis. And with that being said, I think we've covered enough information for one video. And don't worry too much if that felt overwhelming. We can't have anyone freak out out there, okay? We've gotta keep our composure. We've got too far. There's too much to lose. It's not just keep our composure. We'll revisit many of these concepts when we look at the practical applications of functions, objects, and more. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe, and make sure to check out the full source code on Fireship IO. Thanks for watching, and I will talk to you soon.
Some
some
people
people
call
call
JavaScript
javascript
a
a
virus.
virus
And
and
if
if
that's
that's
true,
true
it
it
means
means
developers
developers
are
are
the
the
host.
host
No
no
matter
matter
what
what
you
you
label
label
yourself
yourself
as
as
today,
today
you
you
have
have
to
to
face
face
the
the
reality
reality
that
that
one
one
day
day
you
you
may
may
join
join
the
the
hordes
hordes
of
of
JavaScript
javascript
developers
developers
out
out
there.
there
And
and
when
when
that
that
day
day
comes,
comes
you
you
need
need
to
to
be
be
prepared
prepared
by
by
understanding
understanding
the
the
practical
practical
and
and
fundamental
fundamental
concepts
concepts
of
of
the
the
JavaScript
javascript
programming
programming
language.
language
Java.
java
Today's
today's
video
video
is
is
not
not
about
about
victory,
victory
it's
it's
about
about
survival.
survival
Welcome
welcome
to
to
Episode
episode
3
3
of
of
the
the
Full
full
JavaScript
javascript
Jaws.
jaws
In
in
the
the
last
last
video,
video
we
we
looked
looked
at
at
how
how
JavaScript
javascript
works
works
under
under
the
the
hood.
hood
And
and
today,
today
we'll
we'll
look
look
at
at
many
many
of
of
the
the
fundamental
fundamental
features
features
of
of
a
a
language
language
as
as
they
they
relate
relate
to
to
practical
practical
programming.
programming
But
but
more
more
importantly,
importantly
I
i
want
want
to
to
help
help
you
you
survive
survive
some
some
of
of
the
the
weirder
weirder
parts
parts
of
of
JavaScript
javascript
that
that
might
might
trip
trip
you
you
up
up
or
or
that
that
you
you
might
might
find
find
on
on
an
an
interview
interview
question.
question
And
and
many
many
of
of
these
these
concepts
concepts
like
like
closures
closures
and
and
hoisting
hoisting
can
can
be
be
easily
easily
understood
understood
by
by
Removing
removing
the
the
head
head
or
or
destroying
destroying
the
the
brain.
brain
Chapter
chapter
1.
1
Where
where
and
and
how
how
do
do
I
i
run
run
my
my
JavaScript
javascript
code?
code
Let's
let's
find
find
out
out
by
by
creating
creating
a
a
hello
hello
world
world
app.
app
Open
open
up
up
an
an
editor
editor
like
like
vscode,
vscode
create
create
a
a
file
file
called
called
index
index
dotjs,
dotjs
and
and
type
type
in
in
console
console
log
log
hello
hello
world.
world
Now
now
assuming
assuming
you
you
have
have
Node.
node
Js
js
installed,
installed
you
you
can
can
run
run
the
the
script
script
directly
directly
on
on
your
your
machine
machine
via
via
the
the
command
command
line.
line
We'll
we'll
have
have
an
an
entire
entire
video
video
dedicated
dedicated
to
to
Node.
node
Js
js
later
later
in
in
the
the
course,
course
JOB.
job
All
all
you
you
need
need
to
to
know
know
for
for
right
right
now
now
is
is
that
that
if
if
you
you
type
type
in
in
node
node
index
index
dotjs
dotjs
in
in
the
the
command
command
line,
line
it
it
will
will
execute
execute
the
the
code
code
in
in
your
your
script.
script
So
so
you
you
just
just
wrote
wrote
a
a
back
back
end
end
server
server
side
side
JavaScript
javascript
application.
application
But
but
J.
j
But
but
when
when
most
most
people
people
think
think
about
about
JS,
js
they're
they're
thinking
thinking
about
about
browsers
browsers
and
and
web
web
applications.
applications
It's
it's
possible
possible
to
to
run
run
code
code
in
in
the
the
browser
browser
just
just
like
like
we
we
did
did
from
from
the
the
command
command
line
line
by
by
opening
opening
the
the
developer
developer
console.
console
In
in
the
the
previous
previous
video,
video
we
we
learned
learned
that
that
JavaScript
javascript
has
has
an
an
interpreter
interpreter
or
or
JIT
jit
compiler
compiler
to
to
be
be
precise
precise
that
that
will
will
execute
execute
your
your
code
code
when
when
you
you
type
type
it
it
in
in
here.
here
But
but
the
the
browser
browser
console
console
is
is
really
really
just
just
a
a
debugging
debugging
tool.
tool
The
the
way
way
that
that
web
web
applications
applications
actually
actually
work
work
is
is
they
they
declare
declare
a
a
script
script
tag
tag
in
in
an
an
HTML
html
document.
document
We
we
can
can
go
go
ahead
ahead
and
and
create
create
an
an
index
index
dot
dot
HTML
html
file,
file
then
then
we'll
we'll
add
add
a
a
script
script
tag
tag
and
and
set
set
the
the
source
source
attribute
attribute
to
to
the
the
JavaScript
javascript
file.
file
When
when
the
the
browser
browser
parses
parses
this
this
HTML
html
file,
file
it's
it's
going
going
to
to
see
see
the
the
script
script
tag
tag
and
and
then
then
try
try
to
to
load
load
and
and
execute
execute
the
the
script.
script
In
in
our
our
case,
case
it
it
won't
won't
execute
execute
the
the
JavaScript
javascript
until
until
the
the
document
document
is
is
fully
fully
loaded
loaded
because
because
we
we
use
use
this
this
defer
defer
attribute.
attribute
This
this
is
is
useful
useful
because
because
a
a
lot
lot
of
of
times
times
your
your
JavaScript
javascript
will
will
reference
reference
HTML
html
elements
elements
in
in
the
the
body,
body
which
which
won't
won't
be
be
available
available
until
until
the
the
document
document
is
is
fully
fully
loaded.
loaded
Now
now
the
the
big
big
caveat
caveat
here
here
is
is
that
that
most
most
developers
developers
are
are
using
using
frameworks,
frameworks
which
which
will
will
set
set
up
up
the
the
script
script
tag
tag
for
for
you.
you
But
but
if
if
you're
you're
doing
doing
any
any
kind
kind
of
of
web
web
development,
development
it's
it's
important
important
to
to
understand
understand
how
how
script
script
tags
tags
work.
work
But
but
now
now
it's
it's
time
time
to
to
move
move
on
on
to
to
chapter
chapter
2,
2
primitives
primitives
and
and
objects,
objects
which
which
are
are
2
2
of
of
the
the
lowest
lowest
level
level
building
building
blocks
blocks
in
in
the
the
language.
language
There
there
is
is
a
a
total
total
of
of
7
7
primitive
primitive
types
types
in
in
modern
modern
JavaScript
javascript
with
with
the
the
most
most
common
common
ones
ones
being
being
string,
string
number,
number
Boolean,
boolean
null,
null
and
and
undefined.
undefined
John.
john
A
a
special
special
characteristic
characteristic
of
of
primitives
primitives
is
is
that
that
they're
they're
immutable,
immutable
which
which
means
means
their
their
value
value
can't
can't
be
be
directly
directly
changed
changed
once
once
they've
they've
been
been
assigned
assigned
to
to
a
a
variable.
variable
They
they
can
can
be
be
reassigned
reassigned
to
to
a
a
different
different
value,
value
but
but
they
they
just
just
can't
can't
be
be
changed
changed
directly.
directly
And
and
because
because
JavaScript
javascript
is
is
a
a
dynamic
dynamic
weekly
weekly
type
type
language,
language
we
we
don't
don't
actually
actually
use
use
type
type
annotations
annotations
in
in
our
our
code.
code
J,
j
but
but
we
we
can
can
use
use
this
this
type
type
of
of
operator
operator
to
to
check
check
a
a
type
type
at
at
runtime
runtime
if
if
needed.
needed
And
and
just
just
for
for
those
those
who
who
are
are
wondering,
wondering
I'm
i'm
using
using
the
the
Quoca
quoca
plugin
plugin
for
for
Versus
versus
Code,
code
which
which
displays
displays
the
the
output
output
of
of
my
my
code
code
on
on
the
the
right
right
here
here
in
in
blue.
blue
J
j
We'll
we'll
look
look
at
at
these
these
data
data
types
types
in
in
more
more
detail
detail
as
as
we
we
go
go
through
through
the
the
video,
video
but
but
for
for
right
right
now
now
you
you
should
should
know
know
the
the
difference
difference
between
between
undefined
undefined
and
and
null.
null
Undefined
undefined
is
is
the
the
default
default
default
default
value
value
that
that
you'll
you'll
see
see
for
for
a
a
variable
variable
that
that
doesn't
doesn't
have
have
a
a
value
value
assigned
assigned
to
to
it
it
or
or
for
for
a
a
function
function
that
that
just
just
returns
returns
nothing.
nothing
Null
null
is
is
similar
similar
in
in
the
the
sense
sense
that
that
it
it
represents
represents
an
an
empty
empty
value,
value
but
but
it's
it's
something
something
that
that
you,
you
the
the
developer,
developer
would
would
assign
assign
explicitly.
explicitly
Now
now
these
these
primitive
primitive
data
data
types
types
can
can
be
be
contrasted
contrasted
with
with
the
the
object
object
type,
type
which
which
represents
represents
more
more
complex
complex
data
data
structures
structures
like
like
arrays,
arrays
objects,
objects
and
and
functions.
functions
The
the
big
big
difference
difference
is
is
that
that
objects
objects
can
can
be
be
seen
seen
as
as
a
a
collection
collection
of
of
keys
keys
and
and
values
values
or
or
properties,
properties
and
and
they
they
can
can
be
be
mutated
mutated
after
after
being
being
assigned
assigned
to
to
a
a
variable.
variable
So
so
So
so
the
the
bottom
bottom
line
line
that
that
you
you
need
need
to
to
understand
understand
is
is
that
that
anything
anything
that's
that's
not
not
a
a
primitive
primitive
type
type
is
is
going
going
to
to
inherit
inherit
from
from
object.
object
That
that
includes
includes
things
things
like
like
functions,
functions
arrays,
arrays
or
or
any
any
class
class
instances.
instances
Now,
now
there's
there's
one
one
other
other
little
little
piece
piece
of
of
weirdness
weirdness
that
that
you
you
might
might
encounter,
encounter
and
and
that
that
is
is
primitive
primitive
wrapper
wrapper
objects.
objects
The
the
reason
reason
I
i
bring
bring
this
this
up
up
is
is
because
because
you
you
may
may
see
see
these
these
out
out
there
there
in
in
the
the
wild,
wild
and
and
they
they
allow
allow
you
you
to
to
jostly
jostly
wrap
wrap
a
a
primitive
primitive
type
type
in
in
a
a
class
class
instance.
instance
But
but
you
you
should
should
never
never
really
really
use
use
them
them
unless
unless
you
you
have
have
a
a
good
good
reason
reason
to.
to
Chapter
chapter
3.
3
Control
control
flow
flow
and
and
truthy
truthy
versus
versus
falsy.
falsy
In
in
JavaScript,
javascript
we
we
can
can
implement
implement
conditional
conditional
logic
logic
with
with
an
an
if
if
statement.
statement
If
if
a
a
condition
condition
is
is
truthy,
truthy
then
then
we
we
execute
execute
this
this
block
block
of
of
code,
code
else
else
we
we
execute
execute
this
this
other
other
block
block
of
of
code.
code
And
and
we
we
can
can
also
also
use
use
else
else
if
if
if
if
there
there
are
are
multiple
multiple
conditions
conditions
to
to
check.
check
But
but
the
the
more
more
important
important
thing
thing
to
to
understand
understand
here
here
is
is
what
what
is
is
truthy
truthy
and
and
what
what
is
is
falsy
falsy
in
in
JavaScript.
javascript
Because
because
JavaScript
javascript
will
will
always
always
try
try
to
to
coerce
coerce
a
a
value
value
into
into
a
a
boolean
boolean
when
when
it's
it's
encountered
encountered
inside
inside
of
of
a
a
conditional
conditional
statement.
statement
True
true
is
is
obviously
obviously
truthy,
truthy
and
and
anything
anything
that's
that's
an
an
object
object
is
is
also
also
truthy,
truthy
even
even
if
if
it's
it's
an
an
empty
empty
array
array
or
or
an
an
empty
empty
object.
object
The
the
ones
ones
you
you
have
have
to
to
watch
watch
out
out
for
for
are
are
strings
strings
and
and
numbers.
numbers
A
a
string
string
that
that
has
has
length
length
will
will
be
be
truthy,
truthy
but
but
an
an
empty
empty
string
string
will
will
be
be
falsy.
falsy
Then
then
the
the
number
number
0
0
will
will
be
be
falsy,
falsy
but
but
all
all
other
other
numbers
numbers
will
will
be
be
truthy.
truthy
And
and
if
if
you're
you're
ever
ever
unsure
unsure
about
about
a
a
value,
value
you
you
can
can
simply
simply
add
add
a
a
double
double
bang
bang
in
in
front
front
of
of
it
it
to
to
course
course
it
it
to
to
a
a
boolean
boolean
yourself.
yourself
Now,
now
the
the
reason
reason
this
this
works
works
is
is
because
because
the
the
exclamation
exclamation
mark
mark
is
is
a
a
logical
logical
not
not
operator.
operator
Jar.
jar
A
a
single
single
exclamation
exclamation
mark
mark
will
will
return
return
false
false
if
if
a
a
value
value
can
can
be
be
converted
converted
to
to
true.
true
So
so
if
if
you
you
add
add
2
2
of
of
them,
them
then
then
it
it
will
will
give
give
you
you
the
the
actual
actual
boolean
boolean
that
that
that
that
value
value
will
will
be
be
coerced
coerced
to.
to
And
and
while
while
we're
we're
talking
talking
about
about
logical
logical
operators,
operators
you
you
should
should
also
also
know
know
that
that
a
a
double
double
ampersand
ampersand
is
is
logical
logical
and,
and
which
which
ensures
ensures
that
that
all
all
expressions
expressions
in
in
the
the
condition
condition
will
will
be
be
converted
converted
to
to
true.
true
And
and
we
we
also
also
have
have
logical
logical
or
or
which
which
returns
returns
true
true
if
if
at
at
least
least
one
one
of
of
the
the
expressions
expressions
is
is
truthy.
truthy
Now,
now
another
another
thing
thing
you
you
should
should
know
know
is
is
that
that
JavaScript
javascript
provides
provides
2
2
different
different
equality
equality
operators.
operators
Jot.
jot
A
a
double
double
equal
equal
sign
sign
is
is
called
called
an
an
abstract
abstract
comparison,
comparison
and
and
it
it
will
will
try
try
to
to
make
make
a
a
type
type
conversion
conversion
before
before
actually
actually
running
running
the
the
comparison.
comparison
That's
that's
pretty
pretty
weird,
weird
so
so
most
most
linters
linters
will
will
tell
tell
you
you
to
to
never
never
use
use
it.
it
You
you
want
want
answers.
answers
I
i
want
want
the
the
truth.
truth
You
you
can't
can't
handle
handle
the
the
truth.
truth
In
in
contrast,
contrast
the
the
strict
strict
equality
equality
operator
operator
will
will
check
check
for
for
equality
equality
on
on
both
both
the
the
type
type
and
and
the
the
value,
value
which
which
will
will
give
give
you
you
much
much
more
more
predictable
predictable
behavior.
behavior
When
when
it
it
comes
comes
to
to
conditional
conditional
logic,
logic
it
it
can
can
get
get
pretty
pretty
verbose
verbose
if
if
you
you
use
use
an
an
if
if
statement
statement
to
to
define
define
a
a
variable.
variable
But
but
you'll
you'll
commonly
commonly
see
see
this
this
done
done
with
with
the
the
ternary
ternary
operator,
operator
which
which
gives
gives
you
you
a
a
shorthand
shorthand
syntax
syntax
for
for
defining
defining
a
a
variable
variable
based
based
on
on
an
an
if
if
else
else
statement.
statement
It
it
has
has
a
a
logical
logical
condition
condition
on
on
the
the
left
left
side,
side
then
then
a
a
question
question
mark,
mark
then
then
the
the
first
first
value
value
is
is
what
what
will
will
be
be
assigned
assigned
if
if
the
the
condition
condition
is
is
truthy,
truthy
and
and
the
the
second
second
value
value
after
after
the
the
colon
colon
is
is
the
the
value
value
if
if
it's
it's
falsey.
falsey
Java.
java
Now
now
before
before
we
we
leave
leave
the
the
topic
topic
of
of
Control
control
Flow,
flow
it's
it's
also
also
worth
worth
noting
noting
that
that
JavaScript
javascript
has
has
a
a
switch
switch
statement,
statement
which
which
allows
allows
you
you
to
to
start
start
with
with
an
an
expression
expression
and
and
then
then
compare
compare
it
it
to
to
multiple
multiple
cases.
cases
And
and
and
and
this
this
can
can
be
be
a
a
good
good
alternative
alternative
to
to
if
if
else
else
statements
statements
if
if
you
you
have
have
a
a
lot
lot
of
of
conditions
conditions
to
to
check.
check
And
and
we
we
can
can
also
also
wrap
wrap
our
our
code
code
in
in
a
a
try
try
catch
catch
statement,
statement
which
which
will
will
attempt
attempt
to
to
run
run
the
the
code
code
in
in
the
the
try
try
block,
block
but
but
if
if
an
an
error
error
is
is
thrown,
thrown
then
then
it
it
will
will
move
move
to
to
the
the
catch
catch
block.
block
You
you
can
can
try
try
this
this
out
out
yourself
yourself
by
by
using
using
throw
throw
inside
inside
of
of
the
the
try
try
block,
block
and
and
then
then
you'll
you'll
see
see
that
that
it
it
runs
runs
the
the
code
code
inside
inside
of
of
catch
catch
and
and
provides
provides
that
that
error
error
that
that
was
was
thrown
thrown
up
up
above
above
in
in
try.
try
If
if
an
an
error
error
is
is
not
not
thrown,
thrown
then
then
the
the
code
code
inside
inside
of
of
catch
catch
will
will
never
never
be
be
run.
run
And
and
you
you
can
can
also
also
add
add
a
a
finally
finally
block
block
to
to
the
the
end
end
of
of
all
all
this
this
to
to
run
run
some
some
code
code
after
after
both
both
try
try
and
and
catch
catch
have
have
been
been
executed.
executed
And
and
finally,
finally
a
a
full
full
6
6
and
and
a
a
half
half
minutes
minutes
into
into
this
this
video,
video
we're
we're
ready
ready
for
for
chapter
chapter
4,
4
variables.
variables
Jop.
jop
We'll
we'll
look
look
at
at
the
the
difference
difference
between
between
var
var
let
let
and
and
const
const
and
and
also
also
figure
figure
out
out
what
what
hoisting
hoisting
means.
means
Var
var
allows
allows
you
you
to
to
initialize
initialize
a
a
variable,
variable
assign
assign
a
a
value
value
to
to
it,
it
and
and
then
then
also
also
reassign
reassign
a
a
value
value
to
to
it
it
later.
later
Now
now
before
before
you
you
can
can
really
really
understand
understand
anything
anything
else
else
about
about
variables,
variables
you
you
need
need
to
to
understand
understand
the
the
execution
execution
context.
context
And
and
this
this
simply
simply
refers
refers
to
to
the
the
way
way
your
your
code
code
is
is
being
being
interpreted.
interpreted
Because
because
your
your
JavaScript
javascript
program
program
likely
likely
contains
contains
variables
variables
and
and
functions
functions
defined
defined
all
all
over
over
the
the
place,
place
so
so
the
the
context
context
defines
defines
the
the
relationship
relationship
between
between
how
how
your
your
code
code
Java's
java's
written
written
to
to
how
how
it
it
will
will
be
be
interpreted
interpreted
by
by
the
the
JavaScript
javascript
engine.
engine
We
we
can
can
define
define
a
a
variable
variable
anywhere
anywhere
in
in
our
our
script
script
and
and
that
that
will
will
be
be
considered
considered
a
a
global
global
variable.
variable
In
in
other
other
words,
words
it's
it's
available
available
in
in
the
the
global
global
execution
execution
context.
context
That
that
means
means
if
if
I
i
have
have
a
a
function
function
somewhere
somewhere
else
else
in
in
my
my
code,
code
I
i
can
can
still
still
reference
reference
that
that
variable.
variable
I
i
like
like
to
to
think
think
of
of
global
global
as
as
an
an
imaginary
imaginary
function
function
that
that
wraps
wraps
my
my
script.
script
In
in
other
other
words,
words
running
running
a
a
script
script
is
is
just
just
like
like
calling
calling
this
this
imaginary
imaginary
global
global
function.
function
And
and
that
that
means
means
if
if
we
we
define
define
additional
additional
functions
functions
in
in
our
our
code,
code
we
we
have
have
a
a
different
different
execution
execution
context
context
for
for
defining
defining
variables.
variables
For
for
example,
example
if
if
we
we
try
try
to
to
define
define
a
a
variable
variable
inside
inside
this
this
function
function
and
and
then
then
reference
reference
it
it
in
in
the
the
global
global
context
context
will
will
get
get
a
a
reference
reference
error
error
because
because
the
the
local
local
variable
variable
is
is
not
not
available
available
in
in
this
this
context.
context
Now
now
that's
that's
pretty
pretty
straightforward,
straightforward
but
but
there
there
are
are
a
a
few
few
pieces
pieces
of
of
weirdness
weirdness
that
that
you
you
need
need
to
to
be
be
aware
aware
of.
of
If
if
you
you
assign
assign
a
a
value
value
to
to
an
an
undeclared
undeclared
variable,
variable
which
which
you
you
should
should
really
really
never
never
do,
do
it
it
will
will
jolly
jolly
be
be
assigned
assigned
as
as
a
a
global
global
variable
variable
even
even
if
if
it's
it's
done
done
inside
inside
of
of
an
an
enclosing
enclosing
function.
function
And
and
the
the
other
other
thing
thing
you
you
need
need
to
to
know
know
about
about
is
is
hoisting,
hoisting
which
which
applies
applies
to
to
variables,
variables
but
but
also
also
function
function
declarations
declarations
as
as
well.
well
Now
now
whenever
whenever
JavaScript
javascript
processes
processes
an
an
execution
execution
context,
context
it
it
will
will
basically
basically
put
put
all
all
the
the
variables
variables
at
at
the
the
top,
top
or
or
in
in
other
other
words
words
hoist
hoist
them
them
to
to
the
the
top
top
of
of
the
the
context.
context
That
that
means
means
if
if
we
we
initialize
initialize
a
a
variable
variable
down
down
here
here
at
at
the
the
bottom
bottom
and
and
then
then
reference
reference
it
it
somewhere
somewhere
higher
higher
up
up
in
in
the
the
code,
code
it
it
will
will
still
still
be
be
considered
considered
declared
declared
within
within
this
this
scope.
scope
But
but
the
the
actual
actual
assignment
assignment
of
of
a
a
value
value
will
will
still
still
happen
happen
wherever
wherever
you
you
define
define
it
it
in
in
the
the
code.
code
So
so
if
if
you
you
want
want
to
to
keep
keep
your
your
sanity,
sanity
it's
it's
always
always
a
a
good
good
idea
idea
to
to
declare
declare
your
your
variables
variables
at
at
the
the
top
top
of
of
the
the
context.
context
But
but
the
the
bigger
bigger
problem
problem
with
with
var
var
is
is
that
that
it
it
becomes
becomes
very
very
hard
hard
to
to
keep
keep
track
track
of
of
the
the
scope
scope
of
of
variables,
variables
and
and
there
there
can
can
be
be
a
a
lot
lot
of
of
name
name
collisions
collisions
as
as
your
your
app
app
grows
grows
more
more
complex.
complex
Luckily,
luckily
we
we
no
no
longer
longer
have
have
to
to
use
use
var
var
because
because
in
in
modern
modern
JavaScript,
javascript
we
we
have
have
let
let
and
and
const.
const
Let
let
is
is
similar
similar
to
to
var
var
in
in
most
most
ways,
ways
but
but
it's
it's
limited
limited
to
to
the
the
scope
scope
of
of
a
a
block
block
statement.
statement
That
that
means
means
if
if
you
you
define
define
a
a
variable
variable
inside
inside
of
of
an
an
if
if
statement
statement
or
or
a
a
loop,
loop
it
it
will
will
be
be
limited
limited
to
to
that
that
block.
block
And
and
this
this
differs
differs
from
from
var,
var
which
which
would
would
leak
leak
out
out
into
into
the
the
parent
parent
scope.
scope
J.
j
And
and
also
also
like
like
var,
var
variables
variables
defined
defined
with
with
let
let
can
can
be
be
reassigned
reassigned
to
to
different
different
values
values
later
later
in
in
the
the
code.
code
But
but
in
in
many
many
cases,
cases
you'll
you'll
have
have
values
values
that
that
should
should
never
never
be
be
reassigned.
reassigned
This
this
makes
makes
it
it
a
a
lot
lot
more
more
difficult
difficult
to
to
accidentally
accidentally
override
override
values
values
in
in
your
your
code.
code
So
so
when
when
it
it
comes
comes
to
to
variables,
variables
a
a
good
good
rule
rule
to
to
follow
follow
is
is
to
to
always
always
use
use
const,
const
unless
unless
you
you
absolutely
absolutely
know
know
that
that
you'll
you'll
override
override
that
that
value
value
later,
later
in
in
which
which
case
case
you
you
can
can
use
use
let.
let
And
and
you
you
should
should
respect
respect
the
the
legacy
legacy
of
of
R,
r
but
but
just
just
never
never
use
use
it.
it
John.
john
And
and
with
with
that,
that
we're
we're
ready
ready
for
for
chapter
chapter
5,
5
functions.
functions
Aren't
aren't
you
you
gonna
gonna
say
say
hello?
hello
This
this
course.
course
We'll
we'll
have
have
an
an
entire
entire
video
video
on
on
functions,
functions
but
but
there
there
are
are
a
a
few
few
basic
basic
things
things
you
you
should
should
know.
know
So
so
let's
let's
start
start
by
by
answering
answering
the
the
question
question
of
of
what
what
is
is
a
a
function.
function
And
and
the
the
answer
answer
is
is
that
that
it's
it's
simply
simply
a
a
piece
piece
of
of
code
code
takes
takes
an
an
input
input
and
and
produces
produces
an
an
output
output
when
when
it's
it's
called.
called
You
you
can
can
use
use
the
the
function
function
keyword
keyword
as
as
we're
we're
doing
doing
here,
here
or
or
you
you
can
can
use
use
the
the
more
more
concise
concise
arrow
arrow
syntax
syntax
in
in
modern
modern
JavaScript.
javascript
J.
j
If
if
you
you
omit
omit
braces,
braces
the
the
code
code
following
following
the
the
arrow
arrow
will
will
implicitly
implicitly
return
return
a
a
value,
value
so
so
you
you
can
can
define
define
a
a
function
function
that
that
returns
returns
something
something
on
on
a
a
single
single
line.
line
Java.
java
But
but
as
as
easy
easy
as
as
that
that
sounds,
sounds
there's
there's
all
all
kinds
kinds
of
of
complexity
complexity
and
and
terminology
terminology
that
that
goes
goes
along
along
with
with
functions.
functions
So
so
let's
let's
try
try
to
to
unpack
unpack
some
some
of
of
the
the
most
most
important
important
concepts
concepts
that
that
you
you
should
should
understand
understand
as
as
a
a
JS
js
developer.
developer
Java.
java
First
first
of
of
all,
all
functions
functions
can
can
be
be
anonymous,
anonymous
or
or
they
they
can
can
have
have
a
a
name,
name
which
which
will
will
immediately
immediately
follow
follow
the
the
function
function
keyword.
keyword
And
and
you'll
you'll
also
also
commonly
commonly
see
see
anonymous
anonymous
functions
functions
assigned
assigned
to
to
the
the
value
value
of
of
a
a
variable.
variable
Java.
java
And
and
another
another
thing
thing
you'll
you'll
hear
hear
is
is
that
that
JavaScript
javascript
supports
supports
higher
higher
order
order
functions,
functions
and
and
that
that
means
means
we
we
can
can
provide
provide
functions
functions
as
as
the
the
input
input
or
or
arguments
arguments
to
to
another
another
function
function
or
or
as
as
the
the
return
return
value
value
from
from
a
a
function.
function
In
in
the
the
previous
previous
video,
video
we
we
talked
talked
about
about
the
the
JavaScript
javascript
event
event
loop
loop
and
and
callbacks,
callbacks
and
and
this
this
is
is
important
important
with
with
functions
functions
because
because
you'll
you'll
often
often
use
use
anonymous
anonymous
functions
functions
as
as
arguments
arguments
to
to
other
other
functions
functions
that
that
will
will
be
be
called
called
back
back
JWT
jwt
later
later
after
after
some
some
asynchronous
asynchronous
code
code
is
is
finished
finished
executing.
executing
In
in
addition,
addition
you
you
can
can
define
define
new
new
functions
functions
within
within
a
a
function.
function
In
in
this
this
example,
example
the
the
outer
outer
function
function
is
is
the
the
one
one
that
that
wraps
wraps
the
the
inner
inner
function,
function
John.
john
And
and
that's
that's
related
related
to
to
a
a
very
very
important
important
question
question
that
that
you'll
you'll
hear
hear
in
in
a
a
lot
lot
of
of
JavaScript
javascript
interviews,
interviews
what
what
is
is
a
a
closure?
closure
In
in
the
the
most
most
simple
simple
sense,
sense
a
a
closure
closure
is
is
just
just
a
a
function
function
within
within
a
a
function,
function
where
where
the
the
inner
inner
function
function
references
references
a
a
variable
variable
that
that
was
was
declared
declared
in
in
the
the
scope
scope
of
of
the
the
outer
outer
function.
function
Now
now
what
what
makes
makes
this
this
special
special
versus
versus
a
a
lot
lot
of
of
other
other
programming
programming
images
images
is
is
that
that
the
the
variable
variable
in
in
the
the
outer
outer
function
function
will
will
be
be
maintained
maintained
in
in
memory
memory
even
even
after
after
that
that
function
function
returns
returns
and
and
is
is
popped
popped
off
off
the
the
call
call
stack.
stack
So
so
this
this
means
means
the
the
inner
inner
function
function
always
always
has
has
access
access
to
to
this
this
state
state
from
from
the
the
outer
outer
function
function
at
at
the
the
time
time
it
it
was
was
created.
created
In
in
the
the
code
code
here,
here
you
you
can
can
see
see
we
we
define
define
a
a
couple
couple
of
of
variables
variables
in
in
the
the
outer
outer
function,
function
j.
j
Then
then
we
we
operate
operate
on
on
them
them
and
and
return
return
them
them
from
from
the
the
inner
inner
function
function
and
and
then
then
expose
expose
the
the
inner
inner
function
function
by
by
simply
simply
returning
returning
it.
it
And
and
now
now
because
because
that
that
outer
outer
function
function
has
has
Jot
jot
closed
closed
over
over
the
the
inner
inner
function.
function
We
we
can
can
call
call
it
it
and
and
still
still
have
have
reference
reference
to
to
the
the
state
state
in
in
the
the
outer
outer
function.
function
Even
even
though
though
we
we
only
only
called
called
the
the
outer
outer
function
function
once,
once
we
we
still
still
have
have
access
access
to
to
its
its
local
local
variables.
variables
Jot,
jot
and
and
that's
that's
how
how
you
you
make
make
a
a
closure.
closure
If
if
you
you
have
have
experience
experience
with
with
an
an
object
object
oriented
oriented
programming
programming
language,
language
a
a
closure
closure
is
is
very
very
similar
similar
to
to
a
a
class
class
instance,
instance
at
at
least
least
from
from
a
a
conceptual
conceptual
standpoint.
standpoint
Because
because
you
you
have
have
a
a
function
function
that
that
contains
contains
some
some
state,
state
and
and
then
then
you
you
have
have
an
an
inner
inner
function
function
that
that
can
can
operate
operate
and
and
change
change
that
that
state.
state
In
in
the
the
same
same
way
way
that
that
a
a
class
class
instance
instance
has
has
some
some
properties,
properties
and
and
then
then
you
you
have
have
methods
methods
that
that
can
can
change
change
those
those
properties.
properties
In
in
fact,
fact
the
the
class
class
keyword
keyword
in
in
JavaScript
javascript
is
is
just
just
syntactic
syntactic
sugar
sugar
for
for
functions
functions
and
and
closures.
closures
But
but
we'll
we'll
look
look
at
at
classes
classes
and
and
object
object
oriented
oriented
programming
programming
in
in
a
a
future
future
video
video
because
because
now
now
we're
we're
ready
ready
for
for
chapter
chapter
6,
6
objects.
objects
An
an
object
object
as
as
just
just
a
a
data
data
structure
structure
that
that
allows
allows
you
you
to
to
associate
associate
a
a
collection
collection
of
of
key
key
value
value
pairs,
pairs
which
which
is
is
similar
similar
to
to
a
a
map
map
or
or
a
a
hash
hash
map
map
in
in
other
other
languages.
languages
J.
j
It's
it's
possible
possible
to
to
instantiate
instantiate
an
an
object
object
and
and
then
then
add
add
properties
properties
to
to
it
it
1
1
by
by
1,
1
but
but
in
in
most
most
cases,
cases
you'll
you'll
use
use
the
the
object
object
literal
literal
syntax.
syntax
This
this
allows
allows
you
you
to
to
define
define
an
an
object
object
by
by
simply
simply
enclosing
enclosing
your
your
key
key
value
value
pairs
pairs
inside
inside
of
of
braces.
braces
You
you
can
can
access
access
the
the
value
value
of
of
a
a
key
key
by
by
using
using
dot
dot
notation
notation
or
or
with
with
brackets
brackets
and
and
a
a
string.
string
And
and
you
you
can
can
mutate
mutate
properties
properties
on
on
an
an
object
object
even
even
when
when
it's
it's
defined
defined
as
as
a
a
const
const
variable.
variable
And
and
it's
it's
also
also
important
important
to
to
point
point
out
out
that
that
functions
functions
can
can
be
be
used
used
as
as
values
values
on
on
an
an
object.
object
Then
then
inside
inside
a
a
function,
function
we
we
can
can
actually
actually
reference
reference
properties
properties
on
on
this
this
object
object
by
by
using
using
this.
this
But
but
what
what
the
the
hell
hell
is
is
this?
this
This
this
is
is
one
one
of
of
the
the
more
more
challenging
challenging
concepts
concepts
to
to
grasp
grasp
in
in
JavaScript.
javascript
Now
now
remember
remember
earlier,
earlier
I
i
said
said
that
that
anything
anything
that's
that's
not
not
a
a
primitive
primitive
value
value
is
is
an
an
object,
object
and
and
this
this
is
is
just
just
a
a
keyword
keyword
that
that
refers
refers
to
to
the
the
current
current
object
object
that
that
the
the
code
code
is
is
operating
operating
in.
in
If
if
you
you
go
go
into
into
the
the
browser
browser
console
console
and
and
say
say
console
console
log
log
this,
this
it's
it's
going
going
to
to
print
print
out
out
the
the
window
window
object.
object
That's
that's
because
because
window
window
is
is
the
the
global
global
scope
scope
in
in
browsers.
browsers
J.
j
When
when
referenced
referenced
by
by
itself
itself
or
or
if
if
used
used
in
in
a
a
function
function
that's
that's
called
called
normally,
normally
it
it
will
will
reference
reference
the
the
global
global
object.
object
That's
that's
easy
easy
enough,
enough
but
but
what
what
if
if
we
we
have
have
our
our
own
own
custom
custom
object,
object
and
and
on
on
that
that
object
object
we
we
have
have
2
2
properties
properties
that
that
define
define
functions.
functions
The
the
first
first
function
function
uses
uses
the
the
function
function
keyword,
keyword
but
but
the
the
second
second
function
function
uses
uses
the
the
arrow
arrow
syntax.
syntax
Now
now
intuitively,
intuitively
you
you
might
might
think
think
that
that
these
these
functions
functions
are
are
exactly
exactly
the
the
same,
same
but
but
that's
that's
not
not
the
the
case.
case
In
in
the
the
first
first
function,
function
this
this
refers
refers
to
to
the
the
object
object
that
that
it's
it's
defined
defined
on.
on
When
when
it
it
comes
comes
to
to
the
the
arrow
arrow
function,
function
it
it
doesn't
doesn't
have
have
its
its
own
own
bindings
bindings
to
to
this,
this
which
which
means
means
it
it
bypasses
bypasses
our
our
custom
custom
function
function
and
and
this
this
becomes
becomes
the
the
global
global
object.
object
J.
j
Now
now
the
the
other
other
thing
thing
you
you
should
should
know
know
is
is
that
that
when
when
you
you
have
have
a
a
function,
function
there
there
are
are
other
other
ways
ways
to
to
call
call
it
it
beyond
beyond
just
just
using
using
parentheses.
parentheses
For
for
example,
example
you
you
can
can
use
use
its
its
call
call
method
method
and
and
then
then
pass
pass
in
in
the
the
this
this
context
context
that
that
you
you
want
want
to
to
bind
bind
to
to
the
the
function.
function
Now
now
any
any
references
references
that
that
you
you
have
have
to
to
this
this
in
in
the
the
function
function
will
will
reference
reference
the
the
object
object
that
that
you
you
pass
pass
to
to
call.
call
In
in
the
the
code
code
here,
here
we're
we're
calling
calling
this
this
face
face
in
in
the
the
function,
function
but
but
it's
it's
currently
currently
bound
bound
to
to
the
the
global
global
object,
object
which
which
doesn't
doesn't
have
have
a
a
face
face
property.
property
But
but
if
if
we
we
pass
pass
in
in
an
an
object
object
that
that
does
does
have
have
a
a
face
face
property
property
like
like
a
a
clown
clown
or
or
a
a
ghost,
ghost
then
then
it
it
will
will
return
return
a
a
defined
defined
value.
value
Understanding
understanding
this
this
will
will
make
make
you
you
a
a
better
better
JavaScript
javascript
developer,
developer
but
but
it
it
won't
won't
be
be
something
something
that
that
you
you
have
have
to
to
use
use
on
on
a
a
daily
daily
basis.
basis
And
and
with
with
that
that
being
being
said,
said
I
i
think
think
we've
we've
covered
covered
enough
enough
information
information
for
for
one
one
video.
video
And
and
don't
don't
worry
worry
too
too
much
much
if
if
that
that
felt
felt
overwhelming.
overwhelming
We
we
can't
can't
have
have
anyone
anyone
freak
freak
out
out
out
out
there,
there
okay?
okay
We've
we've
gotta
gotta
keep
keep
our
our
composure.
composure
We've
we've
got
got
too
too
far.
far
There's
there's
too
too
much
much
to
to
lose.
lose
It's
it's
not
not
just
just
keep
keep
our
our
composure.
composure
We'll
we'll
revisit
revisit
many
many
of
of
these
these
concepts
concepts
when
when
we
we
look
look
at
at
the
the
practical
practical
applications
applications
of
of
functions,
functions
objects,
objects
and
and
more.
more
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
wrap
wrap
things
things
up
up
there.
there
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
subscribe,
subscribe
and
and
make
make
sure
sure
to
to
check
check
out
out
the
the
full
full
source
source
code
code
on
on
Fireship
fireship
IO.
io
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
talk
talk
to
to
you
you
soon.
soon
success
The speaker explains the benefits of JavaScript programming, including the use of Definitely Ok and the importance of understanding the practical and fundamental concepts. They go on to discuss the differences between JavaScript types and objects, including the use of conditional logic and the use of try catch statements. The speaker then lists the basics of functions, including variables and functions, and emphasizes the importance of understanding these concepts for a better JavaScript developer. They also discuss the use of objects and how they can be associated with a collection of key value pairs.
The JavaScript Survival Guide
Some people call JavaScript a virus. And if that's true, it means developers are the host. No matter what you label yourself as today, you have to face the reality that one day you may join the hordes of JavaScript developers out there. And when that day comes, you need to be prepared by understanding the practical and fundamental concepts of the JavaScript programming language. Java. Today's video is not about victory, it's about survival. Welcome to Episode 3 of the Full JavaScript Jaws. In the last video, we looked at how JavaScript works under the hood. And today, we'll look at many of the fundamental features of a language as they relate to practical programming. But more importantly, I want to help you survive some of the weirder parts of JavaScript that might trip you up or that you might find on an interview question. And many of these concepts like closures and hoisting can be easily understood by Removing the head or destroying the brain. Chapter 1. Where and how do I run my JavaScript code? Let's find out by creating a hello world app. Open up an editor like vscode, create a file called index dotjs, and type in console log hello world. Now assuming you have Node. Js installed, you can run the script directly on your machine via the command line. We'll have an entire video dedicated to Node. Js later in the course, JOB. All you need to know for right now is that if you type in node index dotjs in the command line, it will execute the code in your script. So you just wrote a back end server side JavaScript application. But J. But when most people think about JS, they're thinking about browsers and web applications. It's possible to run code in the browser just like we did from the command line by opening the developer console. In the previous video, we learned that JavaScript has an interpreter or JIT compiler to be precise that will execute your code when you type it in here. But the browser console is really just a debugging tool. The way that web applications actually work is they declare a script tag in an HTML document. We can go ahead and create an index dot HTML file, then we'll add a script tag and set the source attribute to the JavaScript file. When the browser parses this HTML file, it's going to see the script tag and then try to load and execute the script. In our case, it won't execute the JavaScript until the document is fully loaded because we use this defer attribute. This is useful because a lot of times your JavaScript will reference HTML elements in the body, which won't be available until the document is fully loaded. Now the big caveat here is that most developers are using frameworks, which will set up the script tag for you. But if you're doing any kind of web development, it's important to understand how script tags work. But now it's time to move on to chapter 2, primitives and objects, which are 2 of the lowest level building blocks in the language. There is a total of 7 primitive types in modern JavaScript with the most common ones being string, number, Boolean, null, and undefined. John. A special characteristic of primitives is that they're immutable, which means their value can't be directly changed once they've been assigned to a variable. They can be reassigned to a different value, but they just can't be changed directly. And because JavaScript is a dynamic weekly type language, we don't actually use type annotations in our code. J, but we can use this type of operator to check a type at runtime if needed. And just for those who are wondering, I'm using the Quoca plugin for Versus Code, which displays the output of my code on the right here in blue. J We'll look at these data types in more detail as we go through the video, but for right now you should know the difference between undefined and null. Undefined is the default default value that you'll see for a variable that doesn't have a value assigned to it or for a function that just returns nothing. Null is similar in the sense that it represents an empty value, but it's something that you, the developer, would assign explicitly. Now these primitive data types can be contrasted with the object type, which represents more complex data structures like arrays, objects, and functions. The big difference is that objects can be seen as a collection of keys and values or properties, and they can be mutated after being assigned to a variable. So So the bottom line that you need to understand is that anything that's not a primitive type is going to inherit from object. That includes things like functions, arrays, or any class instances. Now, there's one other little piece of weirdness that you might encounter, and that is primitive wrapper objects. The reason I bring this up is because you may see these out there in the wild, and they allow you to jostly wrap a primitive type in a class instance. But you should never really use them unless you have a good reason to. Chapter 3. Control flow and truthy versus falsy. In JavaScript, we can implement conditional logic with an if statement. If a condition is truthy, then we execute this block of code, else we execute this other block of code. And we can also use else if if there are multiple conditions to check. But the more important thing to understand here is what is truthy and what is falsy in JavaScript. Because JavaScript will always try to coerce a value into a boolean when it's encountered inside of a conditional statement. True is obviously truthy, and anything that's an object is also truthy, even if it's an empty array or an empty object. The ones you have to watch out for are strings and numbers. A string that has length will be truthy, but an empty string will be falsy. Then the number 0 will be falsy, but all other numbers will be truthy. And if you're ever unsure about a value, you can simply add a double bang in front of it to course it to a boolean yourself. Now, the reason this works is because the exclamation mark is a logical not operator. Jar. A single exclamation mark will return false if a value can be converted to true. So if you add 2 of them, then it will give you the actual boolean that that value will be coerced to. And while we're talking about logical operators, you should also know that a double ampersand is logical and, which ensures that all expressions in the condition will be converted to true. And we also have logical or which returns true if at least one of the expressions is truthy. Now, another thing you should know is that JavaScript provides 2 different equality operators. Jot. A double equal sign is called an abstract comparison, and it will try to make a type conversion before actually running the comparison. That's pretty weird, so most linters will tell you to never use it. You want answers. I want the truth. You can't handle the truth. In contrast, the strict equality operator will check for equality on both the type and the value, which will give you much more predictable behavior. When it comes to conditional logic, it can get pretty verbose if you use an if statement to define a variable. But you'll commonly see this done with the ternary operator, which gives you a shorthand syntax for defining a variable based on an if else statement. It has a logical condition on the left side, then a question mark, then the first value is what will be assigned if the condition is truthy, and the second value after the colon is the value if it's falsey. Java. Now before we leave the topic of Control Flow, it's also worth noting that JavaScript has a switch statement, which allows you to start with an expression and then compare it to multiple cases. And and this can be a good alternative to if else statements if you have a lot of conditions to check. And we can also wrap our code in a try catch statement, which will attempt to run the code in the try block, but if an error is thrown, then it will move to the catch block. You can try this out yourself by using throw inside of the try block, and then you'll see that it runs the code inside of catch and provides that error that was thrown up above in try. If an error is not thrown, then the code inside of catch will never be run. And you can also add a finally block to the end of all this to run some code after both try and catch have been executed. And finally, a full 6 and a half minutes into this video, we're ready for chapter 4, variables. Jop. We'll look at the difference between var let and const and also figure out what hoisting means. Var allows you to initialize a variable, assign a value to it, and then also reassign a value to it later. Now before you can really understand anything else about variables, you need to understand the execution context. And this simply refers to the way your code is being interpreted. Because your JavaScript program likely contains variables and functions defined all over the place, so the context defines the relationship between how your code Java's written to how it will be interpreted by the JavaScript engine. We can define a variable anywhere in our script and that will be considered a global variable. In other words, it's available in the global execution context. That means if I have a function somewhere else in my code, I can still reference that variable. I like to think of global as an imaginary function that wraps my script. In other words, running a script is just like calling this imaginary global function. And that means if we define additional functions in our code, we have a different execution context for defining variables. For example, if we try to define a variable inside this function and then reference it in the global context will get a reference error because the local variable is not available in this context. Now that's pretty straightforward, but there are a few pieces of weirdness that you need to be aware of. If you assign a value to an undeclared variable, which you should really never do, it will jolly be assigned as a global variable even if it's done inside of an enclosing function. And the other thing you need to know about is hoisting, which applies to variables, but also function declarations as well. Now whenever JavaScript processes an execution context, it will basically put all the variables at the top, or in other words hoist them to the top of the context. That means if we initialize a variable down here at the bottom and then reference it somewhere higher up in the code, it will still be considered declared within this scope. But the actual assignment of a value will still happen wherever you define it in the code. So if you want to keep your sanity, it's always a good idea to declare your variables at the top of the context. But the bigger problem with var is that it becomes very hard to keep track of the scope of variables, and there can be a lot of name collisions as your app grows more complex. Luckily, we no longer have to use var because in modern JavaScript, we have let and const. Let is similar to var in most ways, but it's limited to the scope of a block statement. That means if you define a variable inside of an if statement or a loop, it will be limited to that block. And this differs from var, which would leak out into the parent scope. J. And also like var, variables defined with let can be reassigned to different values later in the code. But in many cases, you'll have values that should never be reassigned. This makes it a lot more difficult to accidentally override values in your code. So when it comes to variables, a good rule to follow is to always use const, unless you absolutely know that you'll override that value later, in which case you can use let. And you should respect the legacy of R, but just never use it. John. And with that, we're ready for chapter 5, functions. Aren't you gonna say hello? This course. We'll have an entire video on functions, but there are a few basic things you should know. So let's start by answering the question of what is a function. And the answer is that it's simply a piece of code takes an input and produces an output when it's called. You can use the function keyword as we're doing here, or you can use the more concise arrow syntax in modern JavaScript. J. If you omit braces, the code following the arrow will implicitly return a value, so you can define a function that returns something on a single line. Java. But as easy as that sounds, there's all kinds of complexity and terminology that goes along with functions. So let's try to unpack some of the most important concepts that you should understand as a JS developer. Java. First of all, functions can be anonymous, or they can have a name, which will immediately follow the function keyword. And you'll also commonly see anonymous functions assigned to the value of a variable. Java. And another thing you'll hear is that JavaScript supports higher order functions, and that means we can provide functions as the input or arguments to another function or as the return value from a function. In the previous video, we talked about the JavaScript event loop and callbacks, and this is important with functions because you'll often use anonymous functions as arguments to other functions that will be called back JWT later after some asynchronous code is finished executing. In addition, you can define new functions within a function. In this example, the outer function is the one that wraps the inner function, John. And that's related to a very important question that you'll hear in a lot of JavaScript interviews, what is a closure? In the most simple sense, a closure is just a function within a function, where the inner function references a variable that was declared in the scope of the outer function. Now what makes this special versus a lot of other programming images is that the variable in the outer function will be maintained in memory even after that function returns and is popped off the call stack. So this means the inner function always has access to this state from the outer function at the time it was created. In the code here, you can see we define a couple of variables in the outer function, j. Then we operate on them and return them from the inner function and then expose the inner function by simply returning it. And now because that outer function has Jot closed over the inner function. We can call it and still have reference to the state in the outer function. Even though we only called the outer function once, we still have access to its local variables. Jot, and that's how you make a closure. If you have experience with an object oriented programming language, a closure is very similar to a class instance, at least from a conceptual standpoint. Because you have a function that contains some state, and then you have an inner function that can operate and change that state. In the same way that a class instance has some properties, and then you have methods that can change those properties. In fact, the class keyword in JavaScript is just syntactic sugar for functions and closures. But we'll look at classes and object oriented programming in a future video because now we're ready for chapter 6, objects. An object as just a data structure that allows you to associate a collection of key value pairs, which is similar to a map or a hash map in other languages. J. It's possible to instantiate an object and then add properties to it 1 by 1, but in most cases, you'll use the object literal syntax. This allows you to define an object by simply enclosing your key value pairs inside of braces. You can access the value of a key by using dot notation or with brackets and a string. And you can mutate properties on an object even when it's defined as a const variable. And it's also important to point out that functions can be used as values on an object. Then inside a function, we can actually reference properties on this object by using this. But what the hell is this? This is one of the more challenging concepts to grasp in JavaScript. Now remember earlier, I said that anything that's not a primitive value is an object, and this is just a keyword that refers to the current object that the code is operating in. If you go into the browser console and say console log this, it's going to print out the window object. That's because window is the global scope in browsers. J. When referenced by itself or if used in a function that's called normally, it will reference the global object. That's easy enough, but what if we have our own custom object, and on that object we have 2 properties that define functions. The first function uses the function keyword, but the second function uses the arrow syntax. Now intuitively, you might think that these functions are exactly the same, but that's not the case. In the first function, this refers to the object that it's defined on. When it comes to the arrow function, it doesn't have its own bindings to this, which means it bypasses our custom function and this becomes the global object. J. Now the other thing you should know is that when you have a function, there are other ways to call it beyond just using parentheses. For example, you can use its call method and then pass in the this context that you want to bind to the function. Now any references that you have to this in the function will reference the object that you pass to call. In the code here, we're calling this face in the function, but it's currently bound to the global object, which doesn't have a face property. But if we pass in an object that does have a face property like a clown or a ghost, then it will return a defined value. Understanding this will make you a better JavaScript developer, but it won't be something that you have to use on a daily basis. And with that being said, I think we've covered enough information for one video. And don't worry too much if that felt overwhelming. We can't have anyone freak out out there, okay? We've gotta keep our composure. We've got too far. There's too much to lose. It's not just keep our composure. We'll revisit many of these concepts when we look at the practical applications of functions, objects, and more. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe, and make sure to check out the full source code on Fireship IO. Thanks for watching, and I will talk to you soon.
The speaker explains the benefits of JavaScript programming, including the use of Definitely Ok and the importance of understanding the practical and fundamental concepts. They go on to discuss the differences between JavaScript types and objects, including the use of conditional logic and the use of try catch statements. The speaker then lists the basics of functions, including variables and functions, and emphasizes the importance of understanding these concepts for a better JavaScript developer. They also discuss the use of objects and how they can be associated with a collection of key value pairs.