7 Practical Applications of JavaScript + Tips

There are a lot of things JavaScript is used for. The most common ones are:

DOM(Document Object Model) Manipulation

JavaScript is used to manipulate the DOM.

I will be going over the DOM in depth but you can think of it as a tree-like structure of nodes and everything on the page is a node including every HTML tag, every attribute, every piece of text and so on.

So JavaScript provides methods for dynamically changing that structure, the content, or the styles of the elements of the DOM.

For example, you can use JavaScript to add, remove or change text or the content or the padding of a div.

The styles of the elements such as the fonts, or size.

So, this is an important aspect of JavaScript as it allows developers to create dynamic and interactive webpages that can respond to user actions.

Also read: How I would Learn JavaScript If I was Starting Over

Event Handling

Now, those user actions are called events and JavaScript gives us a way to handle events.

So, we can respond to things like mouse clicks, drags or hovers, keyboard events, form submissions, and just about anything you can think of that you can do on the browser window.

This allows us to create very dynamic interfaces and things like modals, dropdowns, collapsible contents, and so on.

Asynchronous Requests

So, making asynchronous requests is one of the most powerful uses of JavaScript.

It is used to interact with backend servers, whether it is your own server that you created or a public API such as the GitHub or the YouTube API.

So, we can make HTTP requests from our code to fetch data or submit data, and this happens all behind the scenes without having to refresh the page.

This is often used in what is called Single Page Applications(SPAs) to dynamically load and update content without having to reload the entire page.

Animations and effects

So, as far as animations and effects, there are many different ways that we can create these using JavaScript.

We can use CSS transitions, the request animation frame method, there are different libraries like animate.css.

These allows developers create a wide range of animations such as fading, moving elements along paths, scaling, rotating and so on.

Data Manipulation

Now, data manipulation, which is the process of modifying or transforming data can be done with JavaScript because it is a full-featured language with data structures like arrays.

This allows us to sort, filter and aggregate data.

There are all kinds of powerful array methods that we can use such as map, filter, and reduce. We are going to get to these later on.

Storing Data

So, JavaScript can also be used to store data on the client or in the browser using things like local storage, session storage, and cookies.

Single Page Applications(SPA)

We can also create single page applications. These are applications that load a single HTML page and dynamically update the content without having to reload the entire page.

This provides a really seamless responsive user experience. So, no page reloading.

You would use front end frameworks for building SPAs.

You would use something like React, Vue or Angular. You can also create them with Vanilla JavaScript.

Creating APIs and Web Services

Now, everything that I have said to this point is all client-side or front-end JavaScript.

That is where it is used the most, I would say, but you can also use it on the server side with the Node.js runtime as well as Deno.

So, in addition to consuming APIs on the frontend, we can also create APIs that interact with databases on the backend and there are a ton of frameworks that you can use to help you with this including Express which is extremely popular.

We will actually be creating a backend with Express later on.

Happy Coding!
Karl👊

P.S. Do you want to learn JavaScript from scratch? Become job-ready by understanding how JavaScript really works behind the scenes. Get it here now.