# JavaScript

## Summary


JavaScript (JS) is a programming language and a core technology of the World Wide Web (WWW). It complements HTML and CSS. HTML provides structured static content on the web. CSS does the styling on the content including animations. JavaScript enables rich interactions and dynamic content. 

JS started for the web and executed within web browsers. With the coming of Node.js in 2009, it became possible to use JS for server-side execution. It's now possible to build entire web apps with JS for both frontend and backend code. Today, the JS ecosystem is rich and mature with many libraries, frameworks, package managers, bundlers, transpilers, runtimes, engines and IDEs.

Technically, JavaScript is a loosely typed, multi-paradigm, interpreted high-level language that conforms to the **ECMAScript** specifications.

## Discussion

### What's unique about JavaScript that one would want to learn it?

JavaScript is the language of web. It's one of the three core technologies of the World Wide Web along with HTML and CSS. JS enables dynamic effects and interactions on webpages. Hence it's become an essential part of web applications. Static web pages are almost obsolete nowadays.

With the advent of NodeJS, JS was quickly adopted for server-side scripting. JS can be used for both frontend (client-side) and backend (server-side) programming of web apps. A developer therefore needs to learn only one language. This is particularly important when there's a demand for fullstack (frontend + backend) developers.

JavaScript is no longer limited to just client-side code. It's being used for both client-side and server-side code, in mobile devices, for IoT applications, desktop applications and more. 

The importance of JavaScript is also highlighted by this quote from Eric Elliott, 

> Software is eating the world, the web is eating software, and JavaScript rules the web.


### How does JavaScript work on the web?

JavaScript code can be embedded into HTML files or stored in separate `*.js` files that can be referenced from HTML files. When browsers encounter the JS code, they will parse it and execute it on the fly. JavaScript is an **interpreted language**, meaning that it's not compiled in advance to machine code. 

By mid-2000s, **AJAX** became a common approach to use JS more effectively for richer user experience. With AJAX, user interactivity is continued while new content is fetched asynchronously in the background. 

Traditionally, content on the web was served as individual HTML pages and each page had some interactivity enabled via JS and AJAX. In the late 2010s, there was a shift towards building the entire app in JavaScript and updating the contents via AJAX. Such an app is called a **Single Page Application (SPA)**. 

Since we can now run JS on both client and server, this gives us the flexibility to render part of the web page on server and let the client complete the rest. This approach leads to what we call **Isomorphic or Universal Application**. 


### Is JavaScript related to Java, VBScript, JScript and ECMAScript?

Java and JavaScript are two different programming languages. The name *JavaScript* itself was coined in 1995 because of a partnership between Netscape Communications (that invented JavaScript) and Sun Microsystems (that invented Java). Java syntax was introduced into JavaScript. While Java was reserved for enterprise apps, JavaScript was positioned as a web companion to Java. About the same time, Java was also made available within web browsers as **applets**. Today, Java and JavaScript are both popular languages.

When Microsoft got into web technology in the 1990s, its Internet Explorer (IE) browser needed an equivalent to what Netscape and Sun had with JavaScript and Java. JScript and VBScript are therefore Microsoft scripting languages. JScript is said to be very similar to JavaScript and enabled dynamic content on IE. 

This fragmentation meant that a web page written for Netscape would not work well on IE, and vice versa. There was no standard and JavaScript was evolving far too quickly. In this context, **ECMAScript** was born in 1997 as a standard for JavaScript. 


### Why is JavaScript called a multi-paradigm language?

JavaScript is an **object-oriented** language. It has objects, with properties and methods. Functions are first-class objects that can be passed into other functions, returned from functions, bound to variables or even thrown as exceptions. However, object inheritance is not done in the classical manner of C++ or Java. It uses **prototypal inheritance**, inspired by Self language. This makes the language flexible. A prototype can be cloned and modified to make a new prototype without affecting all child instances. It's also possible to do **classical inheritance** in JavaScript. 

