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
What's inside this course
- 0:00
1. Introduction to Modern JavaScript
The 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.
- 0:50
2. Debugging with Console Methods
This chapter covers advanced console logging techniques including computed property names, CSS styling, console.table for displaying arrays of objects, and console.time for performance benchmarking. These methods help developers debug more effectively and understand their data better.
- 2:30
3. Stack Traces and Function Debugging
This section demonstrates how to use console.trace to identify where functions are called from and track their execution path. This is particularly useful for debugging critical functions and preventing accidental duplicate calls.
- 4:00
4. Object Destructuring for Cleaner Code
Object destructuring is introduced as a technique to eliminate repetitive variable references. The chapter shows two approaches: destructuring in function parameters and destructuring in function bodies, both reducing code verbosity and improving readability.
- 6:00
5. Template Literals and Tagged Templates
Template literals are presented as a modern alternative to string concatenation, using backticks and interpolation with ${} syntax. The chapter also covers tagged templates, a functional approach where a function processes template literal strings and expressions.
- 8:20
6. Spread Syntax for Objects and Arrays
The spread operator (...) is demonstrated for creating new immutable objects and arrays by merging existing ones. This approach avoids mutating original data and provides cleaner syntax than Object.assign, with examples for both object composition and array manipulation.
- 10:20
7. Array Methods: Map, Filter, and Reduce
Modern array methods are presented as replacements for traditional for loops. The chapter covers reduce for accumulating values, map for transforming arrays, and filter for selecting elements, demonstrating how these functional approaches produce cleaner and more predictable code.
Every chapter ends with a checkpoint (quiz, flashcards, retell, diagram, or prediction) and the course closes with a final boss-fight. More courses →
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