How often do you confuse some Web Browser APIs to mean JavaScript built-in functions? JavaScript is a language that is complex and at the same time stupidly simple and plain that there are some funny things about it that developers don't know about it because it is masked as "Simple", but hey simple doesn't mean it is easy to learn and master.

In this article, I will be explaining some of the Web browser APIs Frontend developers use when building applications that have mistaken to be JavaScript built-in functions and why these APIs have been mistaken for JavaScript built-in functions. When I mean mistaken, I do mean many JavaScript developers don't know these functions are not JavaScript native functions but only made available by the browser windows object.

What is even JavaScript?

Well, JavaScript is a programming language used to give commands and instructions to a computer, and such computers include Servers, Browsers e.t.c. JavaScript is widely accepted and used by the tech community as the language for the browser, which is what sets it apart amongst others.

JavaScript has a very unique feature of being able to interact with a web browser, commands it, and give it instructions. The invention of JavaScript made web applications more lively and very interactive, and of course, the only language used for building applications that runs in the browser.

Its usage on the browser for years is what brought about the confusion on its features with that of the browser which is the aim of this article; to clarify JavaScript developers especially those starting to learn this awesome language.

What are JavaScript built-in functions?

JavaScript built-in functions are already-made functions or native functions that come with the language JavaScript developers can use in building whatever they want. Yeah, it is that simple.

Just like in any other programming language, Functions are blocks of code that solve a particular problem or provides a particular solution, and the fun thing is functions can and are made to be reusable anywhere in an application. This also applies to built-in functions, they are made available globally by the language in this case JavaScript.

10 Built-in JavaScript functions:

split() - Turns a string to an Array.
splice() - Splicing strings by index.
reverse() - Reverse an array.
join() - Convert an array to string.
toLowerCase() - Converts strings to lowercase.
toUpperCase() - Converts strings to Uppercase.
forEach() - Function to loop through arrays.
indexOf() - Finds the index of any data passed into it.
map() - Function that loops through an array and produces a new array from the old one.
filter() - Function used to filter through an array.

The above are just fractions of the available built-in functions in JavaScript that developers can use provided by the EcmaScript organization. They are available globally in JavaScript.

What is Web Browser APIs?

Before we dive into this, we need to understand what an API means in programming.

"Application Programming Interfaces (APIs) are constructs made available in programming languages to allow developers to create complex functionality more easily. They abstract more complex code away from you, providing some easier syntax to use in its place." -- The MDN

Be aware that there are two types of APIs in the Browser which are; Browser API and Third-party APIs, but this article is about the Browser API. Read more about APIs Here

So what is Web Browser APIs?

Web Browser APIs are APIs available in the browser that can be interfaced with(using JavaScript) for building complex and hard applications, they are provided and exposed globally ready to be used, these APIs allow us to interact with the browser on a very much abstract level.

For example, the DOM API commonly used by Frontend Developers provides construct for creating HTML elements, deleting HTML elements, adding and removing classes on HTML elements, adding new HTML elements to the DOM, listening to events on HTML elements, and generally manipulating elements on the DOM tree of a browser. Beneath this API, your browser is using some low-level language to make this happen. But then, this is the abstraction the API does for you and the browser provides this API for you to use.

5 examples of Browser APIs:

DOM API
Web Audio API
Canvas API
History API
Touch Event API

Web browser APIs mistook to be JavaScript built-in Functions

Now we are here. But why are these APIs mistook to be JavaScript built-in Functions? Let's know why:

Language of the Browser

Just like I noted up above, JavaScript has been long accepted, used, improved to be the only language of the browser, I don't see any language replacing her in that aspect( TypeScript is still complied down to JavaScript). JavaScript has the ability to interface with this web browser's APIs because it was built to do that, even the browsers are aware of the capability of JavaScript being able to use the API they make available for use.

Through the constant usage of these APIs which look like a function, e.g "addEventListener()", see the way they also use the naming convention of JavaScript( Camel casing) and functions parenthesis, these APIs have been seen and taken to be inbuilt functions of JavaScript, owing to how frequent they are been used and how dependent JavaScript is on them in order to make applications. Take away the ability for JavaScript to interface with these APIs and the APIs itself and JavaScript ceases to be a language of the browser.

So it is safe to say JavaScript and the Browser have some love relationship seeing the way they complement each other and work well and even the similarities between JavaScript functions and the web APIs.

Let take a look at a human example that explains how JavaScript and the Web Browser APIs works.

John is human in an environment with food, fresh air, good clothes. Our focus is on those three for now:

Food: John is JavaScript and the Food here is a web API, John is not born with food ( in-built function) but born with the ability to consume any food in the environment( Browser) provides for him to function well in the same environment
- Fresh air( Oxygen): John is also not born with Fresh air in his lungs rather the ability to breathe the air the environment provides
- Good Clothes: John is not born with clothing on his body but rather has a body that needs to be clothed. This can also be applied to housing too.

Below are some of the APIs mistook to be JavaScript built-in functions:

Fetch(): JavaScript on its own cannot connect or talk to a third-party API, but the browser can so it provides an API that allows JavaScript to do the connecting.
- setTimeout(): I see no reason a programming language needs a timer to do anything but building an app you would need one in the browser, so there goes the browser to the rescue.
- setInterval(): Same with the setTimeout.
- AudioAPI(): JavaScript can't play audio on its own.
- localStorage(): Please JavaScript doesn't have the ability to store things on a web browser database.
- addEventListener(): This is a construct from the DOM API for adding a listener to an HTML element, it has nothing to do with JavaScript.

There are so much many more but I will stop here. Someone may ask "But we don't import them before use as we do in Golang or Python, so how are they not built-in?", well just like John in the environment, John doesn't need to request air before the environment gives it to him, as soon as John is born, Oxygen fills his nostrils and is left for him to breathe in and take it, So no need to import. I think the only time JavaScript needs "importing" is when using a module or external libraries. Knowing this is what sets you apart as an experienced JavaScript developer and makes you world-class because you really understand your domain.

Resources

What are Web APIs
List Of Web Browser APIs
Built-in JavaScript Objects ( You need to know these too)
List of Web Browser APIs in Object ( Object Interfaces)

The resources above are provided that you may look further into these topics and arm yourself with more knowledge on this subject matter!

In conclusion

Wow!! We are at the very end of this article, hope you learned a lot because I can't imagine how much you know after this article and that is what this blog is existing in the first place.

If you did learn something please like, share, comment, just do anything to make it go viral.

I would be posting more articles, so be sure to follow me to get notified when I post them.

If you have any questions concerning Go, Javascript, TailwindCSS, Open-source, or this article? You can reach me on Twitter. Till next time, see ya. Thank you.

The Aspire