JavaScript Pro Tips - Code This, NOT That
Fireship
youtube· 12:25standard
1.Introduction to Modern JavaScript
0:00 / 0:50The video introduces JavaScript's evolution from a toy language to a critical tool for modern development. It explains why learning good JavaScript practices matters today and sets up the agenda for covering modern features and best practices.
- JavaScript
- Modern Features
Transcript (374 segments)
0:00[Music]
0:07javascript is a programming language
0:09that people love to hate a long time ago
0:11developers used to pride themselves on
0:13being back in developers because it was
0:15more challenging and complex javascript
0:17was just a toy for annoying people on
0:19websites but it's 2019 and today we have
0:24tools like the cloud docker and many API
0:26is that abstract way the complexity of
0:28back-end development if you're starting
0:30up a company today there's a good chance
0:31you'll do the majority of your
0:32development on the front end with
0:34JavaScript so today I want to show you
0:36how to write good JavaScript with modern
0:37features and avoid bad JavaScript if
0:40you're just finding me like and
0:41subscribe and if you have your own
0:42JavaScript pro tips let me know in the
0:44comments one lucky comment will win this
0:46one-of-a-kind t-shirt via livestream
0:47next week
0:50so the first thing you need to know is
0:52how to debug your JavaScript like a pro
0:54and the way we do that of course is by
0:56console logging stuff and I'm saying
0:58that with a straight face there are good
1:00ways to console log and bad ways let's
1:02imagine we have three different objects
1:03each one assigned to its own variable
1:05the obvious way to log these is just one
1:07after the other but the main problem is
1:09we don't know the name of the variable
1:10when this gets logged but there's a
1:12trick we can use here called computed
1:13property names where we add the
1:15variables to an object not only does
1:17this reduce the code footprint but it
1:18also tells us exactly which variable
1:20define this data one line of code one
1:22console log and all the information we
1:24need but maybe this data is extra
1:26important so we want to make it stand
1:27out with some custom CSS styling you can
1:30substitute data and also CSS styles by
1:32using a percent sign so we'll add
1:34percent C and then have the second
1:35argument be our actual CSS style and now
1:38we get this bold orange color in the
1:40console one thing you might have noticed
1:41is that the objects all share common
1:43properties so maybe we could display
1:45those as a table this is really useful
1:47when you have an array of objects just
1:49do console table with the array I could
1:51probably do a whole video on console
1:53logging so I'll just show you a couple
1:54more things here if you're benchmarking
1:56performance you can actually keep track
1:57of time in the console will first define
2:00our timer and we'll give it a name of
2:01looper then we'll set up a while loop
2:03and we'll go through a million
2:05iterations in that loop when that's done
2:07we'll run console time and as you can
2:09see here it takes an average of about 4
2:11to 5 milliseconds to loop a million
2:13times
2:14keeping track of time is great but what
2:15if you need to know where a console.log
2:17originated from let's imagine we have a
2:19really important function that deletes
2:21items from our database and we want to
2:22make sure that we don't accidentally
2:24call this method twice you can add a
2:26console trace to your function and it
2:28will give you a stack trace for where it
2:29was called and what defined it if we run
2:32this code we'll get a console log that
2:33tells us the function was defined on
2:35line 35 and then called on lines 37 and
2:3838 so now that you're a debugging expert
2:41I'm going to show you a few different
2:42ways you can make your code as concise
2:44and efficient as possible let's imagine
2:46we have an object with some animal data
2:48and we need a function that will tell us
2:50how to feed the animal this is just a
2:53function that returns a string so inside
2:55that string will interpolate a few
2:56values from that object this doesn't
2:59look too bad but you'll notice that
3:00we're repeating the word animal over and
3:02over again there's a technique called
3:04object D structuring that we can use to
3:06eliminate most of the repetition here if
3:09we have a function that takes an object
3:10but we only need to use a handful of its
3:12properties we can D structure those in
3:14the argument itself we just wrap it in
3:17brackets and then pass in the names of
3:19the object properties that we want to
3:20use so now we can format the same string
3:23but we never actually have to use the
3:25word animal directly this might seem
3:27like a modest gain on this simple
3:29function but when you have a big object
3:31with a lot of properties this can make a
3:32huge difference and I completely
3:34understand that some people don't like
3:36that bracket syntax in the object
3:38argument so there's actually another way
3:39we can do this which is just as good
3:41this time we pass in the animal object
3:43like we did originally but then we set
3:45up a variable that has the names of the
3:47properties in that object set equal to
3:49the object and now we can use those
3:51properties like variables throughout the
3:53function and this tends to be the better
3:54way to go if you have multiple objects
3:562d structure and a single function the
3:59next thing we'll look at is template
4:00literals which we've already been using
4:02in the code but there's more to talk
4:04about here when I first started
4:05programming about 10 years ago
4:06jQuery was the cool thing in JavaScript
4:08kind of like react is today but
4:11unfortunately it didn't have all of the
4:12awesome things that we have in
4:13JavaScript now for example you would see
4:16a lot of string concatenation that looks
4:18like this where you have a variable plus
4:20a string and you have to manage the
4:22spaces in between plus an expression
4:24plus a whole bunch of other stuff this
4:26type of code is
4:27incredibly annoying to deal with but
4:29template literals in modern JavaScript
4:30solve this problem completely
4:32instead of concatenating values together
4:34we can actually interpolate them
4:36directly into the string you can do this
4:38by defining your string with backticks
4:40and then use dollar sign brackets and
4:42then whatever variable or expression you
4:44want inside up there so we'll go ahead
4:46and grab the properties we need with
4:48object D structuring that we learned
4:49just a minute ago
4:50and then we'll interpolate those into
4:52the string itself which is a lot more
4:54readable and a lot easier to maintain
4:55but you can actually take things a step
4:57further and build strings in a purely
5:00functional way so we'll write a function
5:02here called horse age that takes in
5:04array of strings as the first argument
5:06and then it can take whatever other
5:08arguments that wants after that we can
5:10look at the arguments to this function
5:11and use them to compose a string so here
5:14we're going to look at the age of the
5:16animal and if it's older than five we'll
5:18say it's old otherwise we'll say it's
5:19young and the last thing we'll do is
5:21return the actual value of the string
5:23that's a pretty standard looking
5:25function but the interesting thing here
5:27is that instead of passing a regular
5:29argument to this function we can
5:30actually just attach it to a template
5:32literal and it will parse the arguments
5:34in it this might seem kind of weird at
5:36first but instead of doing parentheses
5:38with the arguments we'll just attach our
5:40template literal and it will parse all
5:42of the string segments as an array of
5:44strings as the first argument to the
5:46function that we defined then it will
5:48handle all the other arguments in the
5:50order in which they appear inside of the
5:51dollar sign brackets in other words you
5:54can take a single argument and use it to
5:56compose multiple values in the return
5:58string this can be a very powerful
5:59concept for templating and it's actually
6:02used in the polymer project now via a
6:04library called lit HTML so now that we
6:08know how to work with strings we're
6:09going to move on to the spread syntax to
6:11work with objects and arrays let's
6:14imagine we have one object for a Pokemon
6:16and the other one for the stats that
6:18define its various attributes let's say
6:20we want to assign the properties from
6:22the stats object to the Pikachu object
6:24one way to do that is to just redefine
6:27them one by one on the original Pikachu
6:29object for one this is just really ugly
6:32and verbose but we're also mutating the
6:34original object when we most likely want
6:37to create a new immutable object because
6:40let's say that our Pokemon
6:41levels up over time we want to represent
6:43each level up as its own object we could
6:46use object to sign here and take the
6:48original object and merge it in with the
6:50stats and this will merge them together
6:52from left to right or if we just wanted
6:54to update a single property we could add
6:56an object with that property in it this
6:59isn't too bad but there's a more concise
7:01way to do this with the spread syntax by
7:04creating a new object and placing our
7:06existing objects in it with three dots
7:07in front of them it will compose a new
7:09object from left to right so the
7:11property is farthest to the right will
7:13have the priority again this is mostly
7:15just syntactic sugar and it just makes
7:17your code more readable and easier to
7:19maintain and it's also possible to use
7:21the spread syntax on arrays so let's
7:24imagine we have an array of strings and
7:25we need to push additional items to this
7:28array the old-school way to do this
7:30would be to just push new items to the
7:31array one by one but in today's world we
7:34can reduce these three lines of code to
7:35just one by defining an array with the
7:37new items and in the spread syntax on
7:40the original array if we add the three
7:42dots to the beginning then it's the
7:44equivalent of doing an array push
7:46because it will append the new items to
7:48the end of the array but the nice thing
7:50is we could just add this to the end of
7:51the array and then we have the
7:53equivalent of a race shift and we might
7:55even take the original values and just
7:57splice them in the middle of the array
7:58giving us even more flexibility and this
8:01code brings back some memories you see
8:03this little trailing comma here this
8:05used to be the kind of thing that would
8:06break an entire JavaScript program and
8:08be really difficult to figure out but
8:10luckily in modern JavaScript it just
8:12works and it's actually kind of
8:13considered a good practice because you
8:15can reduce the number of lines that
8:17change when you do get commits now it's
8:20time to move on to loops let's imagine
8:22we have an array of numbers here that
8:24represent the order totals that we've
8:26had throughout the day in our app now
8:27let's say we need to compute some values
8:29based on this array such as the order
8:31total maybe we need to add some tax to
8:33each one and filter out the high value
8:35orders to be reviewed by a manager one
8:38option is to just use a classic for loop
8:40like you'll find in pretty much every
8:41programming language we have an integer
8:43that starts at zero while that integer
8:45is less than the orders length we will
8:47increment it by one
8:48personally I hate loops that look like
8:50this and I almost never use them in
8:52JavaScript but while we're in the loop
8:54we can start computing
8:55values for the total we will just do
8:57plus equals with the order total then to
9:00create a new array with the tax added to
9:02it we'll go ahead and take the order
9:04amount and multiply it by 1.1 to add 10%
9:07tax then if we have order values that
9:09are greater than 100 we'll go ahead and
9:11add those to the high value order array
9:13this code is a very ugly and B it's
9:17mutating values that might make our code
9:19a little more unpredictable luckily we
9:21can reduce this down to just three lines
9:22of code by using modern JavaScript array
9:25methods if we want to take an array and
9:27then have it accumulate to a value that
9:29equals say a total amount we can use
9:31array reduce it takes a callback
9:34function as the argument where the first
9:36argument is the accumulated value and
9:38the second argument is the current value
9:40in the loop so if we want to sum up all
9:42of the items in the array we can just do
9:44the accumulated values plus the current
9:46value and when the loop finishes that
9:48will give us the total of all elements
9:50in that array mapping and filtering
9:52values is even easier if we want to add
9:55tax to all the items in the array we can
9:57just take the values in the array then
9:59map them to their value times 1.1 and
10:01lastly we can use filter to create an
10:04array that only has the values greater
10:06than 100 in it whenever the callback
10:08function equals true it's going to allow
10:11a value through so in other words if the
10:13value is greater than 100 it will allow
10:15that value through to the new array I
10:17wanted to save the best for last and
10:20that of course is async/await let's
10:23create a method called random that
10:25returns a promise that resolves to a
10:27random number asynchronously now let's
10:29imagine that we want to retrieve three
10:31different asynchronous numbers one after
10:33the other and then add them all together
10:34at the end that might seem like a silly
10:36example but that's actually how things
10:38work a lot of times in the real world
10:40when you have to retrieve one item from
10:41the database get some data retrieving
10:43another item from an API and so on with
10:46promises you wait for an asynchronous
10:48value to resolve and then you handle it
10:50with a callback function inside of then
10:52once you have your data you can return
10:54another promise and then chain another
10:56then call back to it and continue this
10:58pattern on for as long as you need to
11:00you end up with this ridiculous looking
11:02code where you keep saying and then
11:04and then and then but fortunately
11:12there's a really nice solution to this
11:13which is async/await
11:15basically it allows us to express a
11:17singer s code in a synchronous format we
11:21can come down here and rewrite our
11:22promise chain the only difference is
11:24adding async in front of the function
11:26which will force it to return a promise
11:28but the real benefit here is that we can
11:31use a weight in front of our promises
11:33and have them resolve to an actual
11:35variable value so instead of using those
11:38then callbacks we can just say Const
11:40first equals await random and do the
11:42same thing for the second and third
11:44number and now it's much easier to read
11:47and understand this code because we can
11:48just go line by line and see that we're
11:50waiting one number awaiting another
11:51number and so on
11:53a sync wait is one of the most awesome
11:55things to ever happen to JavaScript and
11:57it really deserves its own video right
11:59now we're out of time but in the future
12:01I'll show you some of the cool things
12:02you can do with it like use it in
12:03conditional statements or use it in for
12:05loops and things like that I'm gonna go
12:07ahead and wrap things up there if this
12:09video helped you please like and
12:10subscribe and make sure to check out the
12:12livestream next week to see if you want
12:13some free swag and if you're serious
12:15about building apps consider becoming a
12:17pro member at angular firebase comm
12:19you'll get all kinds of exclusive
12:20content designed to help you build and
12:22ship your app faster thanks for watching
12:25and I'll talk to you soon