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 want to sound like a dick or nothing but uh it says on your chart that you're [ __ ] up welcome to JavaScript 101 over the next few minutes you'll learn 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 app 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 Brendan Ike 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 computer than 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 Dino 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 V8 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 we'll have a a script 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 camelcase 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 seven primitive data types built into the language however we don't need to assign the variable a value right now because it can be reassigned later without an assignment it automatically uses the Primitive value of undefined as its 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 class but more on that later right now now we need to talk about this semicolon technically semicolons are optional because if you leave them out the JavaScript 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 a 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 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 and 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 interest scene 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 out memory as opposed to abstract 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 is 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 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 you 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 set timeout which takes a function as an argument but won't actually really call that function until X number of milliseconds have elapsed this is called a callback function because it gets enqueued in the event Loop will need to be called back later when it's ready to execute on the main thread 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 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 into 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 manager is npm when you install a package from npm it downloads its code into the node modules 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 dual HTML element using a method called query selector 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 you get information about it or change its behavior in addition we can grab multiple elements at the same time using query selector at 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 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 to 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 Veet 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 to 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 JavaScript code at any time using the node command this opens the door to Frameworks like electron which combine nodejs with a browser to create full stack desktop apps with JavaScript 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 want to make life easier use a tool like typescript or eslant that does static analysis to improve your code quality congratulations for reaching the end of JavaScript 101 if you want to go beyond this video I just released a brand new JavaScript course on fireship i o 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