New Series! Code this 💪, not that 💩. Learn how to write solid modern JavaScript and avoid bad code from the olden days. https://angularfirebase.com

- Source https://github.com/codediodeio/code-this-not-that-js
2024-02-04T07:13:38.706Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
848d6eff-07af-467a-9a0f-97a4551a2987
b9c5989957eddafeb5d0e1cc570c6d099479b370b003a1f674e566565869a15f
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
JavaScript is a programming language that people love to hate.
A long time ago, developers used to pride themselves on being back end developers because it was More challenging and complex.
JavaScript was just a toy for annoying people on websites.
If I'm gonna kick you up.
But it's 20 teen.
And today, we have tools like the Cloud, Docker, and many APIs that abstract away the complexity of back end development.
If you're starting up a company today, there's a chance you'll do the majority of your development on the front end with JavaScript.
So today, I wanna show you how to write good JavaScript with modern features and avoid bad JavaScript.
If you're just finding me, like, and subscribe.
And if you have your own JavaScript pro tips, let me know in the comments.
One lucky comment will win this one of a kind t shirt via livestream next week.
Never gonna let you down.
So the first thing you need to know is how to debug your JavaScript like a pro, and the way we do that, of course, is by console logging And I'm saying that with a straight face.
There are good ways to console log and bad ways.
Let's imagine we have 3 different objects, each one assigned to its own variable.
The obvious way to log these is just one after the other, but the main problem is we don't know the name of the variable when this gets logged.
But there's a trick we can here called computed property names where we add the variables to an object.
Not only does this reduce the code footprint, but it also tells us exactly which variable define this data.
One line of code, one console log, and all the information we need.
But maybe this data is extra important, so we want to make it stand out with some custom CSS styling.
You can substitute data and also CSS styles by using a percent sign.
So we'll add percent c and then have the second argument be our actual CSS Style.
And now we get this bold orange color in the console.
One thing you might have noticed is that the objects all share common properties.
So maybe we could display those as a table.
This is really useful when you have an array of objects.
Just do console table with the array.
I could probably do a whole video on console logging, so I'll just show you a couple more things here.
If you're benchmarking performance, you can actually keep track of time in the console.
We'll first define our timer and we'll give it a name of looper.
Then we'll set up a while loop and we'll go through a 1000000 iterations in that loop.
When that's done, we'll run console time end.
As you can see here, it takes an average about 4 to 5 milliseconds to loop a 1000000 times.
Keeping track of time is great, but what if you need to know where a console log originated Let's imagine we have a really important function that deletes items from our database, and we wanna make sure that we don't accidentally call this method twice.
You can add a console trace to your function, and it will give you a stack trace for where it was called and what defined it.
If we run this code, we'll get a console log that tells us the function was defined on line 35 and then called on lines 3738.
So now that you're a debugging expert, I'm gonna show you a few different ways you can make your code as concise and efficient as possible.
Let's imagine we have an object with some animal data, and we need a function that will tell us how to feed the animal.
This is just a function that returns a string.
So inside that string, we'll interpolate a few values from that object.
This doesn't look too bad, but you'll notice that we're repeating the word animal over and over again.
There's a technique called object destructuring that we can use to eliminate most of the repetition here.
If we have a function that takes an object but we only need to use a handful of its properties, we can destructure those in the argument itself.
We just wrap it in brackets and then pass in the names of the object properties that we wanna use.
So now we can format the same string, but we never actually have to use the word animal directly.
This might seem like a modest gain on this simple function, but when you have a big object with a lot of properties, this can make a huge difference.
And I completely understand that some people don't like that bracket syntax in the object argument, so there's actually another way we can do this which is just as good.
This time, we pass in the animal object like we did originally, but then we set up a variable that has the names of the properties in that object set equal to the object.
And now we can use those properties like variables throughout the function.
And this tends to be the better way to go if you have multiple objects to destructure in a single function.
The next thing we'll look at is template literals, which we've already been using in the code, but there's more to talk about here.
When I first started programming 10 years ago, Jquery was the cool thing in JavaScript, kind of like React is today.
But unfortunately, it didn't have all of the awesome things that we have in JavaScript now.
For example, you would see a lot of string concatenation that looks like this, where you have a variable plus a string and you have to manage the spaces in between plus an expression plus a whole bunch of other stuff.
This type of code is incredibly annoying to deal with, but template literals in modern JavaScript solve this problem completely.
Instead of concatenating values together, we can actually interpolate them directly into the string.
You can do this by defining your string with backticks and then use dollar sign brackets and then whatever variable or expression you want inside of there.
So we'll go ahead and grab the properties we need with object structuring that we learned just a minute ago, and then we'll interpolate those into the string itself, which is a lot more readable and a lot easier to maintain.
But you can actually take things a step further and build strings in a purely functional way.
So we'll write a function here called horse age that takes an array of strings as the first argument and then you can take whatever other arguments it wants after that.
We can look at the arguments to this function and use them to compose a string.
So here we're gonna look at the age of the animal.
If it's older than 5, we'll say it's old.
Otherwise, we'll say it's young.
And the last thing we'll do is return the actual value of the string.
That's a pretty standard looking function.
But the interesting thing here is that instead of passing a regular argument to this function, we can actually just attach it to a template literal, and it will parse the arguments in it.
This might seem kinda weird at first, but instead of doing parentheses with the arguments, we'll just attach our template literal, and it will parse all of the string segments as an array of strings as the first argument to the function that we defined.
Then it will handle all the other arguments in the order in which they appear inside of the dollar sign brackets.
In other words, you can take a single argument and use it to compose multiple values in the return string.
This can be a very powerful concept for templating, and it's actually used in the Polymer project now via a library called lit html.
So now that we know how to work with strings, we're going to move on to the spread syntax to work with objects and arrays.
Let's imagine we have one object for a Pokemon and the other one for the stats that define its various attributes.
Let's say we want to assign the properties from the stats object to the pikachu object.
One way to do that is to just redefine them 1 by 1 on the original Pikachu object.
For 1, this is just really ugly and verbose, But we're also mutating the original object when we most likely want to create a new immutable object.
Because let's say that our Pokemon levels up time, we want to represent each level up as its own object.
We could use object assign here and take the original object and merge it in with the stats, And this will merge them together from left to right.
Or if we just wanted to update a single property, we could add an object with that property in it.
This isn't too bad, but there's a more concise way to do this with the spread syntax.
By creating a new object and placing our existing objects in it with 3 dots in front of them, it will compose a new object from left to right.
So the properties farthest to the right will have the priority.
Again, this is mostly just syntactic sugar, and it just makes your code more readable and easier to maintain.
And it's also possible to use the spread syntax on arrays.
So let's imagine we have an array of strings, and we need to push additional items to this array.
The old school way to do this would be to just push new items to the array 1 by 1.
But in today's world, we can reduce these three lines of code to just 1 by defining an array with the new items and then the spread syntax on the original array.
If we add the 3 dots to the beginning, then it's the equivalent of doing an Array push because it will append the new items to the end of the Array.
But the nice thing is we could just add this to the end of the array, and then we have the equivalent of array shift.
And we might even take the original values and just splice them in the middle of the array, giving us even more flexibility.
And this code brings back some memories.
You see this little trailing comma here?
This used to be the kind of thing that would break an entire Java program and be really difficult to figure out.
But luckily in modern JavaScript, it just works and it's actually kind of considered a good practice because you can reduce the number of lines that change when you do git commit.
Now it's time to move on to loops.
Let's imagine we have an array of numbers here that represent the order totals that we've had throughout the day in our app.
Now let's say we need to compute some values based on this array, such as the order total.
Maybe we need to add some tax to each one and filter out the high value orders to be reviewed by a manager.
One option is to just use a classic for loop like you'll find in pretty much every programming language.
We have an integer that starts at 0.
While that integer is less than the order's length, we will increment it by 1.
Personally, I hate loops look like this and I almost never use them in JavaScript.
But while we're in the loop, we can start computing our values.
For the total, we will just do plus equals with the order total.
Then to create a new array with the tax added to it, we'll go ahead and take the order amount and multiply it by 1.1 to add 10% tax.
Then if we have order values that are greater than 100, we'll go ahead and add those to the high value order array.
This code is, a, very ugly, and, b, it's mutating values That might make our code a little more unpredictable.
Luckily, we can reduce this down to just three lines of code by using modern JavaScript array methods.
If we want to take an array and then have it accumulate to a value that equals, say, a total amount, we can use array reduce.
It takes a callback function as the argument where the first argument is the accumulated value and the second argument is the current value in the loop.
So if we want to sum up all of the items in the array, we can just do the accumulated values plus the current value.
And when the loop finishes, that will give us the total of all elements in that array.
Mapping and filtering values is even easier.
If we want to add tax to all the items in the array, we can just take the values in the array Then map them to their value times 1.1.
And lastly, we can use filter to create an array that only has the values greater than 100 in it.
Whenever the callback function equals true, it's going to allow value through.
So in other words, if the value is greater than 100, it will allow that value through to the new array.
I wanted to save the best for last and that, of course, is asyncawait.
Let's create a method called random that returns a Promise that resolves to a random number asynchronously.
Now let's imagine that we want to retrieve 3 different asynchronous numbers, one after the other, and then add them all together at the end.
That might seem like a silly example, but that's actually how things work a lot of times in the real world when you have to retrieve one item from the database, get some data, retrieve another item from an API, and so on.
With promises, you wait for an asynchronous value to resolve, and then you handle it with a callback function inside of ben.
Once you have your data, you can return another Promise and then chain another then callback to it and continue this pattern on for as long as you need to.
You end up with this ridiculous looking code where you keep saying and then and then and then.
And.
And then.
No.
And then.
No.
And then.
No.
And then.
No.
And then.
No.
And then.
No.
And then.
But fortunately, there's a really nice solution to this, which is async await.
Basically, it allows us to express asynchronous code in a synchronous format.
We can come down here and rewrite our Promise chain.
The only difference is adding async in front of the function which will force it to turn a Promise.
But the real benefit here is that we can use a wait in front of our Promises and have them resolve to an actual variable value.
So instead of using those then callbacks, we can just say const first equals await random and do the same thing for the second and 3rd number.
And now it's much easier to read and understand this code because we can just go line by line and see that we're awaiting one number, awaiting another number, and so on.
Async await is one of the most awesome things to ever happen to JavaScript and it really deserves its own video.
Right now, we're out of time, but in the future, I'll show you some of the cool things you can do with it, like use it in conditional statements or use it in for loops and things Like that.
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 live stream next week to see if you won some free swag.
And if you're serious about building apps, Consider becoming a pro member at angularfirebase.com.
You'll get all kinds of exclusive content designed to help you build and ship your app faster.
Thanks for watching, and I'll talk to you soon.

Speaker 0: JavaScript is a programming language that people love to hate. A long time ago, developers used to pride themselves on being back end developers because it was More challenging and complex. JavaScript was just a toy for annoying people on websites.

Speaker 1: If I'm gonna kick you up.

Speaker 0: But it's 20 teen. And today, we have tools like the Cloud, Docker, and many APIs that abstract away the complexity of back end development. If you're starting up a company today, there's a chance you'll do the majority of your development on the front end with JavaScript. So today, I wanna show you how to write good JavaScript with modern features and avoid bad JavaScript. If you're just finding me, like, and subscribe.

And if you have your own JavaScript pro tips, let me know in the comments. One lucky comment will win this one of a kind t shirt via livestream next week.

Speaker 1: Never gonna let you down.

Speaker 0: So the first thing you need to know is how to debug your JavaScript like a pro, and the way we do that, of course, is by console logging And I'm saying that with a straight face. There are good ways to console log and bad ways. Let's imagine we have 3 different objects, each one assigned to its own variable. The obvious way to log these is just one after the other, but the main problem is we don't know the name of the variable when this gets logged. But there's a trick we can here called computed property names where we add the variables to an object.

