The ultimate 10 minute JavaScript course that quickly breaks down over 100 key concepts every web developer should know. Learn the basics of JS and start building apps on the web, mobile, desktop, and more. 

#javascript #programming #code 

🚨 BLACK FRIDAY 40% Discount off PRO Memberships FOREVER

https://fireship.io/pro

🚨 Use code BLACKFIRE at checkout 


💬 Chat with Me on Discord

https://discord.gg/fireship

🔗 Resources

NEW Full JavaScript Course https://fireship.io/courses/js
JavaScript in 100 Seconds https://youtu.be/DHjqpvDnNGE
JavaScript Docs https://developer.mozilla.org/en-US/docs/Web/JavaScript

🎨 My Editor Settings

- Atom One Dark 
- vscode-icons
- Fira Code Font

🔖 Topics Covered

- JavaScript 101 Course
- Getting Started with JavaScript
- JavaScript basics tutorial
- Learn JS for beginners 
- Most important JS concepts to know
- What is JavaScript used for?
- How do I learn JavaScript programming?
- Prototypal Inheritance
- Higher Order Functions
- Closures
- Non-blocking event loop
- Node.js
2024-02-04T05:16:58.615Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
73a0c447-4782-4ab6-9959-5f17511e5460
7715027b9019283bda6e73de5318c9be5529c32c5904aae880ff7271f3c83015
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
JavaScript.
It's a wonderful programming language to learn for beginners.
It's also a horrible programming language to learn for beginners.
On one hand, you can build almost anything with it and get a job anywhere if you master it.
On the other hand, it's weird, ugly, and surrounded by a dystopian wasteland of frameworks and libraries.
Don't wanna Sound like a dick or nothing, but, uh, it says on your chart that you're fucked up.
Welcome to JavaScript 101.
Over the next few minutes, you you'll learn a 101 different things you need to know about JavaScript, like how to use it, where to use it, and why it is the way it is.
By the end of this video, you'll be able to build a website, a mobile app, a desktop a server, an operating system, artificial intelligence, and all kinds of other stuff you shouldn't build with it.
It was created in 1993 by I Brendan Eich at Netscape.
At the time, the web browser was cutting edge technology that connected everybody on the planet via the World Wide Web.
Now that I've gotten on the Internet, I'd rather be on my Been doing just about anything.
At the time, websites were completely static with pure HTML.
JavaScript was designed as an easy to use high level language to help developers make these websites interactive, today, it's arguably the most popular language in the world, and its standard implementation is called ECMAScript and is the default language in all web browsers.
In fact, it's the only code that natively runs in a browser aside from WebAssembly.
However, the browser is not the only runtime, and you can also run JavaScript code on a server thanks to tools like Node.
Js and Deno.
As the name implies, JavaScript is a scripting language, that means you can execute code on the fly by opening up the console in your browser dev tools to run some code that changes the appearance of a website at any time.
It's interpreted line by line as opposed to other languages like C that are compiled ahead of time.
However, interpreted is not the most accurate term to use here.
Under the hood of the browser, there's an engine called v eight.
It makes JavaScript run extremely fast by taking your code and converting it to machine code with a process called just in time compilation.
But none of this stuff really matters.
Let's jump into some code.
To use JavaScript on a web page, you'll first need an HTML document, inside of which will have a tag.
You can write code inside the tag directly or reference an external file with the source attribute.
Now to say hello world, use console log, which is JavaScript's built in tool for printing to the standard output.
Now open the HTML file in a browser and you should see the value printed out in the dev tools.
There are several different ways to define variables.
The most common of which today is let.
Start by giving it a name, which will normally be in camel case, then assign a value to it.
It's a dynamically typed language, which means no data type annotations are necessary.
In this case, I've assigned a number, which is one of the 7 primitive data types built into the language.
However, we don't need to assign the variable we'll a value right now because it can be reassigned later.
Without an assignment, it automatically uses the primitive value of undefined as its it's default value.
However, we can explicitly represent an empty value using 'null'.
And, later on, we could reassign that same variable to a string.
It's an entirely different data type, but that's perfectly okay.
Now, any value that's not a primitive will inherit from the object but more on that later.
Right now, we need to talk about this semicolon.
Technically, semicolons are optional because if you leave them out, the script parser will add them automatically.
In real life, JavaScript developers will often fight to the death over whether or not to use semicolons, but let is not the only way to define a variable.
Another common option is const, which is used for variables that cannot be reassigned later.
But the original way to declare variable is var.
I would recommend ignoring its existence altogether, although you will find it out in the wild.
The reason we have so many different ways to define variables has to do with the lexical environment, which determines where variables work and where they don't.
There's a global scope, which is where we are right now, which means this variable will be available everywhere.
However, ever, if we define a variable inside a function, it then becomes local to that function and cannot be used outside of it.
And finally, if you have a statement like an if condition, variables can be scoped inside the braces or block.
Unless you use var for that variable, which is not block scope, in which case, it will be hoisted up into the local scope for that function.
And trust me, you don't want that weirdness in your life.
When the function keyword is used by itself, it's called a function definition or statement.
Functions are one of the main building blocks in JavaScript, and they work by taking an input or argument, then optionally return a value that can be used somewhere else.
Now functions are just objects, which means they can also be used as expressions allowing them to be used as variables or to construct higher order functions where a function is used as an argument or a return value.
Functions can also be nested to create a closure that encapsulates data and logic from the rest of the program.
Normally, when you call a function that has a variable with a primitive value, it's stored on the call stack, which is the browser's short term memory.
However, when you create a closure, the inner function can still access variables in the outer function, even after the initial function call, that happens because JavaScript automatically stores the data in the outer function in the heap memory, which will persist between function calls, you'll rarely have to think about that as a developer, but what you're more likely to run into is this.
It's a keyword that references an object based on how a function is called.
When called from the global scope, it references the window object in the browser.
However, if that same function is attached to an object and called by that object, this will be a reference to that object.
And you can manually bind a function to some other object using the bind method.
This can be rather confusing, but modern JavaScript has another way to define functions using the arrow syntax.
Arrow functions don't have their own this value and they're always anonymous, which makes them ideal for function expressions.
Now one last thing you need to know about functions is that when passing arguments, a primitive like a number is passed by value, which means a copy is created of the original variable.
However, if the argument is an object, that means it's stored in the heap and it's passed by reference.
That means multiple parts of the code might be mutating the same object.
Speaking of which, let's talk about objects.
The easiest way to define one is with the object literal syntax using braces.
But there's also an object type that can be created with a constructor using the new keyword.
An object contains a collection of key value pairs or properties and values.
What's interesting is that objects can inherit properties from each other thanks to a mechanism called the prototype chain.
Every object has a private property that links to exactly one prototype.
This differs from class based inheritance found in many other languages because we're dealing with real objects that take up memory as opposed to extract classes in your code.
Now what's confusing is JavaScript supports object oriented programming with a class keyword.
However, classes are just syntactic sugar for prototypal inheritance and objects.
A class can define a constructor, which is a function that's called when the object it's first created.
It can also have properties and optionally create getters and setters to access them.
And it more easily encapsulates functions by organizing them as methods on an object instance or making them global to the class name with the static keyword.
In addition to objects, JavaScript has a bunch of built in data structures like an array for holding a dynamic collection of indexed items or a set to hold a collection of unique items, or map, which also holds a key value pair like an object, but can be more easily looped over along with a variety of other features.
Now, what you you should also know at this point is that JavaScript is garbage collected.
That means it will automatically deallocate objects from memory when they're no longer referenced in your code.
However, when have a map.
All the properties will always be referenced.
If that's not optimal, there's a weak map and weak set that contain properties that can be garbage collected to reduce memory usage.
Now that we have a basic idea of what JavaScript looks like, let's talk about one of its most interesting features, which is its non blocking event loop.
Normally, when you write code in a script, it's executed synchronously line by line, which means the next line can't start until the previous line finishes.
With an event loop, we can write asynchronous code in JavaScript that runs in a separate thread pool while the rest of the application continues to execute.
This is really important because modern websites often have multiple things going on at the same time, but they only have access to a single thread for computing called the main thread.
Without asynchronous code, it would be impossible to multitask.
An easy way to demonstrate this is with setTimeout, which takes a function as an argument, but won't actually call that until x number of milliseconds have elapsed.
This is called a callback function because it gets enqueued in the event loop only to be called back later when it's ready to execute on the main read, callback functions are very common, but when they're overused and become too deeply nested, it leads to a situation called callback hell.
Luckily, there are better ways to write async code like a Promise.
A Promise is a wrapper for a value that's unknown right now, but that will resolve to a value in the future, like maybe a call to a third party API that resolves to some data.
If something goes wrong, the promise can reject to raise an error.
Now the consumer of the promise can use methods like then and catch to handle these two possible outcomes, or better yet, you can define an async function that will automatically return a promise.
Then in the body of the function, we can pause its execution using the await keyword to wait for other promises to resolve, and this results in nice readable code.
However, in order to implement error handling, you'll want to wrap this code in a try a catch block.
Now as your code grows in complexity, it won't all fit in a single file.
Luckily, we can use modules to share code between files.
By default, all the code in a file or module is private to that file.
However, if there's some code we want to use elsewhere, like a function, we can make it a default export.
This allows us to go to a different file and use an import statement to use the function there as well.
It's also possible to export multiple values from a single file and then import them by name in the other file.
But often, what you'll do in JavaScript land is use code written by an entirely different developer.
The largest JavaScript package Azure is npm.
When you install a package from npm, it downloads its code into the nodemodules folder in your project.
It also provides a package JSON file that will list out all the dependencies used in your project.
Now let's go into the code and assume we're building a website.
On the web, the code will run-in the browser which is based on the document object model where the UI is represented as a tree of HTML elements or nodes.
The browser provides APIs to interact with these nodes with the most important object being the document, the document allows us to grab an individual HTML element using a method called querySelector.
It takes a CSS selector as an argument and will find the HTML element that has the same class name, ID, or tag name.
It returns an instance of the element class, which itself has a variety of properties and methods to get information about it or change its behavior.
In addition, we can grab multiple elements at the same time using query selector all.
Most importantly, we can listen to events that happen to it, like when a button is clicked.
With add event listener, we can assign a function that will be called whenever that event takes place.
Much of web development revolves around listening to events and updating the UI accordingly.
However, one thing that many developers dislike about vanilla JavaScript grip is that it results in imperative code where the UI is mutated directly.
Many developers now use front end frameworks that produce declarative code where the UI is a function of its input data.
These libraries encapsulate JavaScript, HTML, and CSS into components, which are then used together to form a component tree you represent the UI.
Most importantly, inside a component, data is reactive.
It can be bound from the JavaScript directly to the HTML.
That means anytime data changes the UI will be updated automatically.
Now after you build a complete JavaScript app, you'll need to take all of your JavaScript files and combine them into a single bundle that can be used by the browser.
To handle this process efficiently, you'll need a tool called a module bundler like Vite or Webpack.
One problem though is that sometimes this JavaScript file can get too big, which affects the page load performance, and this can be measured by the network waterfall in your browser dev tools.
Luckily, it's possible to split this JavaScript bundle into multiple files, then use dynamic imports in your code you only import that JavaScript when it becomes needed.
Now JavaScript doesn't just run-in the browser, but also on the server.
Node.
Js is the most popular runtime and you can execute you code at any time using the node command.
This opens the door to frameworks like Electron, which combine Node.
Js with a browser to create full stack desktop apps with JavaScript script or iOS and Android apps with React Native.
At this point, you've got 99 problems and JavaScript is every single one of them.
If you you wanna make life easier, use a tool like TypeScript or ESLint that does static analysis to improve your code quality.
Congratulations for reaching the end of JavaScript 101.
If you wanna go beyond this video, I just released a brand new JavaScript course on Fireship IO.
This video is the introduction to that course, which is followed by a deeper dive into these concepts, then we work on some hands on projects with a bunch of quizzes along the way.
Thanks for watching, and I will see you in the next one.

Speaker 0: JavaScript. It's a wonderful programming language to learn for beginners. It's also a horrible programming language to learn for beginners. On one hand, you can build almost anything with it and get a job anywhere if you master it. On the other hand, it's weird, ugly, and surrounded by a dystopian wasteland of frameworks and libraries.

