Now for that, I have a project which you find attached, empty HTML file,
empty script and I want to start, not with a third-party library, but with a functionality built into
Javascript because the idea is the same
and that would be math random.
You learned about this method on the math object, it generates a random number.
Now you could come up with your own random function where you take the current date let's say and some
other things into account to get a pseudo random number.
Now of course, math random is a bit more elaborate than that but the idea is the same,
you get a method here which you also could kind of build on your own but you get it so that you don't
have to build it on your own because getting a random number is something you need fairly often in programming
but you don't always want to rewrite the code to generate that number,
you want to write the code that uses the random number and that's the general idea in programming.
We want to write code that's exclusive, specific to our project and don't reinvent the wheel for such
common tasks like generating a random number.
Now in the case of math random, it's built into the browser and exposed in Javascript and that's not
the case for everything.
Now let's come back to that example where we have two arrays and we want to compare them.
We have customers let's say, where we have Max and Manuel and Anna and we have active customers
and there we have Max and Manuel
let's say. Now for our application, we need to find the difference,
we need to find out which customers are for example in our database from which we might have retrieved
this array and which customers are active because we retrieve them from another database where we had
a look at customers that placed an order in the last year,
anything like that could be what we're trying to do.
So we have two arrays here which of course might be longer but to see what happens,
I am working with these short arrays. Now because these arrays are short, to us humans it's obvious
what the difference is but if they were longer, it might not be obvious
and in addition, this typically would not be hardcoded but we might be fetching this from some database.
So now we want to get the difference, the inactive customers and that's basically the customers array
minus the active customers.
Now customers minus active customers is not something that works in Javascript,
if we try to do that and try to log the result, you will see that if I load this page, we get not a number
because we're trying to do a subtraction here with two values which are not a number.
So getting the difference of two arrays does not work like that,
instead we need to write some function which basically goes through
this array and then checks if this item is part of this array, if this item is part of this array and so
on.
Now we absolutely can write such a function on our own but this is a typical use case where we might
want to use a third-party package and for this specifically, we could use a package called Lodash.
You can just google for Lodash,
it's a quite popular Javascript package and you should find lodash.com.
This is the official page and there, you find explanation of what this Javascript utility library is all
about and how you use it.
Now this is a typical example for a Javascript library and why you might want to use it,
this gives you a broad variety of functions you can use to improve your code or to get certain functionalities,
you can click on documentation to get an overview of all the built-in functions
and for example there, you'll see there is this difference function and this indeed takes an array and
then another array and it compares that and gives you the difference of arrays,
here you see an example of how this function would be applied. Now to use Lodash, we have to add it
to our project though, we can't just call this code here.
So if we try to execute this code, of course it won't work because we use this special underscore thing
and actually that's just a variable, you learned that variables can start with an underscore and that's
actually a variable which consists of nothing more than an underscore but it is a regular variable therefore
but of course it is a variable which our project doesn't know because we haven't defined it
and it's also not a standard Javascript variable.
So executing this code here will not work,
if I try to do it, I get an error that underscore is not defined because as I explained, it's not a
default variable.
Now it is not defined because Lodash defines it,
now to have lodash define it, we need to add lodash to our project. Now to include a library,
we typically find installation steps, installation descriptions on the library page.
Here we find a bunch of different installation options,
that also depends on how your project is set up,
we'll have a look at how we can set up more complex Javascript projects in the tooling module later
but you typically always can just download the script or use a CDN and I'll come back to what a CDN
is in a second as well.
So here we need the full build and we can click on this and it will essentially open a Javascript file
here,
you can just download this file or copy all the content in there,
here I'll just right click on full build and save link as to download this Javascript file and I'll
store it in my project folder here.
Now by doing this, this lodash.js file was added and this now basically contains all the features
the lodash library provides and we can just use that.
Now that's one way of importing it,
another way is to use that optimized version, so I'll download this and save this link as lodash.min.js
and the difference simply is that
this is now a script which contains the same features but is optimized, it's simply smaller in code because
all the function names which aren't important and so on were shortened and therefore this is faster to load
for the browser.
Now in a later module, we'll also learn how we can optimize our own code like this because of course
we don't have to write it like this to use it. So you can use either of the two,
typically you want to go for the optimized version so that you have a smaller script and the browser
has less to download and now you just need to include it. So in index.html, you want to add another
script import before your script import and the order is important
so that you import the library
your script depends on before your script runs,
otherwise your script will run too early and we'll search for features which weren't defined globally
yet. So therefore we want to add a script import here before our script and import one of the two lodash
files,
here I'll go for the minified version and add defer here because I got defer on my script as
well
and with that if we save that and reload,
now you see this works and we get an array of one as a result
of this operation.
Now here, we get one as a result because I'm comparing these two arrays.
Now of course, we can use customers and active customers here as well
and if we save that and reload, we get Anna which indeed is the difference between the two arrays.
So this is how we can add and use a third-party library.
Now I mentioned there would be one other way of adding it,
most libraries also support CDNs, here you also find a CDN copies link and this in the end gives
you a link
you can include so that you don't need to download the package, the file and manually import it but
instead you have such externally hosted file where you can import the external hosting link.
Now here in the case of Lodash, this means we can just grab this link by clicking on copy
URL here, copy to
clipboard, copy URL and then in your index.html file, you can replace your local import
here and I'm just commenting it out here so that we still have it for reference
with that CDN import.
So here, you then add a script where the source is this link.
So now this is not hosted on your own servers,
it's not part of your own project,
we could delete these two Lodash files here but we're getting it from some other external server.
The advantage can be that this might even be faster, it might be serving it faster than your own server because
these CDN servers often are quite fast and you don't have to worry about downloading it and managing
it on your own.
So both is possible, you can go for either approach, important is just that you do add it and that you
do add it correctly before your script executes it and with that, as you see, we can successfully run this code.