Not only does this reduce the code footprint, but it also tells us exactly which variable define this data. One line of code, one console log, and all the information we need. But maybe this data is extra important, so we want to make it stand out with some custom CSS styling. You can substitute data and also CSS styles by using a percent sign. So we'll add percent c and then have the second argument be our actual CSS Style.

And now we get this bold orange color in the console. One thing you might have noticed is that the objects all share common properties. So maybe we could display those as a table. This is really useful when you have an array of objects. Just do console table with the array.

I could probably do a whole video on console logging, so I'll just show you a couple more things here. If you're benchmarking performance, you can actually keep track of time in the console. We'll first define our timer and we'll give it a name of looper. Then we'll set up a while loop and we'll go through a 1000000 iterations in that loop. When that's done, we'll run console time end.

As you can see here, it takes an average about 4 to 5 milliseconds to loop a 1000000 times. Keeping track of time is great, but what if you need to know where a console log originated Let's imagine we have a really important function that deletes items from our database, and we wanna make sure that we don't accidentally call this method twice. You can add a console trace to your function, and it will give you a stack trace for where it was called and what defined it. If we run this code, we'll get a console log that tells us the function was defined on line 35 and then called on lines 3738. So now that you're a debugging expert, I'm gonna show you a few different ways you can make your code as concise and efficient as possible.

Let's imagine we have an object with some animal data, and we need a function that will tell us how to feed the animal. This is just a function that returns a string. So inside that string, we'll interpolate a few values from that object. This doesn't look too bad, but you'll notice that we're repeating the word animal over and over again. There's a technique called object destructuring that we can use to eliminate most of the repetition here.

If we have a function that takes an object but we only need to use a handful of its properties, we can destructure those in the argument itself. We just wrap it in brackets and then pass in the names of the object properties that we wanna use. So now we can format the same string, but we never actually have to use the word animal directly. This might seem like a modest gain on this simple function, but when you have a big object with a lot of properties, this can make a huge difference. And I completely understand that some people don't like that bracket syntax in the object argument, so there's actually another way we can do this which is just as good.

This time, we pass in the animal object like we did originally, but then we set up a variable that has the names of the properties in that object set equal to the object. And now we can use those properties like variables throughout the function. And this tends to be the better way to go if you have multiple objects to destructure in a single function. The next thing we'll look at is template literals, which we've already been using in the code, but there's more to talk about here. When I first started programming 10 years ago, Jquery was the cool thing in JavaScript, kind of like React is today.

But unfortunately, it didn't have all of the awesome things that we have in JavaScript now. For example, you would see a lot of string concatenation that looks like this, where you have a variable plus a string and you have to manage the spaces in between plus an expression plus a whole bunch of other stuff. This type of code is incredibly annoying to deal with, but template literals in modern JavaScript solve this problem completely. Instead of concatenating values together, we can actually interpolate them directly into the string. You can do this by defining your string with backticks and then use dollar sign brackets and then whatever variable or expression you want inside of there.

So we'll go ahead and grab the properties we need with object structuring that we learned just a minute ago, and then we'll interpolate those into the string itself, which is a lot more readable and a lot easier to maintain. But you can actually take things a step further and build strings in a purely functional way. So we'll write a function here called horse age that takes an array of strings as the first argument and then you can take whatever other arguments it wants after that. We can look at the arguments to this function and use them to compose a string. So here we're gonna look at the age of the animal.

If it's older than 5, we'll say it's old. Otherwise, we'll say it's young. And the last thing we'll do is return the actual value of the string. That's a pretty standard looking function. But the interesting thing here is that instead of passing a regular argument to this function, we can actually just attach it to a template literal, and it will parse the arguments in it.

This might seem kinda weird at first, but instead of doing parentheses with the arguments, we'll just attach our template literal, and it will parse all of the string segments as an array of strings as the first argument to the function that we defined. Then it will handle all the other arguments in the order in which they appear inside of the dollar sign brackets. In other words, you can take a single argument and use it to compose multiple values in the return string. This can be a very powerful concept for templating, and it's actually used in the Polymer project now via a library called lit html. So now that we know how to work with strings, we're going to move on to the spread syntax to work with objects and arrays.

Let's imagine we have one object for a Pokemon and the other one for the stats that define its various attributes. Let's say we want to assign the properties from the stats object to the pikachu object. One way to do that is to just redefine them 1 by 1 on the original Pikachu object. For 1, this is just really ugly and verbose, But we're also mutating the original object when we most likely want to create a new immutable object. Because let's say that our Pokemon levels up time, we want to represent each level up as its own object.

We could use object assign here and take the original object and merge it in with the stats, And this will merge them together from left to right. Or if we just wanted to update a single property, we could add an object with that property in it. This isn't too bad, but there's a more concise way to do this with the spread syntax. By creating a new object and placing our existing objects in it with 3 dots in front of them, it will compose a new object from left to right. So the properties farthest to the right will have the priority.

Again, this is mostly just syntactic sugar, and it just makes your code more readable and easier to maintain. And it's also possible to use the spread syntax on arrays. So let's imagine we have an array of strings, and we need to push additional items to this array. The old school way to do this would be to just push new items to the array 1 by 1. But in today's world, we can reduce these three lines of code to just 1 by defining an array with the new items and then the spread syntax on the original array.

If we add the 3 dots to the beginning, then it's the equivalent of doing an Array push because it will append the new items to the end of the Array. But the nice thing is we could just add this to the end of the array, and then we have the equivalent of array shift. And we might even take the original values and just splice them in the middle of the array, giving us even more flexibility. And this code brings back some memories. You see this little trailing comma here?

This used to be the kind of thing that would break an entire Java program and be really difficult to figure out. But luckily in modern JavaScript, it just works and it's actually kind of considered a good practice because you can reduce the number of lines that change when you do git commit. Now it's time to move on to loops. Let's imagine we have an array of numbers here that represent the order totals that we've had throughout the day in our app. Now let's say we need to compute some values based on this array, such as the order total.

Maybe we need to add some tax to each one and filter out the high value orders to be reviewed by a manager. One option is to just use a classic for loop like you'll find in pretty much every programming language. We have an integer that starts at 0. While that integer is less than the order's length, we will increment it by 1. Personally, I hate loops look like this and I almost never use them in JavaScript.

But while we're in the loop, we can start computing our values. For the total, we will just do plus equals with the order total. Then to create a new array with the tax added to it, we'll go ahead and take the order amount and multiply it by 1.1 to add 10% tax. Then if we have order values that are greater than 100, we'll go ahead and add those to the high value order array. This code is, a, very ugly, and, b, it's mutating values That might make our code a little more unpredictable.

Luckily, we can reduce this down to just three lines of code by using modern JavaScript array methods. If we want to take an array and then have it accumulate to a value that equals, say, a total amount, we can use array reduce. It takes a callback function as the argument where the first argument is the accumulated value and the second argument is the current value in the loop. So if we want to sum up all of the items in the array, we can just do the accumulated values plus the current value. And when the loop finishes, that will give us the total of all elements in that array.

Mapping and filtering values is even easier. If we want to add tax to all the items in the array, we can just take the values in the array Then map them to their value times 1.1. And lastly, we can use filter to create an array that only has the values greater than 100 in it. Whenever the callback function equals true, it's going to allow value through. So in other words, if the value is greater than 100, it will allow that value through to the new array.

I wanted to save the best for last and that, of course, is asyncawait. Let's create a method called random that returns a Promise that resolves to a random number asynchronously. Now let's imagine that we want to retrieve 3 different asynchronous numbers, one after the other, and then add them all together at the end. That might seem like a silly example, but that's actually how things work a lot of times in the real world when you have to retrieve one item from the database, get some data, retrieve another item from an API, and so on. With promises, you wait for an asynchronous value to resolve, and then you handle it with a callback function inside of ben.

Once you have your data, you can return another Promise and then chain another then callback to it and continue this pattern on for as long as you need to. You end up with this ridiculous looking code where you keep saying and then and then and then.

Speaker 1: And. And then. No. And then. No.

And then. No. And then. No. And then.

No. And then. No. And then.

Speaker 0: But fortunately, there's a really nice solution to this, which is async await. Basically, it allows us to express asynchronous code in a synchronous format. We can come down here and rewrite our Promise chain. The only difference is adding async in front of the function which will force it to turn a Promise. But the real benefit here is that we can use a wait in front of our Promises and have them resolve to an actual variable value.

