Up next in 10
The "JavaScript Roadmap in 2022: THE ULTIMATE GUIDE" video offers an extensive overview and roadmap for mastering JavaScript, a fundamental programming language for web development. It likely covers various topics such as the basics of JavaScript syntax, essential concepts like functions, arrays, and objects, as well as more advanced topics including asynchronous programming, frameworks/libraries like React and Node.js, and modern JavaScript features. Additionally, it may provide guidance on resources, tutorials, and learning paths to help viewers navigate their journey in JavaScript development effectively in the context of the year 2022. The video aims to serve as a comprehensive guide for both beginners and experienced developers looking to enhance their JavaScript skills and stay up-to-date with industry trends.
Show More Show Less View Video Transcript
0:00
I wanted to create a JavaScript roadmap video that's actually useful for beginners
0:04
So instead of talking about every possible thing that you can learn about JavaScript
0:07
this video is focused on the core fundamentals of JavaScript, the skills that you will use on a regular basis
0:13
There's already so much to learn. I don't think it's super helpful to hit you with everything
0:17
especially stuff you aren't likely to use that often or ever for that matter
0:20
Just learn that other stuff later as you need it. And if I don't include your favorite slice of JavaScript
0:25
feel free to share it in the comments. And let me know if you want me to make a React roadmap
0:30
So let's get into it. There are several ways to run JavaScript code. You can run it in your browser console
0:35
You can run it with Node.js. To not draw this video out, let's look at it from the context of running it in an HTML file
0:42
To run JavaScript from a web page, we simply need to add a script tag to the HTML file
0:47
Here's a simple example of a script that pops up an alert message. That's fine for something trivial
0:52
But when building an application, you could easily have hundreds of thousands of lines of code
0:56
And having it all in this single page would be very hard to read and hard to manage
1:00
The better way is to use the source attribute on the script tag and point that to a different JavaScript file
1:06
Here's a quick performance tip. It's a good idea whenever possible to add the script tag to the bottom of the page
1:11
because loading a large JavaScript file can be slow. And by putting it at the end of the page
1:16
everything above it can load without getting blocked waiting for the JavaScript
1:20
Variables are the way to store values in your application. For a long time, we only had var
1:25
We now have let and const. It's important for you to know the differences between the three of these
1:29
and why it is better to use let and const. This has to do with something called scope
1:34
Think of scope as the rules for where you can access the variables you've created
1:37
Do you want it to be available everywhere? Well, that's global scope. Or do you want it to be restricted to within a function or code block
1:45
That's function scope and block scope. How and where you declare a variable will change the scope
1:49
and can lead to errors and weird bugs. This is often due to something called hoisting
1:54
JavaScript has dynamic typing, which means that variables can hold different data types
1:59
With var or let, you can assign a number to a variable, and then you can later assign a string or a Boolean to that same variable
2:06
It's not a good idea to do this, but it is possible because JavaScript uses dynamic typing
2:11
To associate a value with a variable, we use the assignment operator
2:15
which is just an equal sign that goes between the variable name on the left
2:19
and the value on the right. So what kinds of values can variables hold
2:22
Let's take a look at data types, and we'll start with the ones that are called primitives
2:26
There are seven primitives in JavaScript. These are number, string, Boolean, big int, undefined, null, and symbol
2:34
Unlike arrays, objects, and functions that we'll talk about later, primitives don't change
2:39
Methods on primitives, like to lowercase, don't mutate or change the actual primitive
2:44
Another common way of saying this is that primitives are immutable. As a quick aside
2:48
there are going to be times where you want to change like a number to a string or a string to a number
2:53
and this is going to be called type conversion. And there are a bunch of different conversions that are available
2:58
but this doesn't actually change that primitive value. It just returns a new, different value
3:04
There are also some useful non-primitive data types. For example, an object is a collection of key value pairs
3:10
where the key is going to be the unique identifier on the left side
3:14
and the value is on the right side separated by a colon. Each pair is separated by commas
3:20
and the whole thing is contained by curly braces. You'll want to know the rules for naming keys
3:25
how to add key value pairs to the object. You do this by using dot notation
3:29
bracket notation with computed attributes, or when initially creating the object. Similarly, you're going to have to know how to access values
3:36
and usually you can do this with the dot notation, but there are going to be times
3:39
when you're going to have to use bracket notation. For example, if the key that you're receiving is a string that has spaces
3:46
You could do some really cool things with data and objects and arrays using the spread operator
3:50
and also with something called destructuring. We're going to talk about ways to iterate through an object a little later
3:56
when we talk about looping. Something else that you really need to know about is the relationship between different objects
4:01
Look up prototype and prototypal inheritance. Learn how objects inherit from each other
4:07
This comes up a lot in interviews. You'll also want to know about object references
4:11
You can have multiple variables all pointing to the same object, and if you change the property inside of that object
4:17
the change affects all of the variables that are referencing that object
4:20
This is because objects are not immutable. An array is a special type of object
4:25
and instead of key value pairs, an array lets you store a list of items
4:29
which could be a mixture of different data types. The location in that array is called its index
4:34
and like with objects, the contents of an array can be changed
4:39
which means that arrays are also not immutable. A function is another special type of object
4:44
especially because you can pass data into it as a list of arguments
4:48
and it's callable. Now, these are useful for performing different tasks because you can call them whenever you need them
4:54
and when you do call them, this is called invoking a function. You can pass data into functions and return data from functions
5:01
You can even have default values in case nothing is passed in
5:05
Similar to declaring variables, where and how you create a function also matters because of hoisting
5:11
So learn the difference between function declarations and function expressions. You'll also hear functions called methods
5:16
and these are going to be functions that are stored as part of key value pairs on an object
5:21
whereas a method on a class. You're also going to want to know about arrow functions
5:25
and anonymous functions versus named functions, and then you're going to need to look up
5:29
immediately invoked function expressions, which are also called iffys. Objects, arrays, and functions have built-in special methods
5:36
that are super helpful. Some of these are available as instance methods
5:39
This means that you can assign an array to a variable, and then you can call certain methods directly off of that variable
5:47
Here's a list of some of the most useful ones, and while these are super useful
5:50
the three that I use the most are forEach, map, and filter. A built-in method that I like to use on objects
5:56
is the hasOwnProperty method. This is important because it helps you to know
6:01
if a property is specific to that object or if it was a property that has been inherited
6:07
Objects and arrays also have some useful static methods, and these are called off of the class itself
6:13
You'll notice the capital O and the capital A on each one of these
6:17
because we're calling these methods off of object and off of array
6:21
instead of calling them off of a variable. If you want to know if a variable is storing an array
6:26
you could call array.isArray and pass in a variable to test, and it will return true or false
6:32
Some helpful static object methods include object.assign, object.keys, and object.values. There's also a special date object with its own set of useful methods
6:42
that you should become familiar with. If you're doing a ton of stuff around dates
6:46
it can get pretty messy dealing with time zones and calculations and stuff
6:50
so you might want to look into a JavaScript library called Moment.js to help manage some of that chaos
6:56
But something super easy to do is hit that like button if this video is helpful
7:00
As of around 2015, we now also have some newer data structures
7:03
that include map, weekMapSet, and weekSet. Once you're really comfortable with regular objects and arrays
7:09
it can be worth it to look into some of these other data structures, but there's some things that you can put off until later
7:15
That's enough about data structures. Let's get into more of the mechanics of JavaScript
7:19
the stuff to know in order to actually make something useful. Let's start with controlling the flow of data in our application
7:25
For anything more than the most simplistic app, we need to have some sort of decision tree
7:31
If something happens or something is true or two items are equal
7:35
we should go down one path. If that's not the case, then we should go down a different path
7:40
and a common way to do this is with if-else statements. For example, if you're cool, use macOS
7:46
Else, if you're mostly cool, Linux. Else, use Windows. You can also route the flow of logic using switch statements
7:53
and if you need to catch a thrown error before it just totally blows everything up
7:57
and handle it in a more friendly way, then you can use a try-catch statement
8:01
Or if you're feeling like a nasty, cruel type of person, then just swallow that error and pretend that your code is awesome
8:07
Since we deal with a large collection of data and objects and arrays, we need some ways to loop through the data in order to find stuff and to transform stuff
8:14
Or maybe we just want to keep looping until some condition becomes true
8:19
These are some of the common ways to loop in JavaScript. You've got a for loop, for-in loop, for-of loop, do-while loop, and while loop
8:28
But earlier, we talked about special array methods, and in a lot of cases, we can take a more functional approach to looping through arrays
8:35
by using the built-in for-each method on an array. I personally opt to use for-each whenever possible
8:42
A lot of what we do depends on conditional logic, so we really need some good ways to compare things
8:48
These are some of the common operators that I use all the time. There are a couple ways to compare equality
8:53
so you're going to want to know the differences between double equals and triple equals
8:57
Most of the time, triple equals is the way to go, but there are times when double equals makes sense
9:02
Same goes for the two different not equal options. You also have all of your typical greater than, less than operators
9:10
The ternary operator, which uses a question mark and colon, is another way to do conditional logic, like a shorter way of doing an if-else statement
9:19
But just a warning here that similar to if-else statements, heavy nesting of ternaries can get hard to read really fast
9:26
But a single level of ternaries is pretty easy to understand. The logical operators are some of the most common operators that I use every day
9:34
You've got the not, or, and, and operator. That just sounded kind of weird to say that all in one sentence
9:42
You can also find out the data type of a variable by using the type of operator
9:46
and then you can find out if a particular object happens to be an instance of some other object
9:51
using the instance of operator. If you really want to create some confusion
9:55
don't forget to sprinkle some bitwise operators, or just skip them for now
9:59
A quick word of advice. A common pitfall for new software developers is attempting to use every new thing that you learn
10:06
You come across something interesting, a new way to do something, and think
10:10
oh, that's great, I'm going to use that because it seems pretty advanced, and then it's going to make me feel better about my progress
10:16
And I've done this too. Several years ago, I learned something cool you could do with a bitwise operator
10:21
and then when reviewing my pull request, everyone was like, what the heck does this do
10:26
And that's when I learned a really important principle. There are tons of different ways of doing things, and some are quite creative and unique
10:32
Usually, it's better to skip creative solutions and favor solutions that are
10:37
easier for other software developers to understand. That's why it's also a good idea to use descriptive variable and function names
10:43
because it makes the code more readable. If you're worried about performance, then you can always use a code bundler
10:49
to optimize your production code. It'll automatically go through and rename things to something that's
10:54
smaller so that your code file size stays small, but it lets you keep your actual working code base readable
11:01
Now back to operators, because there's a bunch more. And I'm assuming you have basic math skills, so half of these are self-explanatory
11:07
so let's skip a couple of these. And some interesting ones are going to be the modulus
11:12
which lets you get the remainder value after doing some division. The increment and decrement are also really useful
11:20
and you're going to see the increment being used regularly in a lot of the for loops
11:23
There's also some string operators. In this example, the empty space between the single quotes represents a text space
11:30
When you add strings together, they get concatenated, which basically means they just get joined together into one string
11:36
If you were to just concatenate the first string JavaScript to the second string rocks
11:42
you would end up with a single word instead of two words with a space between them
11:46
Another way to add to the end of a string is by combining the sum and assignment operators
11:51
so that you take the variable plus equals the next section of string that you want added to it
11:57
A little gotcha here is that if you try to add a number and a string, the number is going to get converted to a string
12:03
and then the two strings are going to be concatenated together. So this becomes 55 instead of 10
12:09
Another way to handle strings is with template literals, which are also called template strings
12:14
And these are super useful because you can pass in variables into the template strings
12:20
rather than having to worry about doing all that concatenation. If you take these concepts that we just talked about
12:24
and you try to run it in a simple application, that code is going to run synchronously
12:29
which just means that each line of code will have to run before it can move on to the next line of code
12:35
But what if you wanted to request some data, and that request could take a couple seconds to return
12:41
Well, we make these requests through XHR requests, which is short for XML HTTP requests
12:48
Try to say that 10 times quickly. A couple of seconds may not seem like a lot to you
12:53
but if you're the end user, it can feel like it's taking a long time
12:56
So maybe you want to have the rest of your code just continue to run on
13:01
and you're just going to worry about that data request at some future time
13:05
when that comes back. This type of non-blocking code is called asynchronous
13:10
and there are some ways that you can do asynchronous JavaScript. Here are some of the most helpful asynchronous concepts in JavaScript
13:17
You're going to want to know the pros and cons of using async await, promises, callback, setTimeout, and setInterval
13:23
And you're also going to want to be familiar with the JavaScript event loop, because sometimes you see someone who's using a setTimeout
13:30
and then they're only going to use one millisecond for the delay, and you might be like, what is going on
13:35
Well, this has to do with them trying to bump some action to the next loop
13:39
If you're wanting to use your JavaScript to actually interact directly with HTML
13:44
in order to get some content, add or remove content from the DOM
13:48
there's a bunch of different methods for doing this. Some of the common ones are going to be getElementById
13:53
querySelector, querySelectorAll, createElement. And then once you have an element, you can get access to additional methods like appendChild
14:02
JavaScript frameworks handle a lot of this stuff for you or provide easier ways to do it
14:07
But if you plan to interact with HTML directly from vanilla JavaScript
14:11
then you really need to become familiar with these DOM web APIs
14:14
We have a lot more stuff to cover, but if you're interested in JavaScript frameworks, I already have a front-end developer roadmap video
14:20
and I'll leave a link to that in the description below. In JavaScript, we have access to the global window object
14:26
which is really cool because it lets you interact with the browser
14:30
For example, you could store data in local storage and retrieve that data
14:34
So if you were to close a tab and you come back to that site, you still have access to that data
14:39
Or if you want to store data that just gets purged whenever you close that particular tab
14:44
you could end up using session storage instead. Now, if you plan on working on web applications
14:48
you're probably going to end up using tools like Webpack that are going to bundle your code
14:53
This lets you break out your JavaScript into smaller files that are just easier to understand
14:58
When you want to use a code snippet from a different file, you just import it
15:02
There are a couple of different ways to import and export code. There are a lot of advantages to using ESM modules
15:08
which is short for ECMAScript modules, for example, tree shaking. So that is what I recommend that you use
15:15
But you will encounter CGS modules, so be familiar with those. You'll also need to know the difference between
15:21
named exports and default exports. If you want to take a more object-oriented approach to JavaScript
15:27
or if you decide to use one of the more popular frameworks, you're probably going to want to learn JavaScript class objects
15:34
These are useful for when you want to have multiple instances of a particular object that you can extend as needed
15:40
When working with these classes, you're going to need to know how to use the constructor
15:44
and also calling super inside of the constructor. You're going to need to know how scope works within a class
15:50
And this is important for understanding why this keyword works in some places in a class, but not others
15:56
You also need to understand how class methods work and what happens when you use an arrow function
16:02
as part of a method declaration on a class. Now, the term that you need to look for here is something called binding
16:09
You're going to need to become familiar with using bind, call, and apply on both functions and class methods
16:16
Whether you're using functions or classes, there is a concept that is really, really important to learn
16:21
that comes up on a lot of interviews, and that is something called closures
16:25
Not understanding what a closure is can lead to confusing code behavior and memory leaks
16:30
There are some things that I really wish I knew when I first started learning web development
16:35
So the next thing that you should do is watch this video where I share those tips
16:39
It will help you avoid a lot of unnecessary pain. Lates
#Programming
#Computer Education