Don't wanna Sound like a dick or nothing, but, uh, it says on your chart that you're fucked up. Welcome to JavaScript 101. Over the next few minutes, you you'll learn a 101 different things you need to know about JavaScript, like how to use it, where to use it, and why it is the way it is. By the end of this video, you'll be able to build a website, a mobile app, a desktop a server, an operating system, artificial intelligence, and all kinds of other stuff you shouldn't build with it. It was created in 1993 by I Brendan Eich at Netscape.

At the time, the web browser was cutting edge technology that connected everybody on the planet via the World Wide Web. Now that I've gotten on the Internet, I'd rather be on my Been doing just about anything. At the time, websites were completely static with pure HTML. JavaScript was designed as an easy to use high level language to help developers make these websites interactive, today, it's arguably the most popular language in the world, and its standard implementation is called ECMAScript and is the default language in all web browsers. In fact, it's the only code that natively runs in a browser aside from WebAssembly.

However, the browser is not the only runtime, and you can also run JavaScript code on a server thanks to tools like Node. Js and Deno. As the name implies, JavaScript is a scripting language, that means you can execute code on the fly by opening up the console in your browser dev tools to run some code that changes the appearance of a website at any time. It's interpreted line by line as opposed to other languages like C that are compiled ahead of time. However, interpreted is not the most accurate term to use here.

Under the hood of the browser, there's an engine called v eight. It makes JavaScript run extremely fast by taking your code and converting it to machine code with a process called just in time compilation. But none of this stuff really matters. Let's jump into some code. To use JavaScript on a web page, you'll first need an HTML document, inside of which will have a tag.

You can write code inside the tag directly or reference an external file with the source attribute. Now to say hello world, use console log, which is JavaScript's built in tool for printing to the standard output. Now open the HTML file in a browser and you should see the value printed out in the dev tools. There are several different ways to define variables. The most common of which today is let.

Start by giving it a name, which will normally be in camel case, then assign a value to it. It's a dynamically typed language, which means no data type annotations are necessary. In this case, I've assigned a number, which is one of the 7 primitive data types built into the language. However, we don't need to assign the variable we'll a value right now because it can be reassigned later. Without an assignment, it automatically uses the primitive value of undefined as its it's default value.

However, we can explicitly represent an empty value using 'null'. And, later on, we could reassign that same variable to a string. It's an entirely different data type, but that's perfectly okay. Now, any value that's not a primitive will inherit from the object but more on that later. Right now, we need to talk about this semicolon.

Technically, semicolons are optional because if you leave them out, the script parser will add them automatically. In real life, JavaScript developers will often fight to the death over whether or not to use semicolons, but let is not the only way to define a variable. Another common option is const, which is used for variables that cannot be reassigned later. But the original way to declare variable is var. I would recommend ignoring its existence altogether, although you will find it out in the wild.

The reason we have so many different ways to define variables has to do with the lexical environment, which determines where variables work and where they don't. There's a global scope, which is where we are right now, which means this variable will be available everywhere. However, ever, if we define a variable inside a function, it then becomes local to that function and cannot be used outside of it. And finally, if you have a statement like an if condition, variables can be scoped inside the braces or block. Unless you use var for that variable, which is not block scope, in which case, it will be hoisted up into the local scope for that function.

And trust me, you don't want that weirdness in your life. When the function keyword is used by itself, it's called a function definition or statement. Functions are one of the main building blocks in JavaScript, and they work by taking an input or argument, then optionally return a value that can be used somewhere else. Now functions are just objects, which means they can also be used as expressions allowing them to be used as variables or to construct higher order functions where a function is used as an argument or a return value. Functions can also be nested to create a closure that encapsulates data and logic from the rest of the program.

Normally, when you call a function that has a variable with a primitive value, it's stored on the call stack, which is the browser's short term memory. However, when you create a closure, the inner function can still access variables in the outer function, even after the initial function call, that happens because JavaScript automatically stores the data in the outer function in the heap memory, which will persist between function calls, you'll rarely have to think about that as a developer, but what you're more likely to run into is this. It's a keyword that references an object based on how a function is called. When called from the global scope, it references the window object in the browser. However, if that same function is attached to an object and called by that object, this will be a reference to that object.

And you can manually bind a function to some other object using the bind method. This can be rather confusing, but modern JavaScript has another way to define functions using the arrow syntax. Arrow functions don't have their own this value and they're always anonymous, which makes them ideal for function expressions. Now one last thing you need to know about functions is that when passing arguments, a primitive like a number is passed by value, which means a copy is created of the original variable. However, if the argument is an object, that means it's stored in the heap and it's passed by reference.

That means multiple parts of the code might be mutating the same object. Speaking of which, let's talk about objects. The easiest way to define one is with the object literal syntax using braces. But there's also an object type that can be created with a constructor using the new keyword. An object contains a collection of key value pairs or properties and values.

What's interesting is that objects can inherit properties from each other thanks to a mechanism called the prototype chain. Every object has a private property that links to exactly one prototype. This differs from class based inheritance found in many other languages because we're dealing with real objects that take up memory as opposed to extract classes in your code. Now what's confusing is JavaScript supports object oriented programming with a class keyword. However, classes are just syntactic sugar for prototypal inheritance and objects.

A class can define a constructor, which is a function that's called when the object it's first created. It can also have properties and optionally create getters and setters to access them. And it more easily encapsulates functions by organizing them as methods on an object instance or making them global to the class name with the static keyword. In addition to objects, JavaScript has a bunch of built in data structures like an array for holding a dynamic collection of indexed items or a set to hold a collection of unique items, or map, which also holds a key value pair like an object, but can be more easily looped over along with a variety of other features. Now, what you you should also know at this point is that JavaScript is garbage collected.

That means it will automatically deallocate objects from memory when they're no longer referenced in your code. However, when have a map. All the properties will always be referenced. If that's not optimal, there's a weak map and weak set that contain properties that can be garbage collected to reduce memory usage. Now that we have a basic idea of what JavaScript looks like, let's talk about one of its most interesting features, which is its non blocking event loop.

Normally, when you write code in a script, it's executed synchronously line by line, which means the next line can't start until the previous line finishes. With an event loop, we can write asynchronous code in JavaScript that runs in a separate thread pool while the rest of the application continues to execute. This is really important because modern websites often have multiple things going on at the same time, but they only have access to a single thread for computing called the main thread. Without asynchronous code, it would be impossible to multitask. An easy way to demonstrate this is with setTimeout, which takes a function as an argument, but won't actually call that until x number of milliseconds have elapsed.

This is called a callback function because it gets enqueued in the event loop only to be called back later when it's ready to execute on the main read, callback functions are very common, but when they're overused and become too deeply nested, it leads to a situation called callback hell. Luckily, there are better ways to write async code like a Promise. A Promise is a wrapper for a value that's unknown right now, but that will resolve to a value in the future, like maybe a call to a third party API that resolves to some data. If something goes wrong, the promise can reject to raise an error. Now the consumer of the promise can use methods like then and catch to handle these two possible outcomes, or better yet, you can define an async function that will automatically return a promise.

Then in the body of the function, we can pause its execution using the await keyword to wait for other promises to resolve, and this results in nice readable code. However, in order to implement error handling, you'll want to wrap this code in a try a catch block. Now as your code grows in complexity, it won't all fit in a single file. Luckily, we can use modules to share code between files. By default, all the code in a file or module is private to that file.

However, if there's some code we want to use elsewhere, like a function, we can make it a default export. This allows us to go to a different file and use an import statement to use the function there as well. It's also possible to export multiple values from a single file and then import them by name in the other file. But often, what you'll do in JavaScript land is use code written by an entirely different developer. The largest JavaScript package Azure is npm.

When you install a package from npm, it downloads its code into the nodemodules folder in your project. It also provides a package JSON file that will list out all the dependencies used in your project. Now let's go into the code and assume we're building a website. On the web, the code will run-in the browser which is based on the document object model where the UI is represented as a tree of HTML elements or nodes. The browser provides APIs to interact with these nodes with the most important object being the document, the document allows us to grab an individual HTML element using a method called querySelector.

It takes a CSS selector as an argument and will find the HTML element that has the same class name, ID, or tag name. It returns an instance of the element class, which itself has a variety of properties and methods to get information about it or change its behavior. In addition, we can grab multiple elements at the same time using query selector all. Most importantly, we can listen to events that happen to it, like when a button is clicked. With add event listener, we can assign a function that will be called whenever that event takes place.

Much of web development revolves around listening to events and updating the UI accordingly. However, one thing that many developers dislike about vanilla JavaScript grip is that it results in imperative code where the UI is mutated directly. Many developers now use front end frameworks that produce declarative code where the UI is a function of its input data. These libraries encapsulate JavaScript, HTML, and CSS into components, which are then used together to form a component tree you represent the UI. Most importantly, inside a component, data is reactive.

It can be bound from the JavaScript directly to the HTML. That means anytime data changes the UI will be updated automatically. Now after you build a complete JavaScript app, you'll need to take all of your JavaScript files and combine them into a single bundle that can be used by the browser. To handle this process efficiently, you'll need a tool called a module bundler like Vite or Webpack. One problem though is that sometimes this JavaScript file can get too big, which affects the page load performance, and this can be measured by the network waterfall in your browser dev tools.

Luckily, it's possible to split this JavaScript bundle into multiple files, then use dynamic imports in your code you only import that JavaScript when it becomes needed. Now JavaScript doesn't just run-in the browser, but also on the server. Node. Js is the most popular runtime and you can execute you code at any time using the node command. This opens the door to frameworks like Electron, which combine Node.

Js with a browser to create full stack desktop apps with JavaScript script or iOS and Android apps with React Native. At this point, you've got 99 problems and JavaScript is every single one of them. If you you wanna make life easier, use a tool like TypeScript or ESLint that does static analysis to improve your code quality. Congratulations for reaching the end of JavaScript 101. If you wanna go beyond this video, I just released a brand new JavaScript course on Fireship IO.

