JavaScript 101: Everything Beginners Need to Know in One 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 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 worldwide 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 easyto use highle 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 web assembly

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 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 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 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 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 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 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 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 a synchronous code in JavaScript that runs in a separate threadpool 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 call that function until X number of milliseconds have elapsed this is called a call back

function because it gets in cued in the event Loop only 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 call back hell luckily there are better ways to write a sync 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 this results in nice readable code however in

order to implement error handling you want to wrap this code in a TR 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 individ ual HTML element using a method called query selector it takes a

CSS selector as an argument and we'll 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 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 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 V 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 node.js 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 here use a tool like typescript or ES lent 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 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