Why do we have APIs in JavaScript?

You've most likely heard of the term API if you have ever worked with JavaScript. There're a ton of them such as- DOM, Storage, Fetch, Canvas, History, and so forth. But have you ever wondered, "Can't we have JavaScript without APIs? Why do we even need them?". Well, I heard you!

Let's first of all understand what an API is. The term API stands for Application Programming Interface, which basically refers to an interface that different programs use in order to communicate with each other; in short, to send & receive data. APIs are like the fictional cars, which can carry the same passengers (data) by different means- land, air and water. They know exactly what medium to use when commuting to different places (programs).

The use of the term API can slightly vary across different programming areas. A server-side API is just another web server; but in place of a web page, it serves a certain piece of data when we make a request to its server. For example, if you visit this endpoint of TheCatApi, you shall receive an object that consists of a URL for some random cat's image, along with other data. We can utilize this API in a project to get random cat images. Such APIs play a crucial role in apps like weather, music, shopping, news, etc., because they provide data that these apps can utilize.

Client-side APIs (or APIs in JavaScript) are similar to server-side APIs. The difference is that these APIs are not publically available endpoints, but internally available data to JavaScript. Let me ask you- "What could you do with JavaScript if there was no DOM API, Fetch API, Storage API, Event API or any other kind of API? Can you think of any use-case of JavaScript in such scenerio?" Ya, you could just create your own variables and play with them until you realize that it won't help in interacting with the HTML page.

JavaScript is just the language we speak when communicating to browsers, whereas the various APIs provided by browsers help us communicate with different things like HTML, CSS, Storage available on client's system, Events captured by client's system, etc. For example, DOM API is a JavaScript Object that gives us information about what is there in the HTML document. CSSOM API is another JavaScript Object that gives us information about the styles that are present in CSS form.

Each of these APIs present their data to us in the language we speak, JavaScript. Hence, as you see, APIs help different pieces of software to communicate with each other by providing data in their native forms. All of these APIs are provided by JavaScript Runtime Environment to the JavaScript Engine present in browsers that interprets and executes our code. Without these APIs, we could just play around with our manually created data, but we won't be able to cause any effect outside of JavaScript's reach; i.e. everything else.

Ending it all, If you like my writing style, you can follow me to never miss any of my future posts. And you can also check me out on Github and LinkedIn.
See you in the next post! 😉