The JavaScript Survival Guide

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

Channel: Fireship

Views: 310,738

Rating: 4.9711766 out of 5

Keywords: webdev, app development, lesson, tutorial, javascript, js, javascript survival guide, closure, js object, js function, programming basics., let v const, var vs let, js variables, js interview, javascript interview, compsci, programming, javascript guide, javascript tutorial, hoisting

Id: 9emXNzqCKyg

Length: 14min 47sec (887 seconds)

Published: Mon Jul 15 2019