So instead of using those then callbacks, we can just say const first equals await random and do the same thing for the second and 3rd number. And now it's much easier to read and understand this code because we can just go line by line and see that we're awaiting one number, awaiting another number, and so on. Async await is one of the most awesome things to ever happen to JavaScript and it really deserves its own video. Right now, we're out of time, but in the future, I'll show you some of the cool things you can do with it, like use it in conditional statements or use it in for loops and things Like that. 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 live stream next week to see if you won some free swag. And if you're serious about building apps, Consider becoming a pro member at angularfirebase.com. You'll get all kinds of exclusive content designed to help you build and ship your app faster. Thanks for watching, and I'll talk to you soon.
JavaScript is a programming language that people love to hate. A long time ago, developers used to pride themselves on being back end developers because it was More challenging and complex. JavaScript was just a toy for annoying people on websites. If I'm gonna kick you up. But it's 20 teen. And today, we have tools like the Cloud, Docker, and many APIs that abstract away the complexity of back end development. If you're starting up a company today, there's a chance you'll do the majority of your development on the front end with JavaScript. So today, I wanna show you how to write good JavaScript with modern features and avoid bad JavaScript. If you're just finding me, like, and subscribe. And if you have your own JavaScript pro tips, let me know in the comments. One lucky comment will win this one of a kind t shirt via livestream next week. Never gonna let you down. So the first thing you need to know is how to debug your JavaScript like a pro, and the way we do that, of course, is by console logging And I'm saying that with a straight face.
There are good ways to console log and bad ways. Let's imagine we have 3 different objects, each one assigned to its own variable. The obvious way to log these is just one after the other, but the main problem is we don't know the name of the variable when this gets logged. But there's a trick we can here called computed property names where we add the variables to an object. Not only does this reduce the code footprint, but it also tells us exactly which variable define this data. One line of code, one console log, and all the information we need.
programming
data
But maybe this data is extra important, so we want to make it stand out with some custom CSS styling. You can substitute data and also CSS styles by using a percent sign. So we'll add percent c and then have the second argument be our actual CSS Style. And now we get this bold orange color in the console. One thing you might have noticed is that the objects all share common properties. So maybe we could display those as a table. This is really useful when you have an array of objects. Just do console table with the array. I could probably do a whole video on console logging, so I'll just show you a couple more things here. If you're benchmarking performance, you can actually keep track of time in the console. We'll first define our timer and we'll give it a name of looper. Then we'll set up a while loop and we'll go through a 1000000 iterations in that loop. When that's done, we'll run console time end. As you can see here, it takes an average about 4 to 5 milliseconds to loop a 1000000 times. Keeping track of time is great, but what if you need to know where a console log originated Let's imagine we have a really important function that deletes items from our database, and we wanna make sure that we don't accidentally call this method twice.
You can add a console trace to your function, and it will give you a stack trace for where it was called and what defined it. If we run this code, we'll get a console log that tells us the function was defined on line 35 and then called on lines 3738. So now that you're a debugging expert, I'm gonna show you a few different ways you can make your code as concise and efficient as possible. Let's imagine we have an object with some animal data, and we need a function that will tell us how to feed the animal. This is just a function that returns a string. So inside that string, we'll interpolate a few values from that object. This doesn't look too bad, but you'll notice that we're repeating the word animal over and over again.
livestock
animals
programming
There's a technique called object destructuring that we can use to eliminate most of the repetition here. If we have a function that takes an object but we only need to use a handful of its properties, we can destructure those in the argument itself. We just wrap it in brackets and then pass in the names of the object properties that we wanna use. So now we can format the same string, but we never actually have to use the word animal directly. This might seem like a modest gain on this simple function, but when you have a big object with a lot of properties, this can make a huge difference.
And I completely understand that some people don't like that bracket syntax in the object argument, so there's actually another way we can do this which is just as good. This time, we pass in the animal object like we did originally, but then we set up a variable that has the names of the properties in that object set equal to the object.
logic
And now we can use those properties like variables throughout the function. And this tends to be the better way to go if you have multiple objects to destructure in a single function. The next thing we'll look at is template literals, which we've already been using in the code, but there's more to talk about here. When I first started programming 10 years ago, Jquery was the cool thing in JavaScript, kind of like React is today. But unfortunately, it didn't have all of the awesome things that we have in JavaScript now. For example, you would see a lot of string concatenation that looks like this, where you have a variable plus a string and you have to manage the spaces in between plus an expression plus a whole bunch of other stuff. This type of code is incredibly annoying to deal with, but template literals in modern JavaScript solve this problem completely. Instead of concatenating values together, we can actually interpolate them directly into the string. You can do this by defining your string with backticks and then use dollar sign brackets and then whatever variable or expression you want inside of there. So we'll go ahead and grab the properties we need with object structuring that we learned just a minute ago, and then we'll interpolate those into the string itself, which is a lot more readable and a lot easier to maintain. But you can actually take things a step further and build strings in a purely functional way. So we'll write a function here called horse age that takes an array of strings as the first argument and then you can take whatever other arguments it wants after that. We can look at the arguments to this function and use them to compose a string. So here we're gonna look at the age of the animal. If it's older than 5, we'll say it's old. Otherwise, we'll say it's young. And the last thing we'll do is return the actual value of the string. That's a pretty standard looking function. But the interesting thing here is that instead of passing a regular argument to this function, we can actually just attach it to a template literal, and it will parse the arguments in it. This might seem kinda weird at first, but instead of doing parentheses with the arguments, we'll just attach our template literal, and it will parse all of the string segments as an array of strings as the first argument to the function that we defined.
Then it will handle all the other arguments in the order in which they appear inside of the dollar sign brackets. In other words, you can take a single argument and use it to compose multiple values in the return string. This can be a very powerful concept for templating, and it's actually used in the Polymer project now via a library called lit html. So now that we know how to work with strings, we're going to move on to the spread syntax to work with objects and arrays. Let's imagine we have one object for a Pokemon and the other one for the stats that define its various attributes.
programming
Let's say we want to assign the properties from the stats object to the pikachu object. One way to do that is to just redefine them 1 by 1 on the original Pikachu object. For 1, this is just really ugly and verbose, But we're also mutating the original object when we most likely want to create a new immutable object. Because let's say that our Pokemon levels up time, we want to represent each level up as its own object. We could use object assign here and take the original object and merge it in with the stats, And this will merge them together from left to right. Or if we just wanted to update a single property, we could add an object with that property in it. This isn't too bad, but there's a more concise way to do this with the spread syntax. By creating a new object and placing our existing objects in it with 3 dots in front of them, it will compose a new object from left to right. So the properties farthest to the right will have the priority. Again, this is mostly just syntactic sugar, and it just makes your code more readable and easier to maintain. And it's also possible to use the spread syntax on arrays. So let's imagine we have an array of strings, and we need to push additional items to this array. The old school way to do this would be to just push new items to the array 1 by 1. But in today's world, we can reduce these three lines of code to just 1 by defining an array with the new items and then the spread syntax on the original array. If we add the 3 dots to the beginning, then it's the equivalent of doing an Array push because it will append the new items to the end of the Array. But the nice thing is we could just add this to the end of the array, and then we have the equivalent of array shift. And we might even take the original values and just splice them in the middle of the array, giving us even more flexibility. And this code brings back some memories. You see this little trailing comma here? This used to be the kind of thing that would break an entire Java program and be really difficult to figure out. But luckily in modern JavaScript, it just works and it's actually kind of considered a good practice because you can reduce the number of lines that change when you do git commit.
Now it's time to move on to loops. Let's imagine we have an array of numbers here that represent the order totals that we've had throughout the day in our app. Now let's say we need to compute some values based on this array, such as the order total. Maybe we need to add some tax to each one and filter out the high value orders to be reviewed by a manager. One option is to just use a classic for loop like you'll find in pretty much every programming language.
programming
We have an integer that starts at 0. While that integer is less than the order's length, we will increment it by 1. Personally, I hate loops look like this and I almost never use them in JavaScript.
But while we're in the loop, we can start computing our values. For the total, we will just do plus equals with the order total. Then to create a new array with the tax added to it, we'll go ahead and take the order amount and multiply it by 1.1 to add 10% tax. Then if we have order values that are greater than 100, we'll go ahead and add those to the high value order array.
taxes
This code is, a, very ugly, and, b, it's mutating values That might make our code a little more unpredictable. Luckily, we can reduce this down to just three lines of code by using modern JavaScript array methods. If we want to take an array and then have it accumulate to a value that equals, say, a total amount, we can use array reduce. It takes a callback function as the argument where the first argument is the accumulated value and the second argument is the current value in the loop. So if we want to sum up all of the items in the array, we can just do the accumulated values plus the current value.
And when the loop finishes, that will give us the total of all elements in that array. Mapping and filtering values is even easier. If we want to add tax to all the items in the array, we can just take the values in the array Then map them to their value times 1.1.
taxes
And lastly, we can use filter to create an array that only has the values greater than 100 in it. Whenever the callback function equals true, it's going to allow value through. So in other words, if the value is greater than 100, it will allow that value through to the new array. I wanted to save the best for last and that, of course, is asyncawait.
Let's create a method called random that returns a Promise that resolves to a random number asynchronously. Now let's imagine that we want to retrieve 3 different asynchronous numbers, one after the other, and then add them all together at the end. That might seem like a silly example, but that's actually how things work a lot of times in the real world when you have to retrieve one item from the database, get some data, retrieve another item from an API, and so on. With promises, you wait for an asynchronous value to resolve, and then you handle it with a callback function inside of ben.
probability
data
Once you have your data, you can return another Promise and then chain another then callback to it and continue this pattern on for as long as you need to.
You end up with this ridiculous looking code where you keep saying and then and then and then. And. And then. No. And then. No. And then. No. And then. No. And then. No. And then. No. And then. But fortunately, there's a really nice solution to this, which is async await.
programming
Basically, it allows us to express asynchronous code in a synchronous format. We can come down here and rewrite our Promise chain. The only difference is adding async in front of the function which will force it to turn a Promise. But the real benefit here is that we can use a wait in front of our Promises and have them resolve to an actual variable value. So instead of using those then callbacks, we can just say const first equals await random and do the same thing for the second and 3rd number.
And now it's much easier to read and understand this code because we can just go line by line and see that we're awaiting one number, awaiting another number, and so on. Async await is one of the most awesome things to ever happen to JavaScript and it really deserves its own video.
programming
Right now, we're out of time, but in the future, I'll show you some of the cool things you can do with it, like use it in conditional statements or use it in for loops and things Like that.
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 live stream next week to see if you won some free swag. And if you're serious about building apps, Consider becoming a pro member at angularfirebase.com. You'll get all kinds of exclusive content designed to help you build and ship your app faster. Thanks for watching, and I'll talk to you soon.
youtube
software development
software
JavaScript is a programming language that people love to hate. A long time ago, developers used to pride themselves on being back end developers because it was More challenging and complex. JavaScript was just a toy for annoying people on websites. If I'm gonna kick you up. But it's 20 teen. And today, we have tools like the Cloud, Docker, and many APIs that abstract away the complexity of back end development. If you're starting up a company today, there's a chance you'll do the majority of your development on the front end with JavaScript. So today, I wanna show you how to write good JavaScript with modern features and avoid bad JavaScript. If you're just finding me, like, and subscribe. And if you have your own JavaScript pro tips, let me know in the comments. One lucky comment will win this one of a kind t shirt via livestream next week. Never gonna let you down. So the first thing you need to know is how to debug your JavaScript like a pro, and the way we do that, of course, is by console logging And I'm saying that with a straight face. There are good ways to console log and bad ways. Let's imagine we have 3 different objects, each one assigned to its own variable. The obvious way to log these is just one after the other, but the main problem is we don't know the name of the variable when this gets logged. But there's a trick we can here called computed property names where we add the variables to an object. Not only does this reduce the code footprint, but it also tells us exactly which variable define this data. One line of code, one console log, and all the information we need. But maybe this data is extra important, so we want to make it stand out with some custom CSS styling. You can substitute data and also CSS styles by using a percent sign. So we'll add percent c and then have the second argument be our actual CSS Style. And now we get this bold orange color in the console. One thing you might have noticed is that the objects all share common properties. So maybe we could display those as a table. This is really useful when you have an array of objects. Just do console table with the array. I could probably do a whole video on console logging, so I'll just show you a couple more things here. If you're benchmarking performance, you can actually keep track of time in the console. We'll first define our timer and we'll give it a name of looper. Then we'll set up a while loop and we'll go through a 1000000 iterations in that loop. When that's done, we'll run console time end. As you can see here, it takes an average about 4 to 5 milliseconds to loop a 1000000 times. Keeping track of time is great, but what if you need to know where a console log originated Let's imagine we have a really important function that deletes items from our database, and we wanna make sure that we don't accidentally call this method twice. You can add a console trace to your function, and it will give you a stack trace for where it was called and what defined it. If we run this code, we'll get a console log that tells us the function was defined on line 35 and then called on lines 3738. So now that you're a debugging expert, I'm gonna show you a few different ways you can make your code as concise and efficient as possible. Let's imagine we have an object with some animal data, and we need a function that will tell us how to feed the animal. This is just a function that returns a string. So inside that string, we'll interpolate a few values from that object. This doesn't look too bad, but you'll notice that we're repeating the word animal over and over again. There's a technique called object destructuring that we can use to eliminate most of the repetition here. If we have a function that takes an object but we only need to use a handful of its properties, we can destructure those in the argument itself. We just wrap it in brackets and then pass in the names of the object properties that we wanna use. So now we can format the same string, but we never actually have to use the word animal directly. This might seem like a modest gain on this simple function, but when you have a big object with a lot of properties, this can make a huge difference. And I completely understand that some people don't like that bracket syntax in the object argument, so there's actually another way we can do this which is just as good. This time, we pass in the animal object like we did originally, but then we set up a variable that has the names of the properties in that object set equal to the object. And now we can use those properties like variables throughout the function. And this tends to be the better way to go if you have multiple objects to destructure in a single function. The next thing we'll look at is template literals, which we've already been using in the code, but there's more to talk about here. When I first started programming 10 years ago, Jquery was the cool thing in JavaScript, kind of like React is today. But unfortunately, it didn't have all of the awesome things that we have in JavaScript now. For example, you would see a lot of string concatenation that looks like this, where you have a variable plus a string and you have to manage the spaces in between plus an expression plus a whole bunch of other stuff. This type of code is incredibly annoying to deal with, but template literals in modern JavaScript solve this problem completely. Instead of concatenating values together, we can actually interpolate them directly into the string. You can do this by defining your string with backticks and then use dollar sign brackets and then whatever variable or expression you want inside of there. So we'll go ahead and grab the properties we need with object structuring that we learned just a minute ago, and then we'll interpolate those into the string itself, which is a lot more readable and a lot easier to maintain. But you can actually take things a step further and build strings in a purely functional way. So we'll write a function here called horse age that takes an array of strings as the first argument and then you can take whatever other arguments it wants after that. We can look at the arguments to this function and use them to compose a string. So here we're gonna look at the age of the animal. If it's older than 5, we'll say it's old. Otherwise, we'll say it's young. And the last thing we'll do is return the actual value of the string. That's a pretty standard looking function. But the interesting thing here is that instead of passing a regular argument to this function, we can actually just attach it to a template literal, and it will parse the arguments in it. This might seem kinda weird at first, but instead of doing parentheses with the arguments, we'll just attach our template literal, and it will parse all of the string segments as an array of strings as the first argument to the function that we defined. Then it will handle all the other arguments in the order in which they appear inside of the dollar sign brackets. In other words, you can take a single argument and use it to compose multiple values in the return string. This can be a very powerful concept for templating, and it's actually used in the Polymer project now via a library called lit html. So now that we know how to work with strings, we're going to move on to the spread syntax to work with objects and arrays. Let's imagine we have one object for a Pokemon and the other one for the stats that define its various attributes. Let's say we want to assign the properties from the stats object to the pikachu object. One way to do that is to just redefine them 1 by 1 on the original Pikachu object. For 1, this is just really ugly and verbose, But we're also mutating the original object when we most likely want to create a new immutable object. Because let's say that our Pokemon levels up time, we want to represent each level up as its own object. We could use object assign here and take the original object and merge it in with the stats, And this will merge them together from left to right. Or if we just wanted to update a single property, we could add an object with that property in it. This isn't too bad, but there's a more concise way to do this with the spread syntax. By creating a new object and placing our existing objects in it with 3 dots in front of them, it will compose a new object from left to right. So the properties farthest to the right will have the priority. Again, this is mostly just syntactic sugar, and it just makes your code more readable and easier to maintain. And it's also possible to use the spread syntax on arrays. So let's imagine we have an array of strings, and we need to push additional items to this array. The old school way to do this would be to just push new items to the array 1 by 1. But in today's world, we can reduce these three lines of code to just 1 by defining an array with the new items and then the spread syntax on the original array. If we add the 3 dots to the beginning, then it's the equivalent of doing an Array push because it will append the new items to the end of the Array. But the nice thing is we could just add this to the end of the array, and then we have the equivalent of array shift. And we might even take the original values and just splice them in the middle of the array, giving us even more flexibility. And this code brings back some memories. You see this little trailing comma here? This used to be the kind of thing that would break an entire Java program and be really difficult to figure out. But luckily in modern JavaScript, it just works and it's actually kind of considered a good practice because you can reduce the number of lines that change when you do git commit. Now it's time to move on to loops. Let's imagine we have an array of numbers here that represent the order totals that we've had throughout the day in our app. Now let's say we need to compute some values based on this array, such as the order total. Maybe we need to add some tax to each one and filter out the high value orders to be reviewed by a manager. One option is to just use a classic for loop like you'll find in pretty much every programming language. We have an integer that starts at 0. While that integer is less than the order's length, we will increment it by 1. Personally, I hate loops look like this and I almost never use them in JavaScript. But while we're in the loop, we can start computing our values. For the total, we will just do plus equals with the order total. Then to create a new array with the tax added to it, we'll go ahead and take the order amount and multiply it by 1.1 to add 10% tax. Then if we have order values that are greater than 100, we'll go ahead and add those to the high value order array. This code is, a, very ugly, and, b, it's mutating values That might make our code a little more unpredictable. Luckily, we can reduce this down to just three lines of code by using modern JavaScript array methods. If we want to take an array and then have it accumulate to a value that equals, say, a total amount, we can use array reduce. It takes a callback function as the argument where the first argument is the accumulated value and the second argument is the current value in the loop. So if we want to sum up all of the items in the array, we can just do the accumulated values plus the current value. And when the loop finishes, that will give us the total of all elements in that array. Mapping and filtering values is even easier. If we want to add tax to all the items in the array, we can just take the values in the array Then map them to their value times 1.1. And lastly, we can use filter to create an array that only has the values greater than 100 in it. Whenever the callback function equals true, it's going to allow value through. So in other words, if the value is greater than 100, it will allow that value through to the new array. I wanted to save the best for last and that, of course, is asyncawait. Let's create a method called random that returns a Promise that resolves to a random number asynchronously. Now let's imagine that we want to retrieve 3 different asynchronous numbers, one after the other, and then add them all together at the end. That might seem like a silly example, but that's actually how things work a lot of times in the real world when you have to retrieve one item from the database, get some data, retrieve another item from an API, and so on. With promises, you wait for an asynchronous value to resolve, and then you handle it with a callback function inside of ben. Once you have your data, you can return another Promise and then chain another then callback to it and continue this pattern on for as long as you need to. You end up with this ridiculous looking code where you keep saying and then and then and then. And. And then. No. And then. No. And then. No. And then. No. And then. No. And then. No. And then. But fortunately, there's a really nice solution to this, which is async await. Basically, it allows us to express asynchronous code in a synchronous format. We can come down here and rewrite our Promise chain. The only difference is adding async in front of the function which will force it to turn a Promise. But the real benefit here is that we can use a wait in front of our Promises and have them resolve to an actual variable value. So instead of using those then callbacks, we can just say const first equals await random and do the same thing for the second and 3rd number. And now it's much easier to read and understand this code because we can just go line by line and see that we're awaiting one number, awaiting another number, and so on. Async await is one of the most awesome things to ever happen to JavaScript and it really deserves its own video. Right now, we're out of time, but in the future, I'll show you some of the cool things you can do with it, like use it in conditional statements or use it in for loops and things Like that. 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 live stream next week to see if you won some free swag. And if you're serious about building apps, Consider becoming a pro member at angularfirebase.com. You'll get all kinds of exclusive content designed to help you build and ship your app faster. Thanks for watching, and I'll talk to you soon.
JavaScript
javascript
is
is
a
a
programming
programming
language
language
that
that
people
people
love
love
to
to
hate.
hate
A
a
long
long
time
time
ago,
ago
developers
developers
used
used
to
to
pride
pride
themselves
themselves
on
on
being
being
back
back
end
end
developers
developers
because
because
it
it
was
was
More
more
challenging
challenging
and
and
complex.
complex
JavaScript
javascript
was
was
just
just
a
a
toy
toy
for
for
annoying
annoying
people
people
on
on
websites.
websites
If
if
I'm
i'm
gonna
gonna
kick
kick
you
you
up.
up
But
but
it's
it's
20
20
teen.
teen
And
and
today,
today
we
we
have
have
tools
tools
like
like
the
the
Cloud,
cloud
Docker,
docker
and
and
many
many
APIs
apis
that
that
abstract
abstract
away
away
the
the
complexity
complexity
of
of
back
back
end
end
development.
development
If
if
you're
you're
starting
starting
up
up
a
a
company
company
today,
today
there's
there's
a
a
chance
chance
you'll
you'll
do
do
the
the
majority
majority
of
of
your
your
development
development
on
on
the
the
front
front
end
end
with
with
JavaScript.
javascript
So
so
today,
today
I
i
wanna
wanna
show
show
you
you
how
how
to
to
write
write
good
good
JavaScript
javascript
with
with
modern
modern
features
features
and
and
avoid
avoid
bad
bad
JavaScript.
javascript
If
if
you're
you're
just
just
finding
finding
me,
me
like,
like
and
and
subscribe.
subscribe
And
and
if
if
you
you
have
have
your
your
own
own
JavaScript
javascript
pro
pro
tips,
tips
let
let
me
me
know
know
in
in
the
the
comments.
comments
One
one
lucky
lucky
comment
comment
will
will
win
win
this
this
one
one
of
of
a
a
kind
kind
t
t
shirt
shirt
via
via
livestream
livestream
next
next
week.
week
Never
never
gonna
gonna
let
let
you
you
down.
down
So
so
the
the
first
first
thing
thing
you
you
need
need
to
to
know
know
is
is
how
how
to
to
debug
debug
your
your
JavaScript
javascript
like
like
a
a
pro,
pro
and
and
the
the
way
way
we
we
do
do
that,
that
of
of
course,
course
is
is
by
by
console
console
logging
logging
And
and
I'm
i'm
saying
saying
that
that
with
with
a
a
straight
straight
face.
face
There
there
are
are
good
good
ways
ways
to
to
console
console
log
log
and
and
bad
bad
ways.
ways
Let's
let's
imagine
imagine
we
we
have
have
3
3
different
different
objects,
objects
each
each
one
one
assigned
assigned
to
to
its
its
own
own
variable.
variable
The
the
obvious
obvious
way
way
to
to
log
log
these
these
is
is
just
just
one
one
after
after
the
the
other,
other
but
but
the
the
main
main
problem
problem
is
is
we
we
don't
don't
know
know
the
the
name
name
of
of
the
the
variable
variable
when
when
this
this
gets
gets
logged.
logged
But
but
there's
there's
a
a
trick
trick
we
we
can
can
here
here
called
called
computed
computed
property
property
names
names
where
where
we
we
add
add
the
the
variables
variables
to
to
an
an
object.
object
Not
not
only
only
does
does
this
this
reduce
reduce
the
the
code
code
footprint,
footprint
but
but
it
it
also
also
tells
tells
us
us
exactly
exactly
which
which
variable
variable
define
define
this
this
data.
data
One
one
line
line
of
of
code,
code
one
one
console
console
log,
log
and
and
all
all
the
the
information
information
we
we
need.
need
But
but
maybe
maybe
this
this
data
data
is
is
extra
extra
important,
important
so
so
we
we
want
want
to
to
make
make
it
it
stand
stand
out
out
with
with
some
some
custom
custom
CSS
css
styling.
styling
You
you
can
can
substitute
substitute
data
data
and
and
also
also
CSS
css
styles
styles
by
by
using
using
a
a
percent
percent
sign.
sign
So
so
we'll
we'll
add
add
percent
percent
c
c
and
and
then
then
have
have
the
the
second
second
argument
argument
be
be
our
our
actual
actual
CSS
css
Style.
style
And
and
now
now
we
we
get
get
this
this
bold
bold
orange
orange
color
color
in
in
the
the
console.
console
One
one
thing
thing
you
you
might
might
have
have
noticed
noticed
is
is
that
that
the
the
objects
objects
all
all
share
share
common
common
properties.
properties
So
so
maybe
maybe
we
we
could
could
display
display
those
those
as
as
a
a
table.
table
This
this
is
is
really
really
useful
useful
when
when
you
you
have
have
an
an
array
array
of
of
objects.
objects
Just
just
do
do
console
console
table
table
with
with
the
the
array.
array
I
i
could
could
probably
probably
do
do
a
a
whole
whole
video
video
on
on
console
console
logging,
logging
so
so
I'll
i'll
just
just
show
show
you
you
a
a
couple
couple
more
more
things
things
here.
here
If
if
you're
you're
benchmarking
benchmarking
performance,
performance
you
you
can
can
actually
actually
keep
keep
track
track
of
of
time
time
in
in
the
the
console.
console
We'll
we'll
first
first
define
define
our
our
timer
timer
and
and
we'll
we'll
give
give
it
it
a
a
name
name
of
of
looper.
looper
Then
then
we'll
we'll
set
set
up
up
a
a
while
while
loop
loop
and
and
we'll
we'll
go
go
through
through
a
a
1000000
1000000
iterations
iterations
in
in
that
that
loop.
loop
When
when
that's
that's
done,
done
we'll
we'll
run
run
console
console
time
time
end.
end
As
as
you
you
can
can
see
see
here,
here
it
it
takes
takes
an
an
average
average
about
about
4
4
to
to
5
5
milliseconds
milliseconds
to
to
loop
loop
a
a
1000000
1000000
times.
times
Keeping
keeping
track
track
of
of
time
time
is
is
great,
great
but
but
what
what
if
if
you
you
need
need
to
to
know
know
where
where
a
a
console
console
log
log
originated
originated
Let's
let's
imagine
imagine
we
we
have
have
a
a
really
really
important
important
function
function
that
that
deletes
deletes
items
items
from
from
our
our
database,
database
and
and
we
we
wanna
wanna
make
make
sure
sure
that
that
we
we
don't
don't
accidentally
accidentally
call
call
this
this
method
method
twice.
twice
You
you
can
can
add
add
a
a
console
console
trace
trace
to
to
your
your
function,
function
and
and
it
it
will
will
give
give
you
you
a
a
stack
stack
trace
trace
for
for
where
where
it
it
was
was
called
called
and
and
what
what
defined
defined
it.
it
If
if
we
we
run
run
this
this
code,
code
we'll
we'll
get
get
a
a
console
console
log
log
that
that
tells
tells
us
us
the
the
function
function
was
was
defined
defined
on
on
line
line
35
35
and
and
then
then
called
called
on
on
lines
lines
3738.
3738
So
so
now
now
that
that
you're
you're
a
a
debugging
debugging
expert,
expert
I'm
i'm
gonna
gonna
show
show
you
you
a
a
few
few
different
different
ways
ways
you
you
can
can
make
make
your
your
code
code
as
as
concise
concise
and
and
efficient
efficient
as
as
possible.
possible
Let's
let's
imagine
imagine
we
we
have
have
an
an
object
object
with
with
some
some
animal
animal
data,
data
and
and
we
we
need
need
a
a
function
function
that
that
will
will
tell
tell
us
us
how
how
to
to
feed
feed
the
the
animal.
animal
This
this
is
is
just
just
a
a
function
function
that
that
returns
returns
a
a
string.
string
So
so
inside
inside
that
that
string,
string
we'll
we'll
interpolate
interpolate
a
a
few
few
values
values
from
from
that
that
object.
object
This
this
doesn't
doesn't
look
look
too
too
bad,
bad
but
but
you'll
you'll
notice
notice
that
that
we're
we're
repeating
repeating
the
the
word
word
animal
animal
over
over
and
and
over
over
again.
again
There's
there's
a
a
technique
technique
called
called
object
object
destructuring
destructuring
that
that
we
we
can
can
use
use
to
to
eliminate
eliminate
most
most
of
of
the
the
repetition
repetition
here.
here
If
if
we
we
have
have
a
a
function
function
that
that
takes
takes
an
an
object
object
but
but
we
we
only
only
need
need
to
to
use
use
a
a
handful
handful
of
of
its
its
properties,
properties
we
we
can
can
destructure
destructure
those
those
in
in
the
the
argument
argument
itself.
itself
We
we
just
just
wrap
wrap
it
it
in
in
brackets
brackets
and
and
then
then
pass
pass
in
in
the
the
names
names
of
of
the
the
object
object
properties
properties
that
that
we
we
wanna
wanna
use.
use
So
so
now
now
we
we
can
can
format
format
the
the
same
same
string,
string
but
but
we
we
never
never
actually
actually
have
have
to
to
use
use
the
the
word
word
animal
animal
directly.
directly
This
this
might
might
seem
seem
like
like
a
a
modest
modest
gain
gain
on
on
this
this
simple
simple
function,
function
but
but
when
when
you
you
have
have
a
a
big
big
object
object
with
with
a
a
lot
lot
of
of
properties,
properties
this
this
can
can
make
make
a
a
huge
huge
difference.
difference
And
and
I
i
completely
completely
understand
understand
that
that
some
some
people
people
don't
don't
like
like
that
that
bracket
bracket
syntax
syntax
in
in
the
the
object
object
argument,
argument
so
so
there's
there's
actually
actually
another
another
way
way
we
we
can
can
do
do
this
this
which
which
is
is
just
just
as
as
good.
good
This
this
time,
time
we
we
pass
pass
in
in
the
the
animal
animal
object
object
like
like
we
we
did
did
originally,
originally
but
but
then
then
we
we
set
set
up
up
a
a
variable
variable
that
that
has
has
the
the
names
names
of
of
the
the
properties
properties
in
in
that
that
object
object
set
set
equal
equal
to
to
the
the
object.
object
And
and
now
now
we
we
can
can
use
use
those
those
properties
properties
like
like
variables
variables
throughout
throughout
the
the
function.
function
And
and
this
this
tends
tends
to
to
be
be
the
the
better
better
way
way
to
to
go
go
if
if
you
you
have
have
multiple
multiple
objects
objects
to
to
destructure
destructure
in
in
a
a
single
single
function.
function
The
the
next
next
thing
thing
we'll
we'll
look
look
at
at
is
is
template
template
literals,
literals
which
which
we've
we've
already
already
been
been
using
using
in
in
the
the
code,
code
but
but
there's
there's
more
more
to
to
talk
talk
about
about
here.
here
When
when
I
i
first
first
started
started
programming
programming
10
10
years
years
ago,
ago
Jquery
jquery
was
was
the
the
cool
cool
thing
thing
in
in
JavaScript,
javascript
kind
kind
of
of
like
like
React
react
is
is
today.
today
But
but
unfortunately,
unfortunately
it
it
didn't
didn't
have
have
all
all
of
of
the
the
awesome
awesome
things
things
that
that
we
we
have
have
in
in
JavaScript
javascript
now.
now
For
for
example,
example
you
you
would
would
see
see
a
a
lot
lot
of
of
string
string
concatenation
concatenation
that
that
looks
looks
like
like
this,
this
where
where
you
you
have
have
a
a
variable
variable
plus
plus
a
a
string
string
and
and
you
you
have
have
to
to
manage
manage
the
the
spaces
spaces
in
in
between
between
plus
plus
an
an
expression
expression
plus
plus
a
a
whole
whole
bunch
bunch
of
of
other
other
stuff.
stuff
This
this
type
type
of
of
code
code
is
is
incredibly
incredibly
annoying
annoying
to
to
deal
deal
with,
with
but
but
template
template
literals
literals
in
in
modern
modern
JavaScript
javascript
solve
solve
this
this
problem
problem
completely.
completely
Instead
instead
of
of
concatenating
concatenating
values
values
together,
together
we
we
can
can
actually
actually
interpolate
interpolate
them
them
directly
directly
into
into
the
the
string.
string
You
you
can
can
do
do
this
this
by
by
defining
defining
your
your
string
string
with
with
backticks
backticks
and
and
then
then
use
use
dollar
dollar
sign
sign
brackets
brackets
and
and
then
then
whatever
whatever
variable
variable
or
or
expression
expression
you
you
want
want
inside
inside
of
of
there.
there
So
so
we'll
we'll
go
go
ahead
ahead
and
and
grab
grab
the
the
properties
properties
we
we
need
need
with
with
object
object
structuring
structuring
that
that
we
we
learned
learned
just
just
a
a
minute
minute
ago,
ago
and
and
then
then
we'll
we'll
interpolate
interpolate
those
those
into
into
the
the
string
string
itself,
itself
which
which
is
is
a
a
lot
lot
more
more
readable
readable
and
and
a
a
lot
lot
easier
easier
to
to
maintain.
maintain
But
but
you
you
can
can
actually
actually
take
take
things
things
a
a
step
step
further
further
and
and
build
build
strings
strings
in
in
a
a
purely
purely
functional
functional
way.
way
So
so
we'll
we'll
write
write
a
a
function
function
here
here
called
called
horse
horse
age
age
that
that
takes
takes
an
an
array
array
of
of
strings
strings
as
as
the
the
first
first
argument
argument
and
and
then
then
you
you
can
can
take
take
whatever
whatever
other
other
arguments
arguments
it
it
wants
wants
after
after
that.
that
We
we
can
can
look
look
at
at
the
the
arguments
arguments
to
to
this
this
function
function
and
and
use
use
them
them
to
to
compose
compose
a
a
string.
string
So
so
here
here
we're
we're
gonna
gonna
look
look
at
at
the
the
age
age
of
of
the
the
animal.
animal
If
if
it's
it's
older
older
than
than
5,
5
we'll
we'll
say
say
it's
it's
old.
old
Otherwise,
otherwise
we'll
we'll
say
say
it's
it's
young.
young
And
and
the
the
last
last
thing
thing
we'll
we'll
do
do
is
is
return
return
the
the
actual
actual
value
value
of
of
the
the
string.
string
That's
that's
a
a
pretty
pretty
standard
standard
looking
looking
function.
function
But
but
the
the
interesting
interesting
thing
thing
here
here
is
is
that
that
instead
instead
of
of
passing
passing
a
a
regular
regular
argument
argument
to
to
this
this
function,
function
we
we
can
can
actually
actually
just
just
attach
attach
it
it
to
to
a
a
template
template
literal,
literal
and
and
it
it
will
will
parse
parse
the
the
arguments
arguments
in
in
it.
it
This
this
might
might
seem
seem
kinda
kinda
weird
weird
at
at
first,
first
but
but
instead
instead
of
of
doing
doing
parentheses
parentheses
with
with
the
the
arguments,
arguments
we'll
we'll
just
just
attach
attach
our
our
template
template
literal,
literal
and
and
it
it
will
will
parse
parse
all
all
of
of
the
the
string
string
segments
segments
as
as
an
an
array
array
of
of
strings
strings
as
as
the
the
first
first
argument
argument
to
to
the
the
function
function
that
that
we
we
defined.
defined
Then
then
it
it
will
will
handle
handle
all
all
the
the
other
other
arguments
arguments
in
in
the
the
order
order
in
in
which
which
they
they
appear
appear
inside
inside
of
of
the
the
dollar
dollar
sign
sign
brackets.
brackets
In
in
other
other
words,
words
you
you
can
can
take
take
a
a
single
single
argument
argument
and
and
use
use
it
it
to
to
compose
compose
multiple
multiple
values
values
in
in
the
the
return
return
string.
string
This
this
can
can
be
be
a
a
very
very
powerful
powerful
concept
concept
for
for
templating,
templating
and
and
it's
it's
actually
actually
used
used
in
in
the
the
Polymer
polymer
project
project
now
now
via
via
a
a
library
library
called
called
lit
lit
html.
html
So
so
now
now
that
that
we
we
know
know
how
how
to
to
work
work
with
with
strings,
strings
we're
we're
going
going
to
to
move
move
on
on
to
to
the
the
spread
spread
syntax
syntax
to
to
work
work
with
with
objects
objects
and
and
arrays.
arrays
Let's
let's
imagine
imagine
we
we
have
have
one
one
object
object
for
for
a
a
Pokemon
pokemon
and
and
the
the
other
other
one
one
for
for
the
the
stats
stats
that
that
define
define
its
its
various
various
attributes.
attributes
Let's
let's
say
say
we
we
want
want
to
to
assign
assign
the
the
properties
properties
from
from
the
the
stats
stats
object
object
to
to
the
the
pikachu
pikachu
object.
object
One
one
way
way
to
to
do
do
that
that
is
is
to
to
just
just
redefine
redefine
them
them
1
1
by
by
1
1
on
on
the
the
original
original
Pikachu
pikachu
object.
object
For
for
1,
1
this
this
is
is
just
just
really
really
ugly
ugly
and
and
verbose,
verbose
But
but
we're
we're
also
also
mutating
mutating
the
the
original
original
object
object
when
when
we
we
most
most
likely
likely
want
want
to
to
create
create
a
a
new
new
immutable
immutable
object.
object
Because
because
let's
let's
say
say
that
that
our
our
Pokemon
pokemon
levels
levels
up
up
time,
time
we
we
want
want
to
to
represent
represent
each
each
level
level
up
up
as
as
its
its
own
own
object.
object
We
we
could
could
use
use
object
object
assign
assign
here
here
and
and
take
take
the
the
original
original
object
object
and
and
merge
merge
it
it
in
in
with
with
the
the
stats,
stats
And
and
this
this
will
will
merge
merge
them
them
together
together
from
from
left
left
to
to
right.
right
Or
or
if
if
we
we
just
just
wanted
wanted
to
to
update
update
a
a
single
single
property,
property
we
we
could
could
add
add
an
an
object
object
with
with
that
that
property
property
in
in
it.
it
This
this
isn't
isn't
too
too
bad,
bad
but
but
there's
there's
a
a
more
more
concise
concise
way
way
to
to
do
do
this
this
with
with
the
the
spread
spread
syntax.
syntax
By
by
creating
creating
a
a
new
new
object
object
and
and
placing
placing
our
our
existing
existing
objects
objects
in
in
it
it
with
with
3
3
dots
dots
in
in
front
front
of
of
them,
them
it
it
will
will
compose
compose
a
a
new
new
object
object
from
from
left
left
to
to
right.
right
So
so
the
the
properties
properties
farthest
farthest
to
to
the
the
right
right
will
will
have
have
the
the
priority.
priority
Again,
again
this
this
is
is
mostly
mostly
just
just
syntactic
syntactic
sugar,
sugar
and
and
it
it
just
just
makes
makes
your
your
code
code
more
more
readable
readable
and
and
easier
easier
to
to
maintain.
maintain
And
and
it's
it's
also
also
possible
possible
to
to
use
use
the
the
spread
spread
syntax
syntax
on
on
arrays.
arrays
So
so
let's
let's
imagine
imagine
we
we
have
have
an
an
array
array
of
of
strings,
strings
and
and
we
we
need
need
to
to
push
push
additional
additional
items
items
to
to
this
this
array.
array
The
the
old
old
school
school
way
way
to
to
do
do
this
this
would
would
be
be
to
to
just
just
push
push
new
new
items
items
to
to
the
the
array
array
1
1
by
by
1.
1
But
but
in
in
today's
today's
world,
world
we
we
can
can
reduce
reduce
these
these
three
three
lines
lines
of
of
code
code
to
to
just
just
1
1
by
by
defining
defining
an
an
array
array
with
with
the
the
new
new
items
items
and
and
then
then
the
the
spread
spread
syntax
syntax
on
on
the
the
original
original
array.
array
If
if
we
we
add
add
the
the
3
3
dots
dots
to
to
the
the
beginning,
beginning
then
then
it's
it's
the
the
equivalent
equivalent
of
of
doing
doing
an
an
Array
array
push
push
because
because
it
it
will
will
append
append
the
the
new
new
items
items
to
to
the
the
end
end
of
of
the
the
Array.
array
But
but
the
the
nice
nice
thing
thing
is
is
we
we
could
could
just
just
add
add
this
this
to
to
the
the
end
end
of
of
the
the
array,
array
and
and
then
then
we
we
have
have
the
the
equivalent
equivalent
of
of
array
array
shift.
shift
And
and
we
we
might
might
even
even
take
take
the
the
original
original
values
values
and
and
just
just
splice
splice
them
them
in
in
the
the
middle
middle
of
of
the
the
array,
array
giving
giving
us
us
even
even
more
more
flexibility.
flexibility
And
and
this
this
code
code
brings
brings
back
back
some
some
memories.
memories
You
you
see
see
this
this
little
little
trailing
trailing
comma
comma
here?
here
This
this
used
used
to
to
be
be
the
the
kind
kind
of
of
thing
thing
that
that
would
would
break
break
an
an
entire
entire
Java
java
program
program
and
and
be
be
really
really
difficult
difficult
to
to
figure
figure
out.
out
But
but
luckily
luckily
in
in
modern
modern
JavaScript,
javascript
it
it
just
just
works
works
and
and
it's
it's
actually
actually
kind
kind
of
of
considered
considered
a
a
good
good
practice
practice
because
because
you
you
can
can
reduce
reduce
the
the
number
number
of
of
lines
lines
that
that
change
change
when
when
you
you
do
do
git
git
commit.
commit
Now
now
it's
it's
time
time
to
to
move
move
on
on
to
to
loops.
loops
Let's
let's
imagine
imagine
we
we
have
have
an
an
array
array
of
of
numbers
numbers
here
here
that
that
represent
represent
the
the
order
order
totals
totals
that
that
we've
we've
had
had
throughout
throughout
the
the
day
day
in
in
our
our
app.
app
Now
now
let's
let's
say
say
we
we
need
need
to
to
compute
compute
some
some
values
values
based
based
on
on
this
this
array,
array
such
such
as
as
the
the
order
order
total.
total
Maybe
maybe
we
we
need
need
to
to
add
add
some
some
tax
tax
to
to
each
each
one
one
and
and
filter
filter
out
out
the
the
high
high
value
value
orders
orders
to
to
be
be
reviewed
reviewed
by
by
a
a
manager.
manager
One
one
option
option
is
is
to
to
just
just
use
use
a
a
classic
classic
for
for
loop
loop
like
like
you'll
you'll
find
find
in
in
pretty
pretty
much
much
every
every
programming
programming
language.
language
We
we
have
have
an
an
integer
integer
that
that
starts
starts
at
at
0.
0
While
while
that
that
integer
integer
is
is
less
less
than
than
the
the
order's
order's
length,
length
we
we
will
will
increment
increment
it
it
by
by
1.
1
Personally,
personally
I
i
hate
hate
loops
loops
look
look
like
like
this
this
and
and
I
i
almost
almost
never
never
use
use
them
them
in
in
JavaScript.
javascript
But
but
while
while
we're
we're
in
in
the
the
loop,
loop
we
we
can
can
start
start
computing
computing
our
our
values.
values
For
for
the
the
total,
total
we
we
will
will
just
just
do
do
plus
plus
equals
equals
with
with
the
the
order
order
total.
total
Then
then
to
to
create
create
a
a
new
new
array
array
with
with
the
the
tax
tax
added
added
to
to
it,
it
we'll
we'll
go
go
ahead
ahead
and
and
take
take
the
the
order
order
amount
amount
and
and
multiply
multiply
it
it
by
by
1.1
1.1
to
to
add
add
10%
10%
tax.
tax
Then
then
if
if
we
we
have
have
order
order
values
values
that
that
are
are
greater
greater
than
than
100,
100
we'll
we'll
go
go
ahead
ahead
and
and
add
add
those
those
to
to
the
the
high
high
value
value
order
order
array.
array
This
this
code
code
is,
is
a,
a
very
very
ugly,
ugly
and,
and
b,
b
it's
it's
mutating
mutating
values
values
That
that
might
might
make
make
our
our
code
code
a
a
little
little
more
more
unpredictable.
unpredictable
Luckily,
luckily
we
we
can
can
reduce
reduce
this
this
down
down
to
to
just
just
three
three
lines
lines
of
of
code
code
by
by
using
using
modern
modern
JavaScript
javascript
array
array
methods.
methods
If
if
we
we
want
want
to
to
take
take
an
an
array
array
and
and
then
then
have
have
it
it
accumulate
accumulate
to
to
a
a
value
value
that
that
equals,
equals
say,
say
a
a
total
total
amount,
amount
we
we
can
can
use
use
array
array
reduce.
reduce
It
it
takes
takes
a
a
callback
callback
function
function
as
as
the
the
argument
argument
where
where
the
the
first
first
argument
argument
is
is
the
the
accumulated
accumulated
value
value
and
and
the
the
second
second
argument
argument
is
is
the
the
current
current
value
value
in
in
the
the
loop.
loop
So
so
if
if
we
we
want
want
to
to
sum
sum
up
up
all
all
of
of
the
the
items
items
in
in
the
the
array,
array
we
we
can
can
just
just
do
do
the
the
accumulated
accumulated
values
values
plus
plus
the
the
current
current
value.
value
And
and
when
when
the
the
loop
loop
finishes,
finishes
that
that
will
will
give
give
us
us
the
the
total
total
of
of
all
all
elements
elements
in
in
that
that
array.
array
Mapping
mapping
and
and
filtering
filtering
values
values
is
is
even
even
easier.
easier
If
if
we
we
want
want
to
to
add
add
tax
tax
to
to
all
all
the
the
items
items
in
in
the
the
array,
array
we
we
can
can
just
just
take
take
the
the
values
values
in
in
the
the
array
array
Then
then
map
map
them
them
to
to
their
their
value
value
times
times
1.1.
1.1
And
and
lastly,
lastly
we
we
can
can
use
use
filter
filter
to
to
create
create
an
an
array
array
that
that
only
only
has
has
the
the
values
values
greater
greater
than
than
100
100
in
in
it.
it
Whenever
whenever
the
the
callback
callback
function
function
equals
equals
true,
true
it's
it's
going
going
to
to
allow
allow
value
value
through.
through
So
so
in
in
other
other
words,
words
if
if
the
the
value
value
is
is
greater
greater
than
than
100,
100
it
it
will
will
allow
allow
that
that
value
value
through
through
to
to
the
the
new
new
array.
array
I
i
wanted
wanted
to
to
save
save
the
the
best
best
for
for
last
last
and
and
that,
that
of
of
course,
course
is
is
asyncawait.
asyncawait
Let's
let's
create
create
a
a
method
method
called
called
random
random
that
that
returns
returns
a
a
Promise
promise
that
that
resolves
resolves
to
to
a
a
random
random
number
number
asynchronously.
asynchronously
Now
now
let's
let's
imagine
imagine
that
that
we
we
want
want
to
to
retrieve
retrieve
3
3
different
different
asynchronous
asynchronous
numbers,
numbers
one
one
after
after
the
the
other,
other
and
and
then
then
add
add
them
them
all
all
together
together
at
at
the
the
end.
end
That
that
might
might
seem
seem
like
like
a
a
silly
silly
example,
example
but
but
that's
that's
actually
actually
how
how
things
things
work
work
a
a
lot
lot
of
of
times
times
in
in
the
the
real
real
world
world
when
when
you
you
have
have
to
to
retrieve
retrieve
one
one
item
item
from
from
the
the
database,
database
get
get
some
some
data,
data
retrieve
retrieve
another
another
item
item
from
from
an
an
API,
api
and
and
so
so
on.
on
With
with
promises,
promises
you
you
wait
wait
for
for
an
an
asynchronous
asynchronous
value
value
to
to
resolve,
resolve
and
and
then
then
you
you
handle
handle
it
it
with
with
a
a
callback
callback
function
function
inside
inside
of
of
ben.
ben
Once
once
you
you
have
have
your
your
data,
data
you
you
can
can
return
return
another
another
Promise
promise
and
and
then
then
chain
chain
another
another
then
then
callback
callback
to
to
it
it
and
and
continue
continue
this
this
pattern
pattern
on
on
for
for
as
as
long
long
as
as
you
you
need
need
to.
to
You
you
end
end
up
up
with
with
this
this
ridiculous
ridiculous
looking
looking
code
code
where
where
you
you
keep
keep
saying
saying
and
and
then
then
and
and
then
then
and
and
then.
then
And.
and
And
and
then.
then
No.
no
And
and
then.
then
No.
no
And
and
then.
then
No.
no
And
and
then.
then
No.
no
And
and
then.
then
No.
no
And
and
then.
then
No.
no
And
and
then.
then
But
but
fortunately,
fortunately
there's
there's
a
a
really
really
nice
nice
solution
solution
to
to
this,
this
which
which
is
is
async
async
await.
await
Basically,
basically
it
it
allows
allows
us
us
to
to
express
express
asynchronous
asynchronous
code
code
in
in
a
a
synchronous
synchronous
format.
format
We
we
can
can
come
come
down
down
here
here
and
and
rewrite
rewrite
our
our
Promise
promise
chain.
chain
The
the
only
only
difference
difference
is
is
adding
adding
async
async
in
in
front
front
of
of
the
the
function
function
which
which
will
will
force
force
it
it
to
to
turn
turn
a
a
Promise.
promise
But
but
the
the
real
real
benefit
benefit
here
here
is
is
that
that
we
we
can
can
use
use
a
a
wait
wait
in
in
front
front
of
of
our
our
Promises
promises
and
and
have
have
them
them
resolve
resolve
to
to
an
an
actual
actual
variable
variable
value.
value
So
so
instead
instead
of
of
using
using
those
those
then
then
callbacks,
callbacks
we
we
can
can
just
just
say
say
const
const
first
first
equals
equals
await
await
random
random
and
and
do
do
the
the
same
same
thing
thing
for
for
the
the
second
second
and
and
3rd
3rd
number.
number
And
and
now
now
it's
it's
much
much
easier
easier
to
to
read
read
and
and
understand
understand
this
this
code
code
because
because
we
we
can
can
just
just
go
go
line
line
by
by
line
line
and
and
see
see
that
that
we're
we're
awaiting
awaiting
one
one
number,
number
awaiting
awaiting
another
another
number,
number
and
and
so
so
on.
on
Async
async
await
await
is
is
one
one
of
of
the
the
most
most
awesome
awesome
things
things
to
to
ever
ever
happen
happen
to
to
JavaScript
javascript
and
and
it
it
really
really
deserves
deserves
its
its
own
own
video.
video
Right
right
now,
now
we're
we're
out
out
of
of
time,
time
but
but
in
in
the
the
future,
future
I'll
i'll
show
show
you
you
some
some
of
of
the
the
cool
cool
things
things
you
you
can
can
do
do
with
with
it,
it
like
like
use
use
it
it
in
in
conditional
conditional
statements
statements
or
or
use
use
it
it
in
in
for
for
loops
loops
and
and
things
things
Like
like
that.
that
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
wrap
wrap
things
things
up
up
there.
there
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
subscribe,
subscribe
and
and
make
make
sure
sure
to
to
check
check
out
out
the
the
live
live
stream
stream
next
next
week
week
to
to
see
see
if
if
you
you
won
won
some
some
free
free
swag.
swag
And
and
if
if
you're
you're
serious
serious
about
about
building
building
apps,
apps
Consider
consider
becoming
becoming
a
a
pro
pro
member
member
at
at
angularfirebase.com.
angularfirebase.com
You'll
you'll
get
get
all
all
kinds
kinds
of
of
exclusive
exclusive
content
content
designed
designed
to
to
help
help
you
you
build
build
and
and
ship
ship
your
your
app
app
faster.
faster
Thanks
thanks
for
for
watching,
watching
and
and
I'll
i'll
talk
talk
to
to
you
you
soon.
soon
success
The speakers discuss how to write good JavaScript with modern features and avoid bad JavaScript. They demonstrate how to debug and console logging, use variables, and create a template delete method. They also discuss the use of loop, async await, and the potential for creating new objects and array variables. The speakers emphasize the benefits of rewriting objects and merging them together, as well as the use of templates and async await. Viewers are encouraged to check out their videos for more tips.
JavaScript Pro Tips - Code This, NOT That
JavaScript is a programming language that people love to hate. A long time ago, developers used to pride themselves on being back end developers because it was More challenging and complex. JavaScript was just a toy for annoying people on websites. If I'm gonna kick you up. But it's 20 teen. And today, we have tools like the Cloud, Docker, and many APIs that abstract away the complexity of back end development. If you're starting up a company today, there's a chance you'll do the majority of your development on the front end with JavaScript. So today, I wanna show you how to write good JavaScript with modern features and avoid bad JavaScript. If you're just finding me, like, and subscribe. And if you have your own JavaScript pro tips, let me know in the comments. One lucky comment will win this one of a kind t shirt via livestream next week. Never gonna let you down. So the first thing you need to know is how to debug your JavaScript like a pro, and the way we do that, of course, is by console logging And I'm saying that with a straight face. There are good ways to console log and bad ways. Let's imagine we have 3 different objects, each one assigned to its own variable. The obvious way to log these is just one after the other, but the main problem is we don't know the name of the variable when this gets logged. But there's a trick we can here called computed property names where we add the variables to an object. Not only does this reduce the code footprint, but it also tells us exactly which variable define this data. One line of code, one console log, and all the information we need. But maybe this data is extra important, so we want to make it stand out with some custom CSS styling. You can substitute data and also CSS styles by using a percent sign. So we'll add percent c and then have the second argument be our actual CSS Style. And now we get this bold orange color in the console. One thing you might have noticed is that the objects all share common properties. So maybe we could display those as a table. This is really useful when you have an array of objects. Just do console table with the array. I could probably do a whole video on console logging, so I'll just show you a couple more things here. If you're benchmarking performance, you can actually keep track of time in the console. We'll first define our timer and we'll give it a name of looper. Then we'll set up a while loop and we'll go through a 1000000 iterations in that loop. When that's done, we'll run console time end. As you can see here, it takes an average about 4 to 5 milliseconds to loop a 1000000 times. Keeping track of time is great, but what if you need to know where a console log originated Let's imagine we have a really important function that deletes items from our database, and we wanna make sure that we don't accidentally call this method twice. You can add a console trace to your function, and it will give you a stack trace for where it was called and what defined it. If we run this code, we'll get a console log that tells us the function was defined on line 35 and then called on lines 3738. So now that you're a debugging expert, I'm gonna show you a few different ways you can make your code as concise and efficient as possible. Let's imagine we have an object with some animal data, and we need a function that will tell us how to feed the animal. This is just a function that returns a string. So inside that string, we'll interpolate a few values from that object. This doesn't look too bad, but you'll notice that we're repeating the word animal over and over again. There's a technique called object destructuring that we can use to eliminate most of the repetition here. If we have a function that takes an object but we only need to use a handful of its properties, we can destructure those in the argument itself. We just wrap it in brackets and then pass in the names of the object properties that we wanna use. So now we can format the same string, but we never actually have to use the word animal directly. This might seem like a modest gain on this simple function, but when you have a big object with a lot of properties, this can make a huge difference. And I completely understand that some people don't like that bracket syntax in the object argument, so there's actually another way we can do this which is just as good. This time, we pass in the animal object like we did originally, but then we set up a variable that has the names of the properties in that object set equal to the object. And now we can use those properties like variables throughout the function. And this tends to be the better way to go if you have multiple objects to destructure in a single function. The next thing we'll look at is template literals, which we've already been using in the code, but there's more to talk about here. When I first started programming 10 years ago, Jquery was the cool thing in JavaScript, kind of like React is today. But unfortunately, it didn't have all of the awesome things that we have in JavaScript now. For example, you would see a lot of string concatenation that looks like this, where you have a variable plus a string and you have to manage the spaces in between plus an expression plus a whole bunch of other stuff. This type of code is incredibly annoying to deal with, but template literals in modern JavaScript solve this problem completely. Instead of concatenating values together, we can actually interpolate them directly into the string. You can do this by defining your string with backticks and then use dollar sign brackets and then whatever variable or expression you want inside of there. So we'll go ahead and grab the properties we need with object structuring that we learned just a minute ago, and then we'll interpolate those into the string itself, which is a lot more readable and a lot easier to maintain. But you can actually take things a step further and build strings in a purely functional way. So we'll write a function here called horse age that takes an array of strings as the first argument and then you can take whatever other arguments it wants after that. We can look at the arguments to this function and use them to compose a string. So here we're gonna look at the age of the animal. If it's older than 5, we'll say it's old. Otherwise, we'll say it's young. And the last thing we'll do is return the actual value of the string. That's a pretty standard looking function. But the interesting thing here is that instead of passing a regular argument to this function, we can actually just attach it to a template literal, and it will parse the arguments in it. This might seem kinda weird at first, but instead of doing parentheses with the arguments, we'll just attach our template literal, and it will parse all of the string segments as an array of strings as the first argument to the function that we defined. Then it will handle all the other arguments in the order in which they appear inside of the dollar sign brackets. In other words, you can take a single argument and use it to compose multiple values in the return string. This can be a very powerful concept for templating, and it's actually used in the Polymer project now via a library called lit html. So now that we know how to work with strings, we're going to move on to the spread syntax to work with objects and arrays. Let's imagine we have one object for a Pokemon and the other one for the stats that define its various attributes. Let's say we want to assign the properties from the stats object to the pikachu object. One way to do that is to just redefine them 1 by 1 on the original Pikachu object. For 1, this is just really ugly and verbose, But we're also mutating the original object when we most likely want to create a new immutable object. Because let's say that our Pokemon levels up time, we want to represent each level up as its own object. We could use object assign here and take the original object and merge it in with the stats, And this will merge them together from left to right. Or if we just wanted to update a single property, we could add an object with that property in it. This isn't too bad, but there's a more concise way to do this with the spread syntax. By creating a new object and placing our existing objects in it with 3 dots in front of them, it will compose a new object from left to right. So the properties farthest to the right will have the priority. Again, this is mostly just syntactic sugar, and it just makes your code more readable and easier to maintain. And it's also possible to use the spread syntax on arrays. So let's imagine we have an array of strings, and we need to push additional items to this array. The old school way to do this would be to just push new items to the array 1 by 1. But in today's world, we can reduce these three lines of code to just 1 by defining an array with the new items and then the spread syntax on the original array. If we add the 3 dots to the beginning, then it's the equivalent of doing an Array push because it will append the new items to the end of the Array. But the nice thing is we could just add this to the end of the array, and then we have the equivalent of array shift. And we might even take the original values and just splice them in the middle of the array, giving us even more flexibility. And this code brings back some memories. You see this little trailing comma here? This used to be the kind of thing that would break an entire Java program and be really difficult to figure out. But luckily in modern JavaScript, it just works and it's actually kind of considered a good practice because you can reduce the number of lines that change when you do git commit. Now it's time to move on to loops. Let's imagine we have an array of numbers here that represent the order totals that we've had throughout the day in our app. Now let's say we need to compute some values based on this array, such as the order total. Maybe we need to add some tax to each one and filter out the high value orders to be reviewed by a manager. One option is to just use a classic for loop like you'll find in pretty much every programming language. We have an integer that starts at 0. While that integer is less than the order's length, we will increment it by 1. Personally, I hate loops look like this and I almost never use them in JavaScript. But while we're in the loop, we can start computing our values. For the total, we will just do plus equals with the order total. Then to create a new array with the tax added to it, we'll go ahead and take the order amount and multiply it by 1.1 to add 10% tax. Then if we have order values that are greater than 100, we'll go ahead and add those to the high value order array. This code is, a, very ugly, and, b, it's mutating values That might make our code a little more unpredictable. Luckily, we can reduce this down to just three lines of code by using modern JavaScript array methods. If we want to take an array and then have it accumulate to a value that equals, say, a total amount, we can use array reduce. It takes a callback function as the argument where the first argument is the accumulated value and the second argument is the current value in the loop. So if we want to sum up all of the items in the array, we can just do the accumulated values plus the current value. And when the loop finishes, that will give us the total of all elements in that array. Mapping and filtering values is even easier. If we want to add tax to all the items in the array, we can just take the values in the array Then map them to their value times 1.1. And lastly, we can use filter to create an array that only has the values greater than 100 in it. Whenever the callback function equals true, it's going to allow value through. So in other words, if the value is greater than 100, it will allow that value through to the new array. I wanted to save the best for last and that, of course, is asyncawait. Let's create a method called random that returns a Promise that resolves to a random number asynchronously. Now let's imagine that we want to retrieve 3 different asynchronous numbers, one after the other, and then add them all together at the end. That might seem like a silly example, but that's actually how things work a lot of times in the real world when you have to retrieve one item from the database, get some data, retrieve another item from an API, and so on. With promises, you wait for an asynchronous value to resolve, and then you handle it with a callback function inside of ben. Once you have your data, you can return another Promise and then chain another then callback to it and continue this pattern on for as long as you need to. You end up with this ridiculous looking code where you keep saying and then and then and then. And. And then. No. And then. No. And then. No. And then. No. And then. No. And then. No. And then. But fortunately, there's a really nice solution to this, which is async await. Basically, it allows us to express asynchronous code in a synchronous format. We can come down here and rewrite our Promise chain. The only difference is adding async in front of the function which will force it to turn a Promise. But the real benefit here is that we can use a wait in front of our Promises and have them resolve to an actual variable value. So instead of using those then callbacks, we can just say const first equals await random and do the same thing for the second and 3rd number. And now it's much easier to read and understand this code because we can just go line by line and see that we're awaiting one number, awaiting another number, and so on. Async await is one of the most awesome things to ever happen to JavaScript and it really deserves its own video. Right now, we're out of time, but in the future, I'll show you some of the cool things you can do with it, like use it in conditional statements or use it in for loops and things Like that. 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 live stream next week to see if you won some free swag. And if you're serious about building apps, Consider becoming a pro member at angularfirebase.com. You'll get all kinds of exclusive content designed to help you build and ship your app faster. Thanks for watching, and I'll talk to you soon.
The speakers discuss how to write good JavaScript with modern features and avoid bad JavaScript. They demonstrate how to debug and console logging, use variables, and create a template delete method. They also discuss the use of loop, async await, and the potential for creating new objects and array variables. The speakers emphasize the benefits of rewriting objects and merging them together, as well as the use of templates and async await. Viewers are encouraged to check out their videos for more tips.

        [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 : JavaScript Pro Tips - Code This, NOT That 
        and a small summary : The speakers discuss how to write good JavaScript with modern features and avoid bad JavaScript. They demonstrate how to debug and console logging, use variables, and create a template delete method. They also discuss the use of loop, async await, and the potential for creating new objects and array variables. The speakers emphasize the benefits of rewriting objects and merging them together, as well as the use of templates and async await. Viewers are encouraged to check out their videos for more tips.
        [/INST]
        
        Generate the video : JavaScript is a programming language that people love to hate. A long time ago, developers used to pride themselves on being back end developers because it was More challenging and complex. JavaScript was just a toy for annoying people on websites. If I'm gonna kick you up. But it's 20 teen. And today, we have tools like the Cloud, Docker, and many APIs that abstract away the complexity of back end development. If you're starting up a company today, there's a chance you'll do the majority of your development on the front end with JavaScript. So today, I wanna show you how to write good JavaScript with modern features and avoid bad JavaScript. If you're just finding me, like, and subscribe. And if you have your own JavaScript pro tips, let me know in the comments. One lucky comment will win this one of a kind t shirt via livestream next week. Never gonna let you down. So the first thing you need to know is how to debug your JavaScript like a pro, and the way we do that, of course, is by console logging And I'm saying that with a straight face. There are good ways to console log and bad ways. Let's imagine we have 3 different objects, each one assigned to its own variable. The obvious way to log these is just one after the other, but the main problem is we don't know the name of the variable when this gets logged. But there's a trick we can here called computed property names where we add the variables to an object. Not only does this reduce the code footprint, but it also tells us exactly which variable define this data. One line of code, one console log, and all the information we need. But maybe this data is extra important, so we want to make it stand out with some custom CSS styling. You can substitute data and also CSS styles by using a percent sign. So we'll add percent c and then have the second argument be our actual CSS Style. And now we get this bold orange color in the console. One thing you might have noticed is that the objects all share common properties. So maybe we could display those as a table. This is really useful when you have an array of objects. Just do console table with the array. I could probably do a whole video on console logging, so I'll just show you a couple more things here. If you're benchmarking performance, you can actually keep track of time in the console. We'll first define our timer and we'll give it a name of looper. Then we'll set up a while loop and we'll go through a 1000000 iterations in that loop. When that's done, we'll run console time end. As you can see here, it takes an average about 4 to 5 milliseconds to loop a 1000000 times. Keeping track of time is great, but what if you need to know where a console log originated Let's imagine we have a really important function that deletes items from our database, and we wanna make sure that we don't accidentally call this method twice. You can add a console trace to your function, and it will give you a stack trace for where it was called and what defined it. If we run this code, we'll get a console log that tells us the function was defined on line 35 and then called on lines 3738. So now that you're a debugging expert, I'm gonna show you a few different ways you can make your code as concise and efficient as possible. Let's imagine we have an object with some animal data, and we need a function that will tell us how to feed the animal. This is just a function that returns a string. So inside that string, we'll interpolate a few values from that object. This doesn't look too bad, but you'll notice that we're repeating the word animal over and over again. There's a technique called object destructuring that we can use to eliminate most of the repetition here. If we have a function that takes an object but we only need to use a handful of its properties, we can destructure those in the argument itself. We just wrap it in brackets and then pass in the names of the object properties that we wanna use. So now we can format the same string, but we never actually have to use the word animal directly. This might seem like a modest gain on this simple function, but when you have a big object with a lot of properties, this can make a huge difference. And I completely understand that some people don't like that bracket syntax in the object argument, so there's actually another way we can do this which is just as good. This time, we pass in the animal object like we did originally, but then we set up a variable that has the names of the properties in that object set equal to the object. And now we can use those properties like variables throughout the function. And this tends to be the better way to go if you have multiple objects to destructure in a single function. The next thing we'll look at is template literals, which we've already been using in the code, but there's more to talk about here. When I first started programming 10 years ago, Jquery was the cool thing in JavaScript, kind of like React is today. But unfortunately, it didn't have all of the awesome things that we have in JavaScript now. For example, you would see a lot of string concatenation that looks like this, where you have a variable plus a string and you have to manage the spaces in between plus an expression plus a whole bunch of other stuff. This type of code is incredibly annoying to deal with, but template literals in modern JavaScript solve this problem completely. Instead of concatenating values together, we can actually interpolate them directly into the string. You can do this by defining your string with backticks and then use dollar sign brackets and then whatever variable or expression you want inside of there. So we'll go ahead and grab the properties we need with object structuring that we learned just a minute ago, and then we'll interpolate those into the string itself, which is a lot more readable and a lot easier to maintain. But you can actually take things a step further and build strings in a purely functional way. So we'll write a function here called horse age that takes an array of strings as the first argument and then you can take whatever other arguments it wants after that. We can look at the arguments to this function and use them to compose a string. So here we're gonna look at the age of the animal. If it's older than 5, we'll say it's old. Otherwise, we'll say it's young. And the last thing we'll do is return the actual value of the string. That's a pretty standard looking function. But the interesting thing here is that instead of passing a regular argument to this function, we can actually just attach it to a template literal, and it will parse the arguments in it. This might seem kinda weird at first, but instead of doing parentheses with the arguments, we'll just attach our template literal, and it will parse all of the string segments as an array of strings as the first argument to the function that we defined. Then it will handle all the other arguments in the order in which they appear inside of the dollar sign brackets. In other words, you can take a single argument and use it to compose multiple values in the return string. This can be a very powerful concept for templating, and it's actually used in the Polymer project now via a library called lit html. So now that we know how to work with strings, we're going to move on to the spread syntax to work with objects and arrays. Let's imagine we have one object for a Pokemon and the other one for the stats that define its various attributes. Let's say we want to assign the properties from the stats object to the pikachu object. One way to do that is to just redefine them 1 by 1 on the original Pikachu object. For 1, this is just really ugly and verbose, But we're also mutating the original object when we most likely want to create a new immutable object. Because let's say that our Pokemon levels up time, we want to represent each level up as its own object. We could use object assign here and take the original object and merge it in with the stats, And this will merge them together from left to right. Or if we just wanted to update a single property, we could add an object with that property in it. This isn't too bad, but there's a more concise way to do this with the spread syntax. By creating a new object and placing our existing objects in it with 3 dots in front of them, it will compose a new object from left to right. So the properties farthest to the right will have the priority. Again, this is mostly just syntactic sugar, and it just makes your code more readable and easier to maintain. And it's also possible to use the spread syntax on arrays. So let's imagine we have an array of strings, and we need to push additional items to this array. The old school way to do this would be to just push new items to the array 1 by 1. But in today's world, we can reduce these three lines of code to just 1 by defining an array with the new items and then the spread syntax on the original array. If we add the 3 dots to the beginning, then it's the equivalent of doing an Array push because it will append the new items to the end of the Array. But the nice thing is we could just add this to the end of the array, and then we have the equivalent of array shift. And we might even take the original values and just splice them in the middle of the array, giving us even more flexibility. And this code brings back some memories. You see this little trailing comma here? This used to be the kind of thing that would break an entire Java program and be really difficult to figure out. But luckily in modern JavaScript, it just works and it's actually kind of considered a good practice because you can reduce the number of lines that change when you do git commit. Now it's time to move on to loops. Let's imagine we have an array of numbers here that represent the order totals that we've had throughout the day in our app. Now let's say we need to compute some values based on this array, such as the order total. Maybe we need to add some tax to each one and filter out the high value orders to be reviewed by a manager. One option is to just use a classic for loop like you'll find in pretty much every programming language. We have an integer that starts at 0. While that integer is less than the order's length, we will increment it by 1. Personally, I hate loops look like this and I almost never use them in JavaScript. But while we're in the loop, we can start computing our values. For the total, we will just do plus equals with the order total. Then to create a new array with the tax added to it, we'll go ahead and take the order amount and multiply it by 1.1 to add 10% tax. Then if we have order values that are greater than 100, we'll go ahead and add those to the high value order array. This code is, a, very ugly, and, b, it's mutating values That might make our code a little more unpredictable. Luckily, we can reduce this down to just three lines of code by using modern JavaScript array methods. If we want to take an array and then have it accumulate to a value that equals, say, a total amount, we can use array reduce. It takes a callback function as the argument where the first argument is the accumulated value and the second argument is the current value in the loop. So if we want to sum up all of the items in the array, we can just do the accumulated values plus the current value. And when the loop finishes, that will give us the total of all elements in that array. Mapping and filtering values is even easier. If we want to add tax to all the items in the array, we can just take the values in the array Then map them to their value times 1.1. And lastly, we can use filter to create an array that only has the values greater than 100 in it. Whenever the callback function equals true, it's going to allow value through. So in other words, if the value is greater than 100, it will allow that value through to the new array. I wanted to save the best for last and that, of course, is asyncawait. Let's create a method called random that returns a Promise that resolves to a random number asynchronously. Now let's imagine that we want to retrieve 3 different asynchronous numbers, one after the other, and then add them all together at the end. That might seem like a silly example, but that's actually how things work a lot of times in the real world when you have to retrieve one item from the database, get some data, retrieve another item from an API, and so on. With promises, you wait for an asynchronous value to resolve, and then you handle it with a callback function inside of ben. Once you have your data, you can return another Promise and then chain another then callback to it and continue this pattern on for as long as you need to. You end up with this ridiculous looking code where you keep saying and then and then and then. And. And then. No. And then. No. And then. No. And then. No. And then. No. And then. No. And then. But fortunately, there's a really nice solution to this, which is async await. Basically, it allows us to express asynchronous code in a synchronous format. We can come down here and rewrite our Promise chain. The only difference is adding async in front of the function which will force it to turn a Promise. But the real benefit here is that we can use a wait in front of our Promises and have them resolve to an actual variable value. So instead of using those then callbacks, we can just say const first equals await random and do the same thing for the second and 3rd number. And now it's much easier to read and understand this code because we can just go line by line and see that we're awaiting one number, awaiting another number, and so on. Async await is one of the most awesome things to ever happen to JavaScript and it really deserves its own video. Right now, we're out of time, but in the future, I'll show you some of the cool things you can do with it, like use it in conditional statements or use it in for loops and things Like that. 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 live stream next week to see if you won some free swag. And if you're serious about building apps, Consider becoming a pro member at angularfirebase.com. You'll get all kinds of exclusive content designed to help you build and ship your app faster. Thanks for watching, and I'll talk to you soon.
        