This video is the introduction to that course, which is followed by a deeper dive into these concepts, then we work on some hands on projects with a bunch of quizzes along the way. Thanks for watching, and I will see you in the next one.
JavaScript. It's a wonderful programming language to learn for beginners. It's also a horrible programming language to learn for beginners. On one hand, you can build almost anything with it and get a job anywhere if you master it. On the other hand, it's weird, ugly, and surrounded by a dystopian wasteland of frameworks and libraries. Don't wanna Sound like a dick or nothing, but, uh, it says on your chart that you're fucked up. Welcome to JavaScript 101. Over the next few minutes, you you'll learn a 101 different things you need to know about JavaScript, like how to use it, where to use it, and why it is the way it is.
By the end of this video, you'll be able to build a website, a mobile app, a desktop a server, an operating system, artificial intelligence, and all kinds of other stuff you shouldn't build with it. It was created in 1993 by I Brendan Eich at Netscape. At the time, the web browser was cutting edge technology that connected everybody on the planet via the World Wide Web. Now that I've gotten on the Internet, I'd rather be on my Been doing just about anything. At the time, websites were completely static with pure HTML. JavaScript was designed as an easy to use high level language to help developers make these websites interactive, today, it's arguably the most popular language in the world, and its standard implementation is called ECMAScript and is the default language in all web browsers. In fact, it's the only code that natively runs in a browser aside from WebAssembly.
technology
websites
internet
youtube
video gaming
multimedia
social media
languages
google
However, the browser is not the only runtime, and you can also run JavaScript code on a server thanks to tools like Node. Js and Deno. As the name implies, JavaScript is a scripting language, that means you can execute code on the fly by opening up the console in your browser dev tools to run some code that changes the appearance of a website at any time.
It's interpreted line by line as opposed to other languages like C that are compiled ahead of time. However, interpreted is not the most accurate term to use here. Under the hood of the browser, there's an engine called v eight. It makes JavaScript run extremely fast by taking your code and converting it to machine code with a process called just in time compilation.
programming
But none of this stuff really matters. Let's jump into some code. To use JavaScript on a web page, you'll first need an HTML document, inside of which will have a tag.
You can write code inside the tag directly or reference an external file with the source attribute. Now to say hello world, use console log, which is JavaScript's built in tool for printing to the standard output. Now open the HTML file in a browser and you should see the value printed out in the dev tools. There are several different ways to define variables. The most common of which today is let. Start by giving it a name, which will normally be in camel case, then assign a value to it. It's a dynamically typed language, which means no data type annotations are necessary. In this case, I've assigned a number, which is one of the 7 primitive data types built into the language. However, we don't need to assign the variable we'll a value right now because it can be reassigned later.
languages
data management
programming
databases
Without an assignment, it automatically uses the primitive value of undefined as its it's default value.
However, we can explicitly represent an empty value using 'null'. And, later on, we could reassign that same variable to a string. It's an entirely different data type, but that's perfectly okay. Now, any value that's not a primitive will inherit from the object but more on that later. Right now, we need to talk about this semicolon.
logic
Technically, semicolons are optional because if you leave them out, the script parser will add them automatically. In real life, JavaScript developers will often fight to the death over whether or not to use semicolons, but let is not the only way to define a variable. Another common option is const, which is used for variables that cannot be reassigned later. But the original way to declare variable is var. I would recommend ignoring its existence altogether, although you will find it out in the wild. The reason we have so many different ways to define variables has to do with the lexical environment, which determines where variables work and where they don't. There's a global scope, which is where we are right now, which means this variable will be available everywhere. However, ever, if we define a variable inside a function, it then becomes local to that function and cannot be used outside of it.
And finally, if you have a statement like an if condition, variables can be scoped inside the braces or block. Unless you use var for that variable, which is not block scope, in which case, it will be hoisted up into the local scope for that function. And trust me, you don't want that weirdness in your life.
logical reasoning
When the function keyword is used by itself, it's called a function definition or statement. Functions are one of the main building blocks in JavaScript, and they work by taking an input or argument, then optionally return a value that can be used somewhere else.
Now functions are just objects, which means they can also be used as expressions allowing them to be used as variables or to construct higher order functions where a function is used as an argument or a return value. Functions can also be nested to create a closure that encapsulates data and logic from the rest of the program. Normally, when you call a function that has a variable with a primitive value, it's stored on the call stack, which is the browser's short term memory. However, when you
programming
operations
create a closure, the inner function can still access variables in the outer function, even after the initial function call, that happens because JavaScript automatically stores the data in the outer function in the heap memory, which will persist between function calls, you'll rarely have to think about that as a developer, but what you're more likely to run into is this. It's a keyword that references an object based on how a function is called. When called from the global scope, it references the window object in the browser. However, if that same function is attached to an object and called by that object, this will be a reference to that object. And you can manually bind a function to some other object using the bind method. This can be rather confusing, but modern JavaScript has another way to define functions using the arrow syntax. Arrow functions don't have their own this value and they're always anonymous, which makes them ideal for function expressions. Now one last thing you need to know about functions is that when passing arguments, a primitive like a number is passed by value, which means a copy is created of the original variable.
However, if the argument is an object, that means it's stored in the heap and it's passed by reference. That means multiple parts of the code might be mutating the same object. Speaking of which, let's talk about objects. The easiest way to define one is with the object literal syntax using braces.
programming
logic
But there's also an object type that can be created with a constructor using the new keyword.
An object contains a collection of key value pairs or properties and values. What's interesting is that objects can inherit properties from each other thanks to a mechanism called the prototype chain. Every object has a private property that links to exactly one prototype. This differs from class based inheritance found in many other languages because we're dealing with real objects that take up memory as opposed to extract classes in your code.
intellectual property
Now what's confusing is JavaScript supports object oriented programming with a class keyword. However, classes are just syntactic sugar for prototypal inheritance and objects. A class can define a constructor, which is a function that's called when the object it's first created. It can also have properties and optionally create getters and setters to access them. And it more easily encapsulates functions by organizing them as methods on an object instance or making them global to the class name with the static keyword. In addition to objects, JavaScript has a bunch of built in data structures like an array for holding a dynamic collection of indexed items or a set to hold a collection of unique items, or map, which also holds a key value pair like an object, but can be more easily looped over along with a variety of other features. Now, what you you should also know at this point is that JavaScript is garbage collected. That means it will automatically deallocate objects from memory when they're no longer referenced in your code. However, when have a map. All the properties will always be referenced. If that's not optimal, there's a weak map and weak set that contain properties that can be garbage collected to reduce memory usage. Now that we have a basic idea of what JavaScript looks like, let's talk about one of its most interesting features, which is its non blocking event loop. Normally, when you write code in a script, it's executed synchronously line by line, which means the next line can't start until the previous line finishes. With an event loop, we can write asynchronous code in JavaScript that runs in a separate thread pool while the rest of the application continues to execute. This is really important because modern websites often have multiple things going on at the same time, but they only have access to a single thread for computing called the main thread. Without asynchronous code, it would be impossible to multitask. An easy way to demonstrate this is with setTimeout, which takes a function as an argument, but won't actually call that until x number of milliseconds have elapsed. This is called a callback function because it gets enqueued in the event loop only to be called back later when it's ready to execute on the main read, callback functions are very common, but when they're overused and become too deeply nested, it leads to a situation called callback hell. Luckily, there are better ways to write async code like a Promise. A Promise is a wrapper for a value that's unknown right now, but that will resolve to a value in the future, like maybe a call to a third party API that resolves to some data. If something goes wrong, the promise can reject to raise an error. Now the consumer of the promise can use methods like then and catch to handle these two possible outcomes, or better yet, you can define an async function that will automatically return a promise.
Then in the body of the function, we can pause its execution using the await keyword to wait for other promises to resolve, and this results in nice readable code. However, in order to implement error handling, you'll want to wrap this code in a try a catch block. Now as your code grows in complexity, it won't all fit in a single file. Luckily, we can use modules to share code between files. By default, all the code in a file or module is private to that file.
programming
However, if there's some code we want to use elsewhere, like a function, we can make it a default export. This allows us to go to a different file and use an import statement to use the function there as well. It's also possible to export multiple values from a single file and then import them by name in the other file. But often, what you'll do in JavaScript land is use code written by an entirely different developer. The largest JavaScript package Azure is npm. When you install a package from npm, it downloads its code into the nodemodules folder in your project.
It also provides a package JSON file that will list out all the dependencies used in your project. Now let's go into the code and assume we're building a website. On the web, the code will run-in the browser which is based on the document object model where the UI is represented as a tree of HTML elements or nodes. The browser provides APIs to interact with these nodes with the most important object being the document, the document allows us to grab an individual HTML element using a method called querySelector.
programming
software
software development
It takes a CSS selector as an argument and will find the HTML element that has the same class name, ID, or tag name. It returns an instance of the element class, which itself has a variety of properties and methods to get information about it or change its behavior. In addition, we can grab multiple elements at the same time using query selector all. Most importantly, we can listen to events that happen to it, like when a button is clicked. With add event listener, we can assign a function that will be called whenever that event takes place. Much of web development revolves around listening to events and updating the UI accordingly. However, one thing that many developers dislike about vanilla JavaScript grip is that it results in imperative code where the UI is mutated directly. Many developers now use front end frameworks that produce declarative code where the UI is a function of its input data. These libraries encapsulate JavaScript, HTML, and CSS into components, which are then used together to form a component tree you represent the UI. Most importantly, inside a component, data is reactive. It can be bound from the JavaScript directly to the HTML. That means anytime data changes the UI will be updated automatically. Now after you build a complete JavaScript app, you'll need to take all of your JavaScript files and combine them into a single bundle that can be used by the browser. To handle this process efficiently, you'll need a tool called a module bundler like Vite or Webpack. One problem though is that sometimes this JavaScript file can get too big, which affects the page load performance, and this can be measured by the network waterfall in your browser dev tools. Luckily, it's possible to split this JavaScript bundle into multiple files, then use dynamic imports in your code you only import that JavaScript when it becomes needed. Now JavaScript doesn't just run-in the browser, but also on the server. Node. Js is the most popular runtime and you can execute you code at any time using the node command. This opens the door to frameworks like Electron, which combine Node. Js with a browser to create full stack desktop apps with JavaScript script or iOS and Android apps with React Native. At this point, you've got 99 problems and JavaScript is every single one of them. If you you wanna make life easier, use a tool like TypeScript or ESLint that does static analysis to improve your code quality.
Congratulations for reaching the end of JavaScript 101. If you wanna go beyond this video, I just released a brand new JavaScript course on Fireship IO. This video is the introduction to that course, which is followed by a deeper dive into these concepts, then we work on some hands on projects with a bunch of quizzes along the way. Thanks for watching, and I will see you in the next one.
documentary
teaching
video gaming
deep learning
machine learning
JavaScript. It's a wonderful programming language to learn for beginners. It's also a horrible programming language to learn for beginners. On one hand, you can build almost anything with it and get a job anywhere if you master it. On the other hand, it's weird, ugly, and surrounded by a dystopian wasteland of frameworks and libraries. Don't wanna Sound like a dick or nothing, but, uh, it says on your chart that you're fucked up. Welcome to JavaScript 101. Over the next few minutes, you you'll learn a 101 different things you need to know about JavaScript, like how to use it, where to use it, and why it is the way it is. By the end of this video, you'll be able to build a website, a mobile app, a desktop a server, an operating system, artificial intelligence, and all kinds of other stuff you shouldn't build with it. It was created in 1993 by I Brendan Eich at Netscape. At the time, the web browser was cutting edge technology that connected everybody on the planet via the World Wide Web. Now that I've gotten on the Internet, I'd rather be on my Been doing just about anything. At the time, websites were completely static with pure HTML. JavaScript was designed as an easy to use high level language to help developers make these websites interactive, today, it's arguably the most popular language in the world, and its standard implementation is called ECMAScript and is the default language in all web browsers. In fact, it's the only code that natively runs in a browser aside from WebAssembly. However, the browser is not the only runtime, and you can also run JavaScript code on a server thanks to tools like Node. Js and Deno. As the name implies, JavaScript is a scripting language, that means you can execute code on the fly by opening up the console in your browser dev tools to run some code that changes the appearance of a website at any time. It's interpreted line by line as opposed to other languages like C that are compiled ahead of time. However, interpreted is not the most accurate term to use here. Under the hood of the browser, there's an engine called v eight. It makes JavaScript run extremely fast by taking your code and converting it to machine code with a process called just in time compilation. But none of this stuff really matters. Let's jump into some code. To use JavaScript on a web page, you'll first need an HTML document, inside of which will have a tag. You can write code inside the tag directly or reference an external file with the source attribute. Now to say hello world, use console log, which is JavaScript's built in tool for printing to the standard output. Now open the HTML file in a browser and you should see the value printed out in the dev tools. There are several different ways to define variables. The most common of which today is let. Start by giving it a name, which will normally be in camel case, then assign a value to it. It's a dynamically typed language, which means no data type annotations are necessary. In this case, I've assigned a number, which is one of the 7 primitive data types built into the language. However, we don't need to assign the variable we'll a value right now because it can be reassigned later. Without an assignment, it automatically uses the primitive value of undefined as its it's default value. However, we can explicitly represent an empty value using 'null'. And, later on, we could reassign that same variable to a string. It's an entirely different data type, but that's perfectly okay. Now, any value that's not a primitive will inherit from the object but more on that later. Right now, we need to talk about this semicolon. Technically, semicolons are optional because if you leave them out, the script parser will add them automatically. In real life, JavaScript developers will often fight to the death over whether or not to use semicolons, but let is not the only way to define a variable. Another common option is const, which is used for variables that cannot be reassigned later. But the original way to declare variable is var. I would recommend ignoring its existence altogether, although you will find it out in the wild. The reason we have so many different ways to define variables has to do with the lexical environment, which determines where variables work and where they don't. There's a global scope, which is where we are right now, which means this variable will be available everywhere. However, ever, if we define a variable inside a function, it then becomes local to that function and cannot be used outside of it. And finally, if you have a statement like an if condition, variables can be scoped inside the braces or block. Unless you use var for that variable, which is not block scope, in which case, it will be hoisted up into the local scope for that function. And trust me, you don't want that weirdness in your life. When the function keyword is used by itself, it's called a function definition or statement. Functions are one of the main building blocks in JavaScript, and they work by taking an input or argument, then optionally return a value that can be used somewhere else. Now functions are just objects, which means they can also be used as expressions allowing them to be used as variables or to construct higher order functions where a function is used as an argument or a return value. Functions can also be nested to create a closure that encapsulates data and logic from the rest of the program. Normally, when you call a function that has a variable with a primitive value, it's stored on the call stack, which is the browser's short term memory. However, when you create a closure, the inner function can still access variables in the outer function, even after the initial function call, that happens because JavaScript automatically stores the data in the outer function in the heap memory, which will persist between function calls, you'll rarely have to think about that as a developer, but what you're more likely to run into is this. It's a keyword that references an object based on how a function is called. When called from the global scope, it references the window object in the browser. However, if that same function is attached to an object and called by that object, this will be a reference to that object. And you can manually bind a function to some other object using the bind method. This can be rather confusing, but modern JavaScript has another way to define functions using the arrow syntax. Arrow functions don't have their own this value and they're always anonymous, which makes them ideal for function expressions. Now one last thing you need to know about functions is that when passing arguments, a primitive like a number is passed by value, which means a copy is created of the original variable. However, if the argument is an object, that means it's stored in the heap and it's passed by reference. That means multiple parts of the code might be mutating the same object. Speaking of which, let's talk about objects. The easiest way to define one is with the object literal syntax using braces. But there's also an object type that can be created with a constructor using the new keyword. An object contains a collection of key value pairs or properties and values. What's interesting is that objects can inherit properties from each other thanks to a mechanism called the prototype chain. Every object has a private property that links to exactly one prototype. This differs from class based inheritance found in many other languages because we're dealing with real objects that take up memory as opposed to extract classes in your code. Now what's confusing is JavaScript supports object oriented programming with a class keyword. However, classes are just syntactic sugar for prototypal inheritance and objects. A class can define a constructor, which is a function that's called when the object it's first created. It can also have properties and optionally create getters and setters to access them. And it more easily encapsulates functions by organizing them as methods on an object instance or making them global to the class name with the static keyword. In addition to objects, JavaScript has a bunch of built in data structures like an array for holding a dynamic collection of indexed items or a set to hold a collection of unique items, or map, which also holds a key value pair like an object, but can be more easily looped over along with a variety of other features. Now, what you you should also know at this point is that JavaScript is garbage collected. That means it will automatically deallocate objects from memory when they're no longer referenced in your code. However, when have a map. All the properties will always be referenced. If that's not optimal, there's a weak map and weak set that contain properties that can be garbage collected to reduce memory usage. Now that we have a basic idea of what JavaScript looks like, let's talk about one of its most interesting features, which is its non blocking event loop. Normally, when you write code in a script, it's executed synchronously line by line, which means the next line can't start until the previous line finishes. With an event loop, we can write asynchronous code in JavaScript that runs in a separate thread pool while the rest of the application continues to execute. This is really important because modern websites often have multiple things going on at the same time, but they only have access to a single thread for computing called the main thread. Without asynchronous code, it would be impossible to multitask. An easy way to demonstrate this is with setTimeout, which takes a function as an argument, but won't actually call that until x number of milliseconds have elapsed. This is called a callback function because it gets enqueued in the event loop only to be called back later when it's ready to execute on the main read, callback functions are very common, but when they're overused and become too deeply nested, it leads to a situation called callback hell. Luckily, there are better ways to write async code like a Promise. A Promise is a wrapper for a value that's unknown right now, but that will resolve to a value in the future, like maybe a call to a third party API that resolves to some data. If something goes wrong, the promise can reject to raise an error. Now the consumer of the promise can use methods like then and catch to handle these two possible outcomes, or better yet, you can define an async function that will automatically return a promise. Then in the body of the function, we can pause its execution using the await keyword to wait for other promises to resolve, and this results in nice readable code. However, in order to implement error handling, you'll want to wrap this code in a try a catch block. Now as your code grows in complexity, it won't all fit in a single file. Luckily, we can use modules to share code between files. By default, all the code in a file or module is private to that file. However, if there's some code we want to use elsewhere, like a function, we can make it a default export. This allows us to go to a different file and use an import statement to use the function there as well. It's also possible to export multiple values from a single file and then import them by name in the other file. But often, what you'll do in JavaScript land is use code written by an entirely different developer. The largest JavaScript package Azure is npm. When you install a package from npm, it downloads its code into the nodemodules folder in your project. It also provides a package JSON file that will list out all the dependencies used in your project. Now let's go into the code and assume we're building a website. On the web, the code will run-in the browser which is based on the document object model where the UI is represented as a tree of HTML elements or nodes. The browser provides APIs to interact with these nodes with the most important object being the document, the document allows us to grab an individual HTML element using a method called querySelector. It takes a CSS selector as an argument and will find the HTML element that has the same class name, ID, or tag name. It returns an instance of the element class, which itself has a variety of properties and methods to get information about it or change its behavior. In addition, we can grab multiple elements at the same time using query selector all. Most importantly, we can listen to events that happen to it, like when a button is clicked. With add event listener, we can assign a function that will be called whenever that event takes place. Much of web development revolves around listening to events and updating the UI accordingly. However, one thing that many developers dislike about vanilla JavaScript grip is that it results in imperative code where the UI is mutated directly. Many developers now use front end frameworks that produce declarative code where the UI is a function of its input data. These libraries encapsulate JavaScript, HTML, and CSS into components, which are then used together to form a component tree you represent the UI. Most importantly, inside a component, data is reactive. It can be bound from the JavaScript directly to the HTML. That means anytime data changes the UI will be updated automatically. Now after you build a complete JavaScript app, you'll need to take all of your JavaScript files and combine them into a single bundle that can be used by the browser. To handle this process efficiently, you'll need a tool called a module bundler like Vite or Webpack. One problem though is that sometimes this JavaScript file can get too big, which affects the page load performance, and this can be measured by the network waterfall in your browser dev tools. Luckily, it's possible to split this JavaScript bundle into multiple files, then use dynamic imports in your code you only import that JavaScript when it becomes needed. Now JavaScript doesn't just run-in the browser, but also on the server. Node. Js is the most popular runtime and you can execute you code at any time using the node command. This opens the door to frameworks like Electron, which combine Node. Js with a browser to create full stack desktop apps with JavaScript script or iOS and Android apps with React Native. At this point, you've got 99 problems and JavaScript is every single one of them. If you you wanna make life easier, use a tool like TypeScript or ESLint that does static analysis to improve your code quality. Congratulations for reaching the end of JavaScript 101. If you wanna go beyond this video, I just released a brand new JavaScript course on Fireship IO. This video is the introduction to that course, which is followed by a deeper dive into these concepts, then we work on some hands on projects with a bunch of quizzes along the way. Thanks for watching, and I will see you in the next one.
JavaScript.
javascript
It's
it's
a
a
wonderful
wonderful
programming
programming
language
language
to
to
learn
learn
for
for
beginners.
beginners
It's
it's
also
also
a
a
horrible
horrible
programming
programming
language
language
to
to
learn
learn
for
for
beginners.
beginners
On
on
one
one
hand,
hand
you
you
can
can
build
build
almost
almost
anything
anything
with
with
it
it
and
and
get
get
a
a
job
job
anywhere
anywhere
if
if
you
you
master
master
it.
it
On
on
the
the
other
other
hand,
hand
it's
it's
weird,
weird
ugly,
ugly
and
and
surrounded
surrounded
by
by
a
a
dystopian
dystopian
wasteland
wasteland
of
of
frameworks
frameworks
and
and
libraries.
libraries
Don't
don't
wanna
wanna
Sound
sound
like
like
a
a
dick
dick
or
or
nothing,
nothing
but,
but
uh,
uh
it
it
says
says
on
on
your
your
chart
chart
that
that
you're
you're
fucked
fucked
up.
up
Welcome
welcome
to
to
JavaScript
javascript
101.
101
Over
over
the
the
next
next
few
few
minutes,
minutes
you
you
you'll
you'll
learn
learn
a
a
101
101
different
different
things
things
you
you
need
need
to
to
know
know
about
about
JavaScript,
javascript
like
like
how
how
to
to
use
use
it,
it
where
where
to
to
use
use
it,
it
and
and
why
why
it
it
is
is
the
the
way
way
it
it
is.
is
By
by
the
the
end
end
of
of
this
this
video,
video
you'll
you'll
be
be
able
able
to
to
build
build
a
a
website,
website
a
a
mobile
mobile
app,
app
a
a
desktop
desktop
a
a
server,
server
an
an
operating
operating
system,
system
artificial
artificial
intelligence,
intelligence
and
and
all
all
kinds
kinds
of
of
other
other
stuff
stuff
you
you
shouldn't
shouldn't
build
build
with
with
it.
it
It
it
was
was
created
created
in
in
1993
1993
by
by
I
i
Brendan
brendan
Eich
eich
at
at
Netscape.
netscape
At
at
the
the
time,
time
the
the
web
web
browser
browser
was
was
cutting
cutting
edge
edge
technology
technology
that
that
connected
connected
everybody
everybody
on
on
the
the
planet
planet
via
via
the
the
World
world
Wide
wide
Web.
web
Now
now
that
that
I've
i've
gotten
gotten
on
on
the
the
Internet,
internet
I'd
i'd
rather
rather
be
be
on
on
my
my
Been
been
doing
doing
just
just
about
about
anything.
anything
At
at
the
the
time,
time
websites
websites
were
were
completely
completely
static
static
with
with
pure
pure
HTML.
html
JavaScript
javascript
was
was
designed
designed
as
as
an
an
easy
easy
to
to
use
use
high
high
level
level
language
language
to
to
help
help
developers
developers
make
make
these
these
websites
websites
interactive,
interactive
today,
today
it's
it's
arguably
arguably
the
the
most
most
popular
popular
language
language
in
in
the
the
world,
world
and
and
its
its
standard
standard
implementation
implementation
is
is
called
called
ECMAScript
ecmascript
and
and
is
is
the
the
default
default
language
language
in
in
all
all
web
web
browsers.
browsers
In
in
fact,
fact
it's
it's
the
the
only
only
code
code
that
that
natively
natively
runs
runs
in
in
a
a
browser
browser
aside
aside
from
from
WebAssembly.
webassembly
However,
however
the
the
browser
browser
is
is
not
not
the
the
only
only
runtime,
runtime
and
and
you
you
can
can
also
also
run
run
JavaScript
javascript
code
code
on
on
a
a
server
server
thanks
thanks
to
to
tools
tools
like
like
Node.
node
Js
js
and
and
Deno.
deno
As
as
the
the
name
name
implies,
implies
JavaScript
javascript
is
is
a
a
scripting
scripting
language,
language
that
that
means
means
you
you
can
can
execute
execute
code
code
on
on
the
the
fly
fly
by
by
opening
opening
up
up
the
the
console
console
in
in
your
your
browser
browser
dev
dev
tools
tools
to
to
run
run
some
some
code
code
that
that
changes
changes
the
the
appearance
appearance
of
of
a
a
website
website
at
at
any
any
time.
time
It's
it's
interpreted
interpreted
line
line
by
by
line
line
as
as
opposed
opposed
to
to
other
other
languages
languages
like
like
C
c
that
that
are
are
compiled
compiled
ahead
ahead
of
of
time.
time
However,
however
interpreted
interpreted
is
is
not
not
the
the
most
most
accurate
accurate
term
term
to
to
use
use
here.
here
Under
under
the
the
hood
hood
of
of
the
the
browser,
browser
there's
there's
an
an
engine
engine
called
called
v
v
eight.
eight
It
it
makes
makes
JavaScript
javascript
run
run
extremely
extremely
fast
fast
by
by
taking
taking
your
your
code
code
and
and
converting
converting
it
it
to
to
machine
machine
code
code
with
with
a
a
process
process
called
called
just
just
in
in
time
time
compilation.
compilation
But
but
none
none
of
of
this
this
stuff
stuff
really
really
matters.
matters
Let's
let's
jump
jump
into
into
some
some
code.
code
To
to
use
use
JavaScript
javascript
on
on
a
a
web
web
page,
page
you'll
you'll
first
first
need
need
an
an
HTML
html
document,
document
inside
inside
of
of
which
which
will
will
have
have
a
a
tag.
tag
You
you
can
can
write
write
code
code
inside
inside
the
the
tag
tag
directly
directly
or
or
reference
reference
an
an
external
external
file
file
with
with
the
the
source
source
attribute.
attribute
Now
now
to
to
say
say
hello
hello
world,
world
use
use
console
console
log,
log
which
which
is
is
JavaScript's
javascript's
built
built
in
in
tool
tool
for
for
printing
printing
to
to
the
the
standard
standard
output.
output
Now
now
open
open
the
the
HTML
html
file
file
in
in
a
a
browser
browser
and
and
you
you
should
should
see
see
the
the
value
value
printed
printed
out
out
in
in
the
the
dev
dev
tools.
tools
There
there
are
are
several
several
different
different
ways
ways
to
to
define
define
variables.
variables
The
the
most
most
common
common
of
of
which
which
today
today
is
is
let.
let
Start
start
by
by
giving
giving
it
it
a
a
name,
name
which
which
will
will
normally
normally
be
be
in
in
camel
camel
case,
case
then
then
assign
assign
a
a
value
value
to
to
it.
it
It's
it's
a
a
dynamically
dynamically
typed
typed
language,
language
which
which
means
means
no
no
data
data
type
type
annotations
annotations
are
are
necessary.
necessary
In
in
this
this
case,
case
I've
i've
assigned
assigned
a
a
number,
number
which
which
is
is
one
one
of
of
the
the
7
7
primitive
primitive
data
data
types
types
built
built
into
into
the
the
language.
language
However,
however
we
we
don't
don't
need
need
to
to
assign
assign
the
the
variable
variable
we'll
we'll
a
a
value
value
right
right
now
now
because
because
it
it
can
can
be
be
reassigned
reassigned
later.
later
Without
without
an
an
assignment,
assignment
it
it
automatically
automatically
uses
uses
the
the
primitive
primitive
value
value
of
of
undefined
undefined
as
as
its
its
it's
it's
default
default
value.
value
However,
however
we
we
can
can
explicitly
explicitly
represent
represent
an
an
empty
empty
value
value
using
using
'null'.
'null'
And,
and
later
later
on,
on
we
we
could
could
reassign
reassign
that
that
same
same
variable
variable
to
to
a
a
string.
string
It's
it's
an
an
entirely
entirely
different
different
data
data
type,
type
but
but
that's
that's
perfectly
perfectly
okay.
okay
Now,
now
any
any
value
value
that's
that's
not
not
a
a
primitive
primitive
will
will
inherit
inherit
from
from
the
the
object
object
but
but
more
more
on
on
that
that
later.
later
Right
right
now,
now
we
we
need
need
to
to
talk
talk
about
about
this
this
semicolon.
semicolon
Technically,
technically
semicolons
semicolons
are
are
optional
optional
because
because
if
if
you
you
leave
leave
them
them
out,
out
the
the
script
script
parser
parser
will
will
add
add
them
them
automatically.
automatically
In
in
real
real
life,
life
JavaScript
javascript
developers
developers
will
will
often
often
fight
fight
to
to
the
the
death
death
over
over
whether
whether
or
or
not
not
to
to
use
use
semicolons,
semicolons
but
but
let
let
is
is
not
not
the
the
only
only
way
way
to
to
define
define
a
a
variable.
variable
Another
another
common
common
option
option
is
is
const,
const
which
which
is
is
used
used
for
for
variables
variables
that
that
cannot
cannot
be
be
reassigned
reassigned
later.
later
But
but
the
the
original
original
way
way
to
to
declare
declare
variable
variable
is
is
var.
var
I
i
would
would
recommend
recommend
ignoring
ignoring
its
its
existence
existence
altogether,
altogether
although
although
you
you
will
will
find
find
it
it
out
out
in
in
the
the
wild.
wild
The
the
reason
reason
we
we
have
have
so
so
many
many
different
different
ways
ways
to
to
define
define
variables
variables
has
has
to
to
do
do
with
with
the
the
lexical
lexical
environment,
environment
which
which
determines
determines
where
where
variables
variables
work
work
and
and
where
where
they
they
don't.
don't
There's
there's
a
a
global
global
scope,
scope
which
which
is
is
where
where
we
we
are
are
right
right
now,
now
which
which
means
means
this
this
variable
variable
will
will
be
be
available
available
everywhere.
everywhere
However,
however
ever,
ever
if
if
we
we
define
define
a
a
variable
variable
inside
inside
a
a
function,
function
it
it
then
then
becomes
becomes
local
local
to
to
that
that
function
function
and
and
cannot
cannot
be
be
used
used
outside
outside
of
of
it.
it
And
and
finally,
finally
if
if
you
you
have
have
a
a
statement
statement
like
like
an
an
if
if
condition,
condition
variables
variables
can
can
be
be
scoped
scoped
inside
inside
the
the
braces
braces
or
or
block.
block
Unless
unless
you
you
use
use
var
var
for
for
that
that
variable,
variable
which
which
is
is
not
not
block
block
scope,
scope
in
in
which
which
case,
case
it
it
will
will
be
be
hoisted
hoisted
up
up
into
into
the
the
local
local
scope
scope
for
for
that
that
function.
function
And
and
trust
trust
me,
me
you
you
don't
don't
want
want
that
that
weirdness
weirdness
in
in
your
your
life.
life
When
when
the
the
function
function
keyword
keyword
is
is
used
used
by
by
itself,
itself
it's
it's
called
called
a
a
function
function
definition
definition
or
or
statement.
statement
Functions
functions
are
are
one
one
of
of
the
the
main
main
building
building
blocks
blocks
in
in
JavaScript,
javascript
and
and
they
they
work
work
by
by
taking
taking
an
an
input
input
or
or
argument,
argument
then
then
optionally
optionally
return
return
a
a
value
value
that
that
can
can
be
be
used
used
somewhere
somewhere
else.
else
Now
now
functions
functions
are
are
just
just
objects,
objects
which
which
means
means
they
they
can
can
also
also
be
be
used
used
as
as
expressions
expressions
allowing
allowing
them
them
to
to
be
be
used
used
as
as
variables
variables
or
or
to
to
construct
construct
higher
higher
order
order
functions
functions
where
where
a
a
function
function
is
is
used
used
as
as
an
an
argument
argument
or
or
a
a
return
return
value.
value
Functions
functions
can
can
also
also
be
be
nested
nested
to
to
create
create
a
a
closure
closure
that
that
encapsulates
encapsulates
data
data
and
and
logic
logic
from
from
the
the
rest
rest
of
of
the
the
program.
program
Normally,
normally
when
when
you
you
call
call
a
a
function
function
that
that
has
has
a
a
variable
variable
with
with
a
a
primitive
primitive
value,
value
it's
it's
stored
stored
on
on
the
the
call
call
stack,
stack
which
which
is
is
the
the
browser's
browser's
short
short
term
term
memory.
memory
However,
however
when
when
you
you
create
create
a
a
closure,
closure
the
the
inner
inner
function
function
can
can
still
still
access
access
variables
variables
in
in
the
the
outer
outer
function,
function
even
even
after
after
the
the
initial
initial
function
function
call,
call
that
that
happens
happens
because
because
JavaScript
javascript
automatically
automatically
stores
stores
the
the
data
data
in
in
the
the
outer
outer
function
function
in
in
the
the
heap
heap
memory,
memory
which
which
will
will
persist
persist
between
between
function
function
calls,
calls
you'll
you'll
rarely
rarely
have
have
to
to
think
think
about
about
that
that
as
as
a
a
developer,
developer
but
but
what
what
you're
you're
more
more
likely
likely
to
to
run
run
into
into
is
is
this.
this
It's
it's
a
a
keyword
keyword
that
that
references
references
an
an
object
object
based
based
on
on
how
how
a
a
function
function
is
is
called.
called
When
when
called
called
from
from
the
the
global
global
scope,
scope
it
it
references
references
the
the
window
window
object
object
in
in
the
the
browser.
browser
However,
however
if
if
that
that
same
same
function
function
is
is
attached
attached
to
to
an
an
object
object
and
and
called
called
by
by
that
that
object,
object
this
this
will
will
be
be
a
a
reference
reference
to
to
that
that
object.
object
And
and
you
you
can
can
manually
manually
bind
bind
a
a
function
function
to
to
some
some
other
other
object
object
using
using
the
the
bind
bind
method.
method
This
this
can
can
be
be
rather
rather
confusing,
confusing
but
but
modern
modern
JavaScript
javascript
has
has
another
another
way
way
to
to
define
define
functions
functions
using
using
the
the
arrow
arrow
syntax.
syntax
Arrow
arrow
functions
functions
don't
don't
have
have
their
their
own
own
this
this
value
value
and
and
they're
they're
always
always
anonymous,
anonymous
which
which
makes
makes
them
them
ideal
ideal
for
for
function
function
expressions.
expressions
Now
now
one
one
last
last
thing
thing
you
you
need
need
to
to
know
know
about
about
functions
functions
is
is
that
that
when
when
passing
passing
arguments,
arguments
a
a
primitive
primitive
like
like
a
a
number
number
is
is
passed
passed
by
by
value,
value
which
which
means
means
a
a
copy
copy
is
is
created
created
of
of
the
the
original
original
variable.
variable
However,
however
if
if
the
the
argument
argument
is
is
an
an
object,
object
that
that
means
means
it's
it's
stored
stored
in
in
the
the
heap
heap
and
and
it's
it's
passed
passed
by
by
reference.
reference
That
that
means
means
multiple
multiple
parts
parts
of
of
the
the
code
code
might
might
be
be
mutating
mutating
the
the
same
same
object.
object
Speaking
speaking
of
of
which,
which
let's
let's
talk
talk
about
about
objects.
objects
The
the
easiest
easiest
way
way
to
to
define
define
one
one
is
is
with
with
the
the
object
object
literal
literal
syntax
syntax
using
using
braces.
braces
But
but
there's
there's
also
also
an
an
object
object
type
type
that
that
can
can
be
be
created
created
with
with
a
a
constructor
constructor
using
using
the
the
new
new
keyword.
keyword
An
an
object
object
contains
contains
a
a
collection
collection
of
of
key
key
value
value
pairs
pairs
or
or
properties
properties
and
and
values.
values
What's
what's
interesting
interesting
is
is
that
that
objects
objects
can
can
inherit
inherit
properties
properties
from
from
each
each
other
other
thanks
thanks
to
to
a
a
mechanism
mechanism
called
called
the
the
prototype
prototype
chain.
chain
Every
every
object
object
has
has
a
a
private
private
property
property
that
that
links
links
to
to
exactly
exactly
one
one
prototype.
prototype
This
this
differs
differs
from
from
class
class
based
based
inheritance
inheritance
found
found
in
in
many
many
other
other
languages
languages
because
because
we're
we're
dealing
dealing
with
with
real
real
objects
objects
that
that
take
take
up
up
memory
memory
as
as
opposed
opposed
to
to
extract
extract
classes
classes
in
in
your
your
code.
code
Now
now
what's
what's
confusing
confusing
is
is
JavaScript
javascript
supports
supports
object
object
oriented
oriented
programming
programming
with
with
a
a
class
class
keyword.
keyword
However,
however
classes
classes
are
are
just
just
syntactic
syntactic
sugar
sugar
for
for
prototypal
prototypal
inheritance
inheritance
and
and
objects.
objects
A
a
class
class
can
can
define
define
a
a
constructor,
constructor
which
which
is
is
a
a
function
function
that's
that's
called
called
when
when
the
the
object
object
it's
it's
first
first
created.
created
It
it
can
can
also
also
have
have
properties
properties
and
and
optionally
optionally
create
create
getters
getters
and
and
setters
setters
to
to
access
access
them.
them
And
and
it
it
more
more
easily
easily
encapsulates
encapsulates
functions
functions
by
by
organizing
organizing
them
them
as
as
methods
methods
on
on
an
an
object
object
instance
instance
or
or
making
making
them
them
global
global
to
to
the
the
class
class
name
name
with
with
the
the
static
static
keyword.
keyword
In
in
addition
addition
to
to
objects,
objects
JavaScript
javascript
has
has
a
a
bunch
bunch
of
of
built
built
in
in
data
data
structures
structures
like
like
an
an
array
array
for
for
holding
holding
a
a
dynamic
dynamic
collection
collection
of
of
indexed
indexed
items
items
or
or
a
a
set
set
to
to
hold
hold
a
a
collection
collection
of
of
unique
unique
items,
items
or
or
map,
map
which
which
also
also
holds
holds
a
a
key
key
value
value
pair
pair
like
like
an
an
object,
object
but
but
can
can
be
be
more
more
easily
easily
looped
looped
over
over
along
along
with
with
a
a
variety
variety
of
of
other
other
features.
features
Now,
now
what
what
you
you
you
you
should
should
also
also
know
know
at
at
this
this
point
point
is
is
that
that
JavaScript
javascript
is
is
garbage
garbage
collected.
collected
That
that
means
means
it
it
will
will
automatically
automatically
deallocate
deallocate
objects
objects
from
from
memory
memory
when
when
they're
they're
no
no
longer
longer
referenced
referenced
in
in
your
your
code.
code
However,
however
when
when
have
have
a
a
map.
map
All
all
the
the
properties
properties
will
will
always
always
be
be
referenced.
referenced
If
if
that's
that's
not
not
optimal,
optimal
there's
there's
a
a
weak
weak
map
map
and
and
weak
weak
set
set
that
that
contain
contain
properties
properties
that
that
can
can
be
be
garbage
garbage
collected
collected
to
to
reduce
reduce
memory
memory
usage.
usage
Now
now
that
that
we
we
have
have
a
a
basic
basic
idea
idea
of
of
what
what
JavaScript
javascript
looks
looks
like,
like
let's
let's
talk
talk
about
about
one
one
of
of
its
its
most
most
interesting
interesting
features,
features
which
which
is
is
its
its
non
non
blocking
blocking
event
event
loop.
loop
Normally,
normally
when
when
you
you
write
write
code
code
in
in
a
a
script,
script
it's
it's
executed
executed
synchronously
synchronously
line
line
by
by
line,
line
which
which
means
means
the
the
next
next
line
line
can't
can't
start
start
until
until
the
the
previous
previous
line
line
finishes.
finishes
With
with
an
an
event
event
loop,
loop
we
we
can
can
write
write
asynchronous
asynchronous
code
code
in
in
JavaScript
javascript
that
that
runs
runs
in
in
a
a
separate
separate
thread
thread
pool
pool
while
while
the
the
rest
rest
of
of
the
the
application
application
continues
continues
to
to
execute.
execute
This
this
is
is
really
really
important
important
because
because
modern
modern
websites
websites
often
often
have
have
multiple
multiple
things
things
going
going
on
on
at
at
the
the
same
same
time,
time
but
but
they
they
only
only
have
have
access
access
to
to
a
a
single
single
thread
thread
for
for
computing
computing
called
called
the
the
main
main
thread.
thread
Without
without
asynchronous
asynchronous
code,
code
it
it
would
would
be
be
impossible
impossible
to
to
multitask.
multitask
An
an
easy
easy
way
way
to
to
demonstrate
demonstrate
this
this
is
is
with
with
setTimeout,
settimeout
which
which
takes
takes
a
a
function
function
as
as
an
an
argument,
argument
but
but
won't
won't
actually
actually
call
call
that
that
until
until
x
x
number
number
of
of
milliseconds
milliseconds
have
have
elapsed.
elapsed
This
this
is
is
called
called
a
a
callback
callback
function
function
because
because
it
it
gets
gets
enqueued
enqueued
in
in
the
the
event
event
loop
loop
only
only
to
to
be
be
called
called
back
back
later
later
when
when
it's
it's
ready
ready
to
to
execute
execute
on
on
the
the
main
main
read,
read
callback
callback
functions
functions
are
are
very
very
common,
common
but
but
when
when
they're
they're
overused
overused
and
and
become
become
too
too
deeply
deeply
nested,
nested
it
it
leads
leads
to
to
a
a
situation
situation
called
called
callback
callback
hell.
hell
Luckily,
luckily
there
there
are
are
better
better
ways
ways
to
to
write
write
async
async
code
code
like
like
a
a
Promise.
promise
A
a
Promise
promise
is
is
a
a
wrapper
wrapper
for
for
a
a
value
value
that's
that's
unknown
unknown
right
right
now,
now
but
but
that
that
will
will
resolve
resolve
to
to
a
a
value
value
in
in
the
the
future,
future
like
like
maybe
maybe
a
a
call
call
to
to
a
a
third
third
party
party
API
api
that
that
resolves
resolves
to
to
some
some
data.
data
If
if
something
something
goes
goes
wrong,
wrong
the
the
promise
promise
can
can
reject
reject
to
to
raise
raise
an
an
error.
error
Now
now
the
the
consumer
consumer
of
of
the
the
promise
promise
can
can
use
use
methods
methods
like
like
then
then
and
and
catch
catch
to
to
handle
handle
these
these
two
two
possible
possible
outcomes,
outcomes
or
or
better
better
yet,
yet
you
you
can
can
define
define
an
an
async
async
function
function
that
that
will
will
automatically
automatically
return
return
a
a
promise.
promise
Then
then
in
in
the
the
body
body
of
of
the
the
function,
function
we
we
can
can
pause
pause
its
its
execution
execution
using
using
the
the
await
await
keyword
keyword
to
to
wait
wait
for
for
other
other
promises
promises
to
to
resolve,
resolve
and
and
this
this
results
results
in
in
nice
nice
readable
readable
code.
code
However,
however
in
in
order
order
to
to
implement
implement
error
error
handling,
handling
you'll
you'll
want
want
to
to
wrap
wrap
this
this
code
code
in
in
a
a
try
try
a
a
catch
catch
block.
block
Now
now
as
as
your
your
code
code
grows
grows
in
in
complexity,
complexity
it
it
won't
won't
all
all
fit
fit
in
in
a
a
single
single
file.
file
Luckily,
luckily
we
we
can
can
use
use
modules
modules
to
to
share
share
code
code
between
between
files.
files
By
by
default,
default
all
all
the
the
code
code
in
in
a
a
file
file
or
or
module
module
is
is
private
private
to
to
that
that
file.
file
However,
however
if
if
there's
there's
some
some
code
code
we
we
want
want
to
to
use
use
elsewhere,
elsewhere
like
like
a
a
function,
function
we
we
can
can
make
make
it
it
a
a
default
default
export.
export
This
this
allows
allows
us
us
to
to
go
go
to
to
a
a
different
different
file
file
and
and
use
use
an
an
import
import
statement
statement
to
to
use
use
the
the
function
function
there
there
as
as
well.
well
It's
it's
also
also
possible
possible
to
to
export
export
multiple
multiple
values
values
from
from
a
a
single
single
file
file
and
and
then
then
import
import
them
them
by
by
name
name
in
in
the
the
other
other
file.
file
But
but
often,
often
what
what
you'll
you'll
do
do
in
in
JavaScript
javascript
land
land
is
is
use
use
code
code
written
written
by
by
an
an
entirely
entirely
different
different
developer.
developer
The
the
largest
largest
JavaScript
javascript
package
package
Azure
azure
is
is
npm.
npm
When
when
you
you
install
install
a
a
package
package
from
from
npm,
npm
it
it
downloads
downloads
its
its
code
code
into
into
the
the
nodemodules
nodemodules
folder
folder
in
in
your
your
project.
project
It
it
also
also
provides
provides
a
a
package
package
JSON
json
file
file
that
that
will
will
list
list
out
out
all
all
the
the
dependencies
dependencies
used
used
in
in
your
your
project.
project
Now
now
let's
let's
go
go
into
into
the
the
code
code
and
and
assume
assume
we're
we're
building
building
a
a
website.
website
On
on
the
the
web,
web
the
the
code
code
will
will
run-in
run-in
the
the
browser
browser
which
which
is
is
based
based
on
on
the
the
document
document
object
object
model
model
where
where
the
the
UI
ui
is
is
represented
represented
as
as
a
a
tree
tree
of
of
HTML
html
elements
elements
or
or
nodes.
nodes
The
the
browser
browser
provides
provides
APIs
apis
to
to
interact
interact
with
with
these
these
nodes
nodes
with
with
the
the
most
most
important
important
object
object
being
being
the
the
document,
document
the
the
document
document
allows
allows
us
us
to
to
grab
grab
an
an
individual
individual
HTML
html
element
element
using
using
a
a
method
method
called
called
querySelector.
queryselector
It
it
takes
takes
a
a
CSS
css
selector
selector
as
as
an
an
argument
argument
and
and
will
will
find
find
the
the
HTML
html
element
element
that
that
has
has
the
the
same
same
class
class
name,
name
ID,
id
or
or
tag
tag
name.
name
It
it
returns
returns
an
an
instance
instance
of
of
the
the
element
element
class,
class
which
which
itself
itself
has
has
a
a
variety
variety
of
of
properties
properties
and
and
methods
methods
to
to
get
get
information
information
about
about
it
it
or
or
change
change
its
its
behavior.
behavior
In
in
addition,
addition
we
we
can
can
grab
grab
multiple
multiple
elements
elements
at
at
the
the
same
same
time
time
using
using
query
query
selector
selector
all.
all
Most
most
importantly,
importantly
we
we
can
can
listen
listen
to
to
events
events
that
that
happen
happen
to
to
it,
it
like
like
when
when
a
a
button
button
is
is
clicked.
clicked
With
with
add
add
event
event
listener,
listener
we
we
can
can
assign
assign
a
a
function
function
that
that
will
will
be
be
called
called
whenever
whenever
that
that
event
event
takes
takes
place.
place
Much
much
of
of
web
web
development
development
revolves
revolves
around
around
listening
listening
to
to
events
events
and
and
updating
updating
the
the
UI
ui
accordingly.
accordingly
However,
however
one
one
thing
thing
that
that
many
many
developers
developers
dislike
dislike
about
about
vanilla
vanilla
JavaScript
javascript
grip
grip
is
is
that
that
it
it
results
results
in
in
imperative
imperative
code
code
where
where
the
the
UI
ui
is
is
mutated
mutated
directly.
directly
Many
many
developers
developers
now
now
use
use
front
front
end
end
frameworks
frameworks
that
that
produce
produce
declarative
declarative
code
code
where
where
the
the
UI
ui
is
is
a
a
function
function
of
of
its
its
input
input
data.
data
These
these
libraries
libraries
encapsulate
encapsulate
JavaScript,
javascript
HTML,
html
and
and
CSS
css
into
into
components,
components
which
which
are
are
then
then
used
used
together
together
to
to
form
form
a
a
component
component
tree
tree
you
you
represent
represent
the
the
UI.
ui
Most
most
importantly,
importantly
inside
inside
a
a
component,
component
data
data
is
is
reactive.
reactive
It
it
can
can
be
be
bound
bound
from
from
the
the
JavaScript
javascript
directly
directly
to
to
the
the
HTML.
html
That
that
means
means
anytime
anytime
data
data
changes
changes
the
the
UI
ui
will
will
be
be
updated
updated
automatically.
automatically
Now
now
after
after
you
you
build
build
a
a
complete
complete
JavaScript
javascript
app,
app
you'll
you'll
need
need
to
to
take
take
all
all
of
of
your
your
JavaScript
javascript
files
files
and
and
combine
combine
them
them
into
into
a
a
single
single
bundle
bundle
that
that
can
can
be
be
used
used
by
by
the
the
browser.
browser
To
to
handle
handle
this
this
process
process
efficiently,
efficiently
you'll
you'll
need
need
a
a
tool
tool
called
called
a
a
module
module
bundler
bundler
like
like
Vite
vite
or
or
Webpack.
webpack
One
one
problem
problem
though
though
is
is
that
that
sometimes
sometimes
this
this
JavaScript
javascript
file
file
can
can
get
get
too
too
big,
big
which
which
affects
affects
the
the
page
page
load
load
performance,
performance
and
and
this
this
can
can
be
be
measured
measured
by
by
the
the
network
network
waterfall
waterfall
in
in
your
your
browser
browser
dev
dev
tools.
tools
Luckily,
luckily
it's
it's
possible
possible
to
to
split
split
this
this
JavaScript
javascript
bundle
bundle
into
into
multiple
multiple
files,
files
then
then
use
use
dynamic
dynamic
imports
imports
in
in
your
your
code
code
you
you
only
only
import
import
that
that
JavaScript
javascript
when
when
it
it
becomes
becomes
needed.
needed
Now
now
JavaScript
javascript
doesn't
doesn't
just
just
run-in
run-in
the
the
browser,
browser
but
but
also
also
on
on
the
the
server.
server
Node.
node
Js
js
is
is
the
the
most
most
popular
popular
runtime
runtime
and
and
you
you
can
can
execute
execute
you
you
code
code
at
at
any
any
time
time
using
using
the
the
node
node
command.
command
This
this
opens
opens
the
the
door
door
to
to
frameworks
frameworks
like
like
Electron,
electron
which
which
combine
combine
Node.
node
Js
js
with
with
a
a
browser
browser
to
to
create
create
full
full
stack
stack
desktop
desktop
apps
apps
with
with
JavaScript
javascript
script
script
or
or
iOS
ios
and
and
Android
android
apps
apps
with
with
React
react
Native.
native
At
at
this
this
point,
point
you've
you've
got
got
99
99
problems
problems
and
and
JavaScript
javascript
is
is
every
every
single
single
one
one
of
of
them.
them
If
if
you
you
you
you
wanna
wanna
make
make
life
life
easier,
easier
use
use
a
a
tool
tool
like
like
TypeScript
typescript
or
or
ESLint
eslint
that
that
does
does
static
static
analysis
analysis
to
to
improve
improve
your
your
code
code
quality.
quality
Congratulations
congratulations
for
for
reaching
reaching
the
the
end
end
of
of
JavaScript
javascript
101.
101
If
if
you
you
wanna
wanna
go
go
beyond
beyond
this
this
video,
video
I
i
just
just
released
released
a
a
brand
brand
new
new
JavaScript
javascript
course
course
on
on
Fireship
fireship
IO.
io
This
this
video
video
is
is
the
the
introduction
introduction
to
to
that
that
course,
course
which
which
is
is
followed
followed
by
by
a
a
deeper
deeper
dive
dive
into
into
these
these
concepts,
concepts
then
then
we
we
work
work
on
on
some
some
hands
hands
on
on
projects
projects
with
with
a
a
bunch
bunch
of
of
quizzes
quizzes
along
along
the
the
way.
way
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
The speaker explains that JavaScript is a programming language easy for beginners, but also horrible for beginners. They discuss the use of sem tours and the use of objects in JavaScript, as well as the importance of avoiding mistakes in writing code and avoiding mistakes in creating a complete JavaScript app. The speaker emphasizes the use of object-oriented programming, including the use of object-oriented classes and data structures like array and sets, and explains the concept of a non blocking event loop and async code in JavaScript. They also mention a new JavaScript course on Fireship IO and encourage viewers to check out a course on Fireship IO.
100+ JavaScript Concepts you Need to Know
JavaScript. It's a wonderful programming language to learn for beginners. It's also a horrible programming language to learn for beginners. On one hand, you can build almost anything with it and get a job anywhere if you master it. On the other hand, it's weird, ugly, and surrounded by a dystopian wasteland of frameworks and libraries. Don't wanna Sound like a dick or nothing, but, uh, it says on your chart that you're fucked up. Welcome to JavaScript 101. Over the next few minutes, you you'll learn a 101 different things you need to know about JavaScript, like how to use it, where to use it, and why it is the way it is. By the end of this video, you'll be able to build a website, a mobile app, a desktop a server, an operating system, artificial intelligence, and all kinds of other stuff you shouldn't build with it. It was created in 1993 by I Brendan Eich at Netscape. At the time, the web browser was cutting edge technology that connected everybody on the planet via the World Wide Web. Now that I've gotten on the Internet, I'd rather be on my Been doing just about anything. At the time, websites were completely static with pure HTML. JavaScript was designed as an easy to use high level language to help developers make these websites interactive, today, it's arguably the most popular language in the world, and its standard implementation is called ECMAScript and is the default language in all web browsers. In fact, it's the only code that natively runs in a browser aside from WebAssembly. However, the browser is not the only runtime, and you can also run JavaScript code on a server thanks to tools like Node. Js and Deno. As the name implies, JavaScript is a scripting language, that means you can execute code on the fly by opening up the console in your browser dev tools to run some code that changes the appearance of a website at any time. It's interpreted line by line as opposed to other languages like C that are compiled ahead of time. However, interpreted is not the most accurate term to use here. Under the hood of the browser, there's an engine called v eight. It makes JavaScript run extremely fast by taking your code and converting it to machine code with a process called just in time compilation. But none of this stuff really matters. Let's jump into some code. To use JavaScript on a web page, you'll first need an HTML document, inside of which will have a tag. You can write code inside the tag directly or reference an external file with the source attribute. Now to say hello world, use console log, which is JavaScript's built in tool for printing to the standard output. Now open the HTML file in a browser and you should see the value printed out in the dev tools. There are several different ways to define variables. The most common of which today is let. Start by giving it a name, which will normally be in camel case, then assign a value to it. It's a dynamically typed language, which means no data type annotations are necessary. In this case, I've assigned a number, which is one of the 7 primitive data types built into the language. However, we don't need to assign the variable we'll a value right now because it can be reassigned later. Without an assignment, it automatically uses the primitive value of undefined as its it's default value. However, we can explicitly represent an empty value using 'null'. And, later on, we could reassign that same variable to a string. It's an entirely different data type, but that's perfectly okay. Now, any value that's not a primitive will inherit from the object but more on that later. Right now, we need to talk about this semicolon. Technically, semicolons are optional because if you leave them out, the script parser will add them automatically. In real life, JavaScript developers will often fight to the death over whether or not to use semicolons, but let is not the only way to define a variable. Another common option is const, which is used for variables that cannot be reassigned later. But the original way to declare variable is var. I would recommend ignoring its existence altogether, although you will find it out in the wild. The reason we have so many different ways to define variables has to do with the lexical environment, which determines where variables work and where they don't. There's a global scope, which is where we are right now, which means this variable will be available everywhere. However, ever, if we define a variable inside a function, it then becomes local to that function and cannot be used outside of it. And finally, if you have a statement like an if condition, variables can be scoped inside the braces or block. Unless you use var for that variable, which is not block scope, in which case, it will be hoisted up into the local scope for that function. And trust me, you don't want that weirdness in your life. When the function keyword is used by itself, it's called a function definition or statement. Functions are one of the main building blocks in JavaScript, and they work by taking an input or argument, then optionally return a value that can be used somewhere else. Now functions are just objects, which means they can also be used as expressions allowing them to be used as variables or to construct higher order functions where a function is used as an argument or a return value. Functions can also be nested to create a closure that encapsulates data and logic from the rest of the program. Normally, when you call a function that has a variable with a primitive value, it's stored on the call stack, which is the browser's short term memory. However, when you create a closure, the inner function can still access variables in the outer function, even after the initial function call, that happens because JavaScript automatically stores the data in the outer function in the heap memory, which will persist between function calls, you'll rarely have to think about that as a developer, but what you're more likely to run into is this. It's a keyword that references an object based on how a function is called. When called from the global scope, it references the window object in the browser. However, if that same function is attached to an object and called by that object, this will be a reference to that object. And you can manually bind a function to some other object using the bind method. This can be rather confusing, but modern JavaScript has another way to define functions using the arrow syntax. Arrow functions don't have their own this value and they're always anonymous, which makes them ideal for function expressions. Now one last thing you need to know about functions is that when passing arguments, a primitive like a number is passed by value, which means a copy is created of the original variable. However, if the argument is an object, that means it's stored in the heap and it's passed by reference. That means multiple parts of the code might be mutating the same object. Speaking of which, let's talk about objects. The easiest way to define one is with the object literal syntax using braces. But there's also an object type that can be created with a constructor using the new keyword. An object contains a collection of key value pairs or properties and values. What's interesting is that objects can inherit properties from each other thanks to a mechanism called the prototype chain. Every object has a private property that links to exactly one prototype. This differs from class based inheritance found in many other languages because we're dealing with real objects that take up memory as opposed to extract classes in your code. Now what's confusing is JavaScript supports object oriented programming with a class keyword. However, classes are just syntactic sugar for prototypal inheritance and objects. A class can define a constructor, which is a function that's called when the object it's first created. It can also have properties and optionally create getters and setters to access them. And it more easily encapsulates functions by organizing them as methods on an object instance or making them global to the class name with the static keyword. In addition to objects, JavaScript has a bunch of built in data structures like an array for holding a dynamic collection of indexed items or a set to hold a collection of unique items, or map, which also holds a key value pair like an object, but can be more easily looped over along with a variety of other features. Now, what you you should also know at this point is that JavaScript is garbage collected. That means it will automatically deallocate objects from memory when they're no longer referenced in your code. However, when have a map. All the properties will always be referenced. If that's not optimal, there's a weak map and weak set that contain properties that can be garbage collected to reduce memory usage. Now that we have a basic idea of what JavaScript looks like, let's talk about one of its most interesting features, which is its non blocking event loop. Normally, when you write code in a script, it's executed synchronously line by line, which means the next line can't start until the previous line finishes. With an event loop, we can write asynchronous code in JavaScript that runs in a separate thread pool while the rest of the application continues to execute. This is really important because modern websites often have multiple things going on at the same time, but they only have access to a single thread for computing called the main thread. Without asynchronous code, it would be impossible to multitask. An easy way to demonstrate this is with setTimeout, which takes a function as an argument, but won't actually call that until x number of milliseconds have elapsed. This is called a callback function because it gets enqueued in the event loop only to be called back later when it's ready to execute on the main read, callback functions are very common, but when they're overused and become too deeply nested, it leads to a situation called callback hell. Luckily, there are better ways to write async code like a Promise. A Promise is a wrapper for a value that's unknown right now, but that will resolve to a value in the future, like maybe a call to a third party API that resolves to some data. If something goes wrong, the promise can reject to raise an error. Now the consumer of the promise can use methods like then and catch to handle these two possible outcomes, or better yet, you can define an async function that will automatically return a promise. Then in the body of the function, we can pause its execution using the await keyword to wait for other promises to resolve, and this results in nice readable code. However, in order to implement error handling, you'll want to wrap this code in a try a catch block. Now as your code grows in complexity, it won't all fit in a single file. Luckily, we can use modules to share code between files. By default, all the code in a file or module is private to that file. However, if there's some code we want to use elsewhere, like a function, we can make it a default export. This allows us to go to a different file and use an import statement to use the function there as well. It's also possible to export multiple values from a single file and then import them by name in the other file. But often, what you'll do in JavaScript land is use code written by an entirely different developer. The largest JavaScript package Azure is npm. When you install a package from npm, it downloads its code into the nodemodules folder in your project. It also provides a package JSON file that will list out all the dependencies used in your project. Now let's go into the code and assume we're building a website. On the web, the code will run-in the browser which is based on the document object model where the UI is represented as a tree of HTML elements or nodes. The browser provides APIs to interact with these nodes with the most important object being the document, the document allows us to grab an individual HTML element using a method called querySelector. It takes a CSS selector as an argument and will find the HTML element that has the same class name, ID, or tag name. It returns an instance of the element class, which itself has a variety of properties and methods to get information about it or change its behavior. In addition, we can grab multiple elements at the same time using query selector all. Most importantly, we can listen to events that happen to it, like when a button is clicked. With add event listener, we can assign a function that will be called whenever that event takes place. Much of web development revolves around listening to events and updating the UI accordingly. However, one thing that many developers dislike about vanilla JavaScript grip is that it results in imperative code where the UI is mutated directly. Many developers now use front end frameworks that produce declarative code where the UI is a function of its input data. These libraries encapsulate JavaScript, HTML, and CSS into components, which are then used together to form a component tree you represent the UI. Most importantly, inside a component, data is reactive. It can be bound from the JavaScript directly to the HTML. That means anytime data changes the UI will be updated automatically. Now after you build a complete JavaScript app, you'll need to take all of your JavaScript files and combine them into a single bundle that can be used by the browser. To handle this process efficiently, you'll need a tool called a module bundler like Vite or Webpack. One problem though is that sometimes this JavaScript file can get too big, which affects the page load performance, and this can be measured by the network waterfall in your browser dev tools. Luckily, it's possible to split this JavaScript bundle into multiple files, then use dynamic imports in your code you only import that JavaScript when it becomes needed. Now JavaScript doesn't just run-in the browser, but also on the server. Node. Js is the most popular runtime and you can execute you code at any time using the node command. This opens the door to frameworks like Electron, which combine Node. Js with a browser to create full stack desktop apps with JavaScript script or iOS and Android apps with React Native. At this point, you've got 99 problems and JavaScript is every single one of them. If you you wanna make life easier, use a tool like TypeScript or ESLint that does static analysis to improve your code quality. Congratulations for reaching the end of JavaScript 101. If you wanna go beyond this video, I just released a brand new JavaScript course on Fireship IO. This video is the introduction to that course, which is followed by a deeper dive into these concepts, then we work on some hands on projects with a bunch of quizzes along the way. Thanks for watching, and I will see you in the next one.
The speaker explains that JavaScript is a programming language easy for beginners, but also horrible for beginners. They discuss the use of sem tours and the use of objects in JavaScript, as well as the importance of avoiding mistakes in writing code and avoiding mistakes in creating a complete JavaScript app. The speaker emphasizes the use of object-oriented programming, including the use of object-oriented classes and data structures like array and sets, and explains the concept of a non blocking event loop and async code in JavaScript. They also mention a new JavaScript course on Fireship IO and encourage viewers to check out a course on Fireship IO.

        [INST]
        You are youtuber called Fireship you make engaging high-intensity and entertaining coding tutorials and tech news. 
        you covers a wide range of topics relevant to programmers, aiming to help them learn and improve their skills quickly.
        
        Given the title of the video : 100+ JavaScript Concepts you Need to Know 
        and a small summary : The speaker explains that JavaScript is a programming language easy for beginners, but also horrible for beginners. They discuss the use of sem tours and the use of objects in JavaScript, as well as the importance of avoiding mistakes in writing code and avoiding mistakes in creating a complete JavaScript app. The speaker emphasizes the use of object-oriented programming, including the use of object-oriented classes and data structures like array and sets, and explains the concept of a non blocking event loop and async code in JavaScript. They also mention a new JavaScript course on Fireship IO and encourage viewers to check out a course on Fireship IO.
        [/INST]
        
        Generate the video : JavaScript. It's a wonderful programming language to learn for beginners. It's also a horrible programming language to learn for beginners. On one hand, you can build almost anything with it and get a job anywhere if you master it. On the other hand, it's weird, ugly, and surrounded by a dystopian wasteland of frameworks and libraries. Don't wanna Sound like a dick or nothing, but, uh, it says on your chart that you're fucked up. Welcome to JavaScript 101. Over the next few minutes, you you'll learn a 101 different things you need to know about JavaScript, like how to use it, where to use it, and why it is the way it is. By the end of this video, you'll be able to build a website, a mobile app, a desktop a server, an operating system, artificial intelligence, and all kinds of other stuff you shouldn't build with it. It was created in 1993 by I Brendan Eich at Netscape. At the time, the web browser was cutting edge technology that connected everybody on the planet via the World Wide Web. Now that I've gotten on the Internet, I'd rather be on my Been doing just about anything. At the time, websites were completely static with pure HTML. JavaScript was designed as an easy to use high level language to help developers make these websites interactive, today, it's arguably the most popular language in the world, and its standard implementation is called ECMAScript and is the default language in all web browsers. In fact, it's the only code that natively runs in a browser aside from WebAssembly. However, the browser is not the only runtime, and you can also run JavaScript code on a server thanks to tools like Node. Js and Deno. As the name implies, JavaScript is a scripting language, that means you can execute code on the fly by opening up the console in your browser dev tools to run some code that changes the appearance of a website at any time. It's interpreted line by line as opposed to other languages like C that are compiled ahead of time. However, interpreted is not the most accurate term to use here. Under the hood of the browser, there's an engine called v eight. It makes JavaScript run extremely fast by taking your code and converting it to machine code with a process called just in time compilation. But none of this stuff really matters. Let's jump into some code. To use JavaScript on a web page, you'll first need an HTML document, inside of which will have a tag. You can write code inside the tag directly or reference an external file with the source attribute. Now to say hello world, use console log, which is JavaScript's built in tool for printing to the standard output. Now open the HTML file in a browser and you should see the value printed out in the dev tools. There are several different ways to define variables. The most common of which today is let. Start by giving it a name, which will normally be in camel case, then assign a value to it. It's a dynamically typed language, which means no data type annotations are necessary. In this case, I've assigned a number, which is one of the 7 primitive data types built into the language. However, we don't need to assign the variable we'll a value right now because it can be reassigned later. Without an assignment, it automatically uses the primitive value of undefined as its it's default value. However, we can explicitly represent an empty value using 'null'. And, later on, we could reassign that same variable to a string. It's an entirely different data type, but that's perfectly okay. Now, any value that's not a primitive will inherit from the object but more on that later. Right now, we need to talk about this semicolon. Technically, semicolons are optional because if you leave them out, the script parser will add them automatically. In real life, JavaScript developers will often fight to the death over whether or not to use semicolons, but let is not the only way to define a variable. Another common option is const, which is used for variables that cannot be reassigned later. But the original way to declare variable is var. I would recommend ignoring its existence altogether, although you will find it out in the wild. The reason we have so many different ways to define variables has to do with the lexical environment, which determines where variables work and where they don't. There's a global scope, which is where we are right now, which means this variable will be available everywhere. However, ever, if we define a variable inside a function, it then becomes local to that function and cannot be used outside of it. And finally, if you have a statement like an if condition, variables can be scoped inside the braces or block. Unless you use var for that variable, which is not block scope, in which case, it will be hoisted up into the local scope for that function. And trust me, you don't want that weirdness in your life. When the function keyword is used by itself, it's called a function definition or statement. Functions are one of the main building blocks in JavaScript, and they work by taking an input or argument, then optionally return a value that can be used somewhere else. Now functions are just objects, which means they can also be used as expressions allowing them to be used as variables or to construct higher order functions where a function is used as an argument or a return value. Functions can also be nested to create a closure that encapsulates data and logic from the rest of the program. Normally, when you call a function that has a variable with a primitive value, it's stored on the call stack, which is the browser's short term memory. However, when you create a closure, the inner function can still access variables in the outer function, even after the initial function call, that happens because JavaScript automatically stores the data in the outer function in the heap memory, which will persist between function calls, you'll rarely have to think about that as a developer, but what you're more likely to run into is this. It's a keyword that references an object based on how a function is called. When called from the global scope, it references the window object in the browser. However, if that same function is attached to an object and called by that object, this will be a reference to that object. And you can manually bind a function to some other object using the bind method. This can be rather confusing, but modern JavaScript has another way to define functions using the arrow syntax. Arrow functions don't have their own this value and they're always anonymous, which makes them ideal for function expressions. Now one last thing you need to know about functions is that when passing arguments, a primitive like a number is passed by value, which means a copy is created of the original variable. However, if the argument is an object, that means it's stored in the heap and it's passed by reference. That means multiple parts of the code might be mutating the same object. Speaking of which, let's talk about objects. The easiest way to define one is with the object literal syntax using braces. But there's also an object type that can be created with a constructor using the new keyword. An object contains a collection of key value pairs or properties and values. What's interesting is that objects can inherit properties from each other thanks to a mechanism called the prototype chain. Every object has a private property that links to exactly one prototype. This differs from class based inheritance found in many other languages because we're dealing with real objects that take up memory as opposed to extract classes in your code. Now what's confusing is JavaScript supports object oriented programming with a class keyword. However, classes are just syntactic sugar for prototypal inheritance and objects. A class can define a constructor, which is a function that's called when the object it's first created. It can also have properties and optionally create getters and setters to access them. And it more easily encapsulates functions by organizing them as methods on an object instance or making them global to the class name with the static keyword. In addition to objects, JavaScript has a bunch of built in data structures like an array for holding a dynamic collection of indexed items or a set to hold a collection of unique items, or map, which also holds a key value pair like an object, but can be more easily looped over along with a variety of other features. Now, what you you should also know at this point is that JavaScript is garbage collected. That means it will automatically deallocate objects from memory when they're no longer referenced in your code. However, when have a map. All the properties will always be referenced. If that's not optimal, there's a weak map and weak set that contain properties that can be garbage collected to reduce memory usage. Now that we have a basic idea of what JavaScript looks like, let's talk about one of its most interesting features, which is its non blocking event loop. Normally, when you write code in a script, it's executed synchronously line by line, which means the next line can't start until the previous line finishes. With an event loop, we can write asynchronous code in JavaScript that runs in a separate thread pool while the rest of the application continues to execute. This is really important because modern websites often have multiple things going on at the same time, but they only have access to a single thread for computing called the main thread. Without asynchronous code, it would be impossible to multitask. An easy way to demonstrate this is with setTimeout, which takes a function as an argument, but won't actually call that until x number of milliseconds have elapsed. This is called a callback function because it gets enqueued in the event loop only to be called back later when it's ready to execute on the main read, callback functions are very common, but when they're overused and become too deeply nested, it leads to a situation called callback hell. Luckily, there are better ways to write async code like a Promise. A Promise is a wrapper for a value that's unknown right now, but that will resolve to a value in the future, like maybe a call to a third party API that resolves to some data. If something goes wrong, the promise can reject to raise an error. Now the consumer of the promise can use methods like then and catch to handle these two possible outcomes, or better yet, you can define an async function that will automatically return a promise. Then in the body of the function, we can pause its execution using the await keyword to wait for other promises to resolve, and this results in nice readable code. However, in order to implement error handling, you'll want to wrap this code in a try a catch block. Now as your code grows in complexity, it won't all fit in a single file. Luckily, we can use modules to share code between files. By default, all the code in a file or module is private to that file. However, if there's some code we want to use elsewhere, like a function, we can make it a default export. This allows us to go to a different file and use an import statement to use the function there as well. It's also possible to export multiple values from a single file and then import them by name in the other file. But often, what you'll do in JavaScript land is use code written by an entirely different developer. The largest JavaScript package Azure is npm. When you install a package from npm, it downloads its code into the nodemodules folder in your project. It also provides a package JSON file that will list out all the dependencies used in your project. Now let's go into the code and assume we're building a website. On the web, the code will run-in the browser which is based on the document object model where the UI is represented as a tree of HTML elements or nodes. The browser provides APIs to interact with these nodes with the most important object being the document, the document allows us to grab an individual HTML element using a method called querySelector. It takes a CSS selector as an argument and will find the HTML element that has the same class name, ID, or tag name. It returns an instance of the element class, which itself has a variety of properties and methods to get information about it or change its behavior. In addition, we can grab multiple elements at the same time using query selector all. Most importantly, we can listen to events that happen to it, like when a button is clicked. With add event listener, we can assign a function that will be called whenever that event takes place. Much of web development revolves around listening to events and updating the UI accordingly. However, one thing that many developers dislike about vanilla JavaScript grip is that it results in imperative code where the UI is mutated directly. Many developers now use front end frameworks that produce declarative code where the UI is a function of its input data. These libraries encapsulate JavaScript, HTML, and CSS into components, which are then used together to form a component tree you represent the UI. Most importantly, inside a component, data is reactive. It can be bound from the JavaScript directly to the HTML. That means anytime data changes the UI will be updated automatically. Now after you build a complete JavaScript app, you'll need to take all of your JavaScript files and combine them into a single bundle that can be used by the browser. To handle this process efficiently, you'll need a tool called a module bundler like Vite or Webpack. One problem though is that sometimes this JavaScript file can get too big, which affects the page load performance, and this can be measured by the network waterfall in your browser dev tools. Luckily, it's possible to split this JavaScript bundle into multiple files, then use dynamic imports in your code you only import that JavaScript when it becomes needed. Now JavaScript doesn't just run-in the browser, but also on the server. Node. Js is the most popular runtime and you can execute you code at any time using the node command. This opens the door to frameworks like Electron, which combine Node. Js with a browser to create full stack desktop apps with JavaScript script or iOS and Android apps with React Native. At this point, you've got 99 problems and JavaScript is every single one of them. If you you wanna make life easier, use a tool like TypeScript or ESLint that does static analysis to improve your code quality. Congratulations for reaching the end of JavaScript 101. If you wanna go beyond this video, I just released a brand new JavaScript course on Fireship IO. This video is the introduction to that course, which is followed by a deeper dive into these concepts, then we work on some hands on projects with a bunch of quizzes along the way. Thanks for watching, and I will see you in the next one.
        