What is ECMAScript and how is it different from JavaScript
Tags: javascript, react, angular, vue
Published: 2020-08-23 09:45:45

>Many times developers use JavaScript and ECMAScript synonymously for each other. Though they are very closely linked to each other but do not mean the same thing. 

## What is ECMAScript?
There is a complete story on the [history of JavaScript](https://cloudaffle.com/history-of-javascript/) and how it came into existence. To cut the long story short, ECMA in ECMAScript refers to Europen Computer Manufacturers Association to which JavaScript 1.1 was submitted for standardization back in the year 1997. A technical committee was created with the objective of standardizing the syntax and semantics of a general-purpose, cross-platform, and a vendor-neutral scripting language. The committee consisted of developers from Sun Microsystems, Netscape Communication, Microsft, and various other companies. They came up with ECMA-262 which is a standard defining a new scripting language and a general-purpose scripting language called the ECMAScript to which all the browsers had to adhere to create their own implementations of JavaScript.  

### ECMAScript Is Not Tied To Web Browsers
ECMAScript is a cross-platform, general-purpose scripting language and is not tied to web browsers alone. ECMA-262 defines the standards based on which more-robust scripting language may be built. ECMA-262 defines the following parts of the language and does not refer to web browsers at all

- Sytax 
- Types 
- Statements 
- Keywords 
- Reserved Words 
- Operators 
- Global Objects 

JavaScript just implements ECMAScript into a more mature and robust scripting language with various input and output methods which developers can in turn use to build various applications. 

## ECMAScript Conformance 
So what does ECMAScript conformance means? When would a programming language be considered as conforming to the ECMAScript based on the standards laid down in ECMA-262? You can see the latest [ECMAScript Specification](https://www.ecma-international.org/ecma-262/) but an implementation's conformance boils down to the following:

- An implementation should support all the parts of the language as mentioned in the standard and highlighted above. 
- Support the Unicode character standard
- A conforming implementation may add additional types, objects, functions, etc which are not specified in the specification document. 
- Extend the built-in regular expression support.

There is a [test suite for ECMA-262](https://github.com/tc39/test262) available on GitHub and used for testing the conformance to the standards.       

## The JavaScript Engine
A JavaScript engine can be referred to as a program or an interpreter which reads your JavaScript code and converts it into a machine-understandable code. Each web browser runs on a different engine and the most common of them is Google's V8 Engine which is open source and is implemented by NodeJs as well. Here are a few common examples of various browsers and the JavaScript engines that they use: 

<img src= "https://cloudaffle.com//assets/images/posts/browser-engine.jpg" alt="Different browsers use different JavaScript engines" />

- Google Chrome - V8 Engine 
- Firefox - Spidermonkey
- Microsoft Edge - Chakra, now uses V8 Engine as well 
- Safari - Nitro, also know as the JavaScriptCore 

Its the JavaScript Engine that works as an interpreter and is sandwiched between the machine code and a JavaScript Runtime (also known as the JavaScript Host). Since now we understand what is the job of a JavaScript Engine lets dive deeper and try to grasp what is a JavaScript Runtime. 

## JavaScript Runtime Or A JavaScript Host 
A JavaScript runtime (Or a JavaScript Host) can be understood as a container that uses the JavaScript Engine to generate APIs that can be used by software developers to create applications using JavaScript. Taking an example of a JavaScript runtime in a browser, it would typically contain the implementations of JavsScript which are more specific to a browser. Whereas a runtime for something like NodeJs would have specific implementations that are more specific to running and building a server-side application using JavaScript.  


### JavaScript Runtime - The Secret Sauce For How NodeJS and Google Chrome Run On The Same V8 Engine 

Since we now know what JavaScript Engine and JavaScript Host Environment (JavaScript Runtime) are, we are in a better position to understand how NodeJs and Google Chrome run on the same V8 Engine and yet perform very different functionality. The secret is that they do have the same JavaScript engine but a very different JavaScript runtime. Let's compare the two JavaScript runtime environments    

<img alt="Browser Engine and Browser Runtime Explanation" src="https://cloudaffle.com//assets/images/posts/javascript-runtime-vs-engine.jpg" />

In a nutshell, a browser's runtime might have the following basic implementations which are useful for creating web applications:

-  **The Core** - The base implementation of JavaScript with all the input and output functions that the developers can use. 
- **Document Object Model (DOM)** - This is what the browser renders as a hierarchy of nodes to be displayed to the client or the user for XML and HTML. 
- **Browser Object Model (BOM)** - This is what allows the developers to manipulate the browser window. Using the BOM the developers can access the browser features and manipulate them outside the context of the DOM or the page that is being rendered.

On the other hand, a NodeJs runtime would have implementations that are useful for developing server-side applications. It contains the following implementations as an example: 

- **Require**
- **Buffers**
- **Processes**
- etc
 
## ES6, ES2015, or ES Harmony. What Do They Mean?
It's the sixth edition of ECMA-262 which was released in the year 2015 which is known as ES6, ES2015, and ES Harmony. Essentially all these terms refer to the same edition of ECMA-262. Consequently, ECMA has been publishing a new edition of specifications every year so the 7th edition came out in the year 2016 and so on. 

It's the sixth edition of ECMA-262 that brought in the most desirable and important collection of enhancements to ECMAScript and hence ES6 is considered to be a milestone and changes the way we have been using JavaScript. This is why ES6 is considered as a major change and a new way of writing JavaScript. It brought formal support for classes, modules, iterators, generators, arrow functions, promises, reflection, and a host of new data types.   

## So Do Browsers Support Latest Standards Quickly?
The answer is No! The level of ES6 adoption has been inconsistent across all browsers. For example, Internet Explorer 11 only complies with the ES5 standards and not ES6 hence bringing in a lot of incompatibility and confusion around different browsers supporting different versions of ECMAScript Standards. There is a much elegant way of writing applications using the most recent features offered by JavaScript and still complying with the legacy browsers. But more on that in future articles. 

Please spread some love by giving this article a thumbs up if you liked it, keep me motivated. You can watch this space for the next article or you can [subscribe to my Newsletter](https://cloudaffle.com/#cd-memberships) and I would notify you as soon as the next article is published. Don't forget to leave a like or share the article if it was helpful!