Episode 44 of 46

JavaScript Libraries

An overview of popular JavaScript libraries and how to use them in your projects.

A library is a collection of pre-written code that you can use in your projects. Libraries save time by providing ready-made solutions for common tasks.

What is a Library?

Instead of writing everything from scratch, libraries give you functions and tools that others have already built and tested. You include the library in your project and then call its functions.

How to Include a Library

<!-- Via CDN (Content Delivery Network) -->
<script src="https://cdn.jsdelivr.net/npm/library-name"></script>

<!-- Or download and link locally -->
<script src="js/library.min.js"></script>

<!-- Via npm (for modern projects) -->
<!-- npm install library-name -->

Popular Libraries

  • jQuery — DOM manipulation made simple (older but still widely used)
  • Lodash — utility functions for arrays, objects, strings
  • Axios — making HTTP requests (API calls)
  • Chart.js — creating beautiful charts and graphs
  • Anime.js — smooth animations
  • Day.js / date-fns — date manipulation

Library vs Framework

  • Library — you call the library when you need it (jQuery, Lodash)
  • Framework — the framework calls your code (React, Vue, Angular)

Think of it this way: a library is a tool you pick up when needed; a framework is a structure you build within.

Example: Using Lodash

<script src="https://cdn.jsdelivr.net/npm/lodash"></script>
<script>
    let numbers = [4, 2, 8, 1, 5, 3];

    // Lodash utility functions
    console.log(_.sortBy(numbers));       // [1, 2, 3, 4, 5, 8]
    console.log(_.shuffle(numbers));      // Random order
    console.log(_.chunk(numbers, 2));     // [[4,2], [8,1], [5,3]]
    console.log(_.random(1, 100));        // Random number 1-100
</script>

Should You Use Libraries?

Libraries are great for productivity, but learn the fundamentals first. Understanding vanilla JavaScript makes you better at using any library.