Though being object-oriented, there are no classes in JavaScript but constructors are available. Object systems can be built using either inheritance or aggregation. Variables and methods can be private, public or privileged to the object. 

Eric Elliott explains why he regards *prototypal inheritance* and *functional programming* as two pillars of JavaScript. *Closures* provide encapsulation and the means to avoid side effects. Thus, understanding closures is important for **functional programming** in JavaScript. JavaScript can also be used in an **imperative style** using `if-else` conditions, `for` loops, and module-level variables. 

Thus, JavaScript is multi-paradigm because it's object-oriented, functional and imperative.


### What are some important features of JavaScript that I should learn?

Beginners should first learn the basics of JS, in addition of HTML and CSS. The Modern JavaScript Tutorial is great place to start learning.

Some useful things to learn include effective console logging, destructuring, template literals, and spread syntax. Explicit loops can be avoided by taking the functional programming approach with `reduce`, `map` and `filter` methods. For asynchronous programming, you should learn about Promises and adopt the modern `async/await` syntax. 

Get a good understanding of closures and partial application. Use the arrow syntax of ES6 for more compact and readable code. Other useful ES6 features to learn are `const`, multiline strings, default parameters, and module import/export. 


### What's the difference between a JS engine and a JS runtime?

A **JavaScript Engine** parses JS code and converts it to a form that the machine can execute. It contains the memory heap and the call stack. Examples include Google's V8 Engine (Chrome), SpiderMonkey (Firefox), JScript (IE), and Chakra (Microsoft Edge). 

A **JavaScript Runtime** is an environment in which JS runs. Web browsers are environments. Node.js provides a runtime for server-side execution. In a typical web app, the program may access the DOM, make AJAX calls, and call Web APIs. These are not part of the language. They are provided by the browser as part of the JS runtime. 

Another important distinction is that the engine does **synchronous** processing. It can process only one function at a time via the call stack. On the other hand, the runtime can maintain a number of items in the callback queue. A new item can be added anytime to the queue and processed later when the call stack is free. Thus, the runtime enables **asynchronous** processing. 


### As a beginner, what should I know about the JavaScript ecosystem?

Consider the following:

    + **Frameworks**: These simplify development by providing a structure, including design patterns such as MVC. Examples include React, Angular, Vue, Backbone and Ember.
    + **Libraries**: Many developers release their code as JS packages/modules/libraries so that others can reuse them. In December 2018, about 836,000 libraries were available on NPM.
    + **Package Managers**: Developers use them to install and manage packages they require for their projects. Examples include NPM and Yarn. Packages are downloaded from known repositories on the web.
    + **Linters**: These catch errors or bad practices early. Examples include Prettier and ESLint.
    + **Module Bundlers**: A project may have many dependent JS packages. Bundlers combine them into far fewer files so that these can be delivered more efficiently to browsers and other runtimes. Examples include Webpack and Browserify.
    + **Task Runners**: These enable automated development workflows such as minifying or concatenating files. Examples include Gulp and Grunt.
    + **Transpilers**: Developers can write code in other languages (CoffeeScript, TypeScript) and then convert them into JavaScript. Another use case is to write in modern ES6 syntax and transpile to syntax supported by older browsers. Examples include Babel.

### What are some concerns that developers have about JavaScript?

Developers coming from languages such as C++ and Java, find JavaScript annoying in many ways: automatic semicolon insertion, automatic type coercion (loose typing), lack of block scoping, lack of classes, unusual (prototypal) inheritance. Another quirk is type mismatches between objects that are otherwise similar: `"Hello world"` of type "string" versus `new String("Hello world")` of type "object". Some of these are attributed to the hurried development of JavaScript. 

Because there are many JS frameworks, libraries and tools, the choice of which one to adopt can be daunting. In one example, it was shown that Vue.js was hardcoded to rely on `yarn` and this broke the workflow because the developer had only installed `npm`. It's also possible in the JS world to have a small project of just few lines of code download lots of dependencies. An average web app has over 1000 modules. 

