DEV Community

Cover image for Why do we have APIs in JavaScript?
Sapinder Singh
Sapinder Singh

Posted on • Updated on • Originally published at blog.sapinder.dev

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 this post and want me to create more content like this, do subscribe to my newsletter and follow me on Twitter. See you in the next post! πŸ˜‰

Discussion (12)

Collapse
sanampakuwal profile image
Sanam

Great post πŸŽ‰

Collapse
nepha profile image
nepha199

Thanks to this I can finally understand why they were called APIs despite using them as JS methodsπŸ€¦πŸ½β€β™‚οΈ

Collapse
sapinder_dev profile image
Sapinder Singh Author

I’m glad that it’s helpful!

Collapse
westerndad profile image
westerndad

Great post😁

Collapse
1satwinder profile image
1satwinder

Enjoyed. Keep going

Collapse
oesso profile image
Joseph Osorio

Nice post. I just saw a good video on this in a Jamstack scenario and reading about it helped me understand API even more. This was nice and simple.

Collapse
sapinder_dev profile image
Sapinder Singh Author

Thanks Joseph! It inspired me to write even better!

Collapse
omar04342220 profile image
Omar Saudi

Great post.

Collapse
sapinder_dev profile image
Sapinder Singh Author

Thanks Omar πŸ™

Collapse
reactivepeakstudios profile image
ReactJSX

Great read!

Collapse
pachverb profile image
new/bird

can you explain clouser in javascript?

Collapse
sapinder_dev profile image
Sapinder Singh Author

Maybe in one of my next posts :)