Subscribe to get my new tutorials in your inbox.

Is JavaScript fragmented? Why there are so many ways to do the same thing?

Is JavaScript fragmented? Why there are so many ways to do the same thing?

JavaScript seems fragmented to a lot of developers and newcomers to the language. Because there are so many different ways to do the same thing. But is it fragment? Would you say so? What do you think? Let’s find out with some examples.

Is it Fragmented?

I wouldn’t say its fragmented. JavaScript is defined by the ECMA-262 standard, which is again defined by the good folks at ECMA International. So the source of all the JavaScript goodies is the same.

Here is the link to the official ECMA-262 documentation: https://www.ecma-international.org/publications/standards/Ecma-262.htm

What makes it fragmented or at least make it look like one is the different browsers out there. Every new JS concept, once defined by the ECMA-262, is implemented by the browsers. Some browsers do it early, while some take time. So there’s a lag in the standard becoming universal.

What is ECMA? Stands for European Computer Manufacturers Association (ECMA) and is a standards organization for information and communication systems. The organization was founded in 1961 to standardize computer systems in Europe

For example, I will talk a little about ES6 (also known as ECMAScript 2015) and how it was supported by the browsers out there. ES6 came out in 2015 and brought a ton of new features to the language (many of which originated in the failed ES4), such as let/const, arrow functions, classes, promises, and more. It gave rise to transpilers like Babel and Typescript, so developers can write modern code, but still support legacy browsers that run ES5/3.

Browser Support table for ES6

Google Chrome was the first browser to support ES6. It was followed by the rest of the browsers such as Firefox, Safari, IE, etc. Here is a table that talks about when the browsers started supporting ES6 fully.

BrowserVersionDate
Chrome51May 2016
Opera38June 2016
IE Edge14Aug 2016
Safari10Sep 2016
Firefox54Jun 2017

So you can clearly see that from the time ES6 was standardized to the time it was supported in all the major browsers, there was a good amount of time taken.

Similarly for all versions of JavaScript released there is fragmentation in the browser support.

What was the last version of JavaScript released? It was ES10. Released in June 2019. More small, but useful updates have been finalized. Introduces array flat, flatmap, try catch without err.

Array.flat() – ES10

ES10 introduced Array.flat() method. Array.flat() returns a new array with any sub-array(s) flattened. Let’s see an example

var arr1 = [1, 2, [3, 4]];
arr1.flat(); 
// [1, 2, 3, 4]
var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]
var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

As an argument to the flat() method you can pass the depth level specifying how deep a nested array structure should be flattened. Defaults to 1.

Browser Support?

Again it is not supported in all the browsers at the time of writing this post. You can see from the table below, Array.flat() is not supported in IE and Edge browsers.

Array.flat() browser support

Source: caniuse

Different ways of doing the same thing? Possible Fragmentation?

Also with ES6 and newer versions of JavaScript, there have been constant efforts to improve the language and overcome the shortcomings that were introduced in the earlier versions of JS. So there are different ways of doing the same thing. For example,

Normal functions and arrow functions.

//regular functions
function A() {};
var A = function() {};

//now arrow functions
var A = () => {}

Another example is the equality == and the strict equality === operators. Both are used to compare values.

== compares only values and hence can surprise you. Whereas === checks both the type and the value. And so it is more accurate.

23 == "23"; //true
23 === "23"; //false

But wait…

The first version of JavaScript that rolled out had only ==. Brendan Eich, the creator of JavaScript was aware of this anomaly. It was corrected later in ES3 in Dec 1999 with the introduction of ===.

A brief history of JavaScript

JavaScript was written in mere 10 days by Brendan Eich while he was working for Netscape in May 1995. The Netscape team wanted to quickly release a language for the browser which the developers could use to build something quickly. For example simple form validations on the browser side etc. And they wanted to taste the success of Java, the hot language of that time. So they renamed JavaScript from Mocha to LiveScript and eventually to JavaScript.

Here’s an infographic showing how JavaScript evolved over time. It’s taken from the slides that I presented here in Dubai at one of the FrontEnd sessions. Browse through my slides in your free time. It has a lot of information and I am sure you will like it.

A brief history of JavaScript

Final thoughts

JavaScript is now more than two decades old and it has grown from what was considered as a toy for developers to a highly respected language. So things have changed over time, old things deprecated, new things added, improvements, etc. All this might add up to give a feeling of it being fragmented.

Btw, I enjoy working with JavaScript every day, and there has never been a day when it does not surprise me.


Write a Comment

Your email address will not be published. Required fields are marked *