Because the language was designed in a hurry, it has design errors. Developers can write bad JS code. This prompted Douglas Crockford to write his now famous book titled *JavaScript: The Good Parts*.

## Milestones

1993

In the early days, the history of JavaScript is somewhat tied to the history of web browsers. Among the early browsers are WorldWideWeb, ViolaWWW, Erwise and Midas. In 1993, **NCSA Mosaic** appears on the scene. It supports multiple networking protocols and is able to display images inline. It becomes popular and people begin to see the potential of the web. There's no JavaScript at this point and content shown on browsers are all static.

1994

Marc Andreessen, one of the creators of Mosaic, has the vision that the web should be lot more dynamic with animations and interactions. He starts **Netscape Communications**. 

May  
1995

At Netscape, the idea is to invent a dynamic scripting language for the browser that would have simple syntax and appeal to non-programmers. Brendan Eich is contracted by Netscape to develop "Scheme for the browser", Scheme being a language with simple syntax, dynamic and powerful. Thus is born **Mocha**, which becomes part of Netscape Communicator browser in May 1995. 

Nov  
1995

With competition from Microsoft and its Internet Explorer, Netscape partners with Sun Microsystems to make Java available in the browser. At the same time, they recognize that Java is a beast not suited for the browser. Together they announce **JavaScript**, which they describe as "an open, cross-platform object-scripting language designed for creating and customizing applications on the Net." To ride on the hype surrounding Java, JavaScript is positioned as a companion to Java, even based on Java. JS becomes available in beta version of Netscape Navigator 2.0. Mocha becomes JS but less Scheme-like and more Java-like. 

1996

Microsoft introduces **JScript**, it's alternative to JavaScript. It's included in Internet Explorer 3.0. JScript can also be used for server-side scripting in Internet Information Services (IIS) web server. Server-side scripting is also possible with JavaScript in Netscape Enterprise Server. However, only in 2009 does Node.js make server-side scripting with JS popular.

Jun  
1997

ECMA organization publishes **ECMAScript**, documented as the ECMA-262 standard. Web pages that conform to ECMAScript are guaranteed to work on all browsers, provided browsers support the standard. JavaScript conforms to ECMA, while providing additional features. ActionScript and JScript are other well-known implementations of ECMAScript. 

2005

Jesse James Garrett of Adaptive Path mentions a new term, **AJAX**, which expands to *Asynchronous JavaScript + XML*. AJAX eliminates the need to reload an entire webpage to update small details. It gives developers more flexibility to make their web apps more responsive and interactive. Many projects in Google already use AJAX. AJAX goes on to change the way web interactions are built with JS.

2009

As a standard library, **CommonJS** is founded, mainly for JS development outside the browser. This include the use of JS for web server, desktop and command line applications. This is also the year when **NodeJS** is released so that JS can be used for server-side scripting. 

Jun  
2015

As a standard, **ECMAScript 2015** (ES2015 or ES6) is released. ES6 is seen as a major update to the core language specifications, which hadn't changed since ES5 of 2009. ES6 is expected to make JS coding easier, although it may take a while for browsers to support it fully. 

2017

JavaScript has highest number of pull requests on GitHub, an open site for sharing code, particularly on open source projects. A pull request is a way for developers to submit their contributions to a project. 

2018

With more than 9.7 million developers using JavaScript worldwide, JS is declared as the most popular programming language. This is based on a survey of 21,700 developers from 169 countries. JS has 2.4 million more developers than the next popular language. However, some predict that JS may decline due to **WebAssembly**. For interactions on the web, JS has been the only language of choice so far. With WebAssembly, developers can potentially migrate to other languages. 

Mar  
2018

TensorFlow project releases **TensorFlow.js** to train and run Machine Learning (ML) models within a web browser. This becomes an easy path for JS developers to get started with ML. This is just one example to illustrate the versatility of JS.