JavaScript is a multi-paradigm language that supports object-oriented, imperative, and functional programming styles. It has first-class functions, employs prototypal delegation, and is well-suited for event-driven, highly asynchronous design patterns.

Each of these properties of the language has interesting and fundamental implications for how we design, author, and reason about our code. In this part, we will explore each of these concepts, what they mean, and how we can use them to our advantage.

The history of JavaScript is as colorful and tumultuous as one might expect for a technology so deeply intertwined with the evolution and proliferation of the world wide web. Its openness and approachability veil a powerfully expressive medium with which we can author rich, dynamic experiences on the web platform and beyond.

Once merely a means by which to achieve dynamic UI effects and pop-ups in the browser, the language has undergone a meteoric rise in popularity and power. With the proliferation of Ajax patterns and close integration with the DOM, JavaScript quickly grew to eventually beat out the existing heavyweights – namely, Flash and embedded Java applets – to become the de facto language used to build first-class applications on the web. Today, JavaScript is a mature language with a vibrant ecosystem that continues to grow at an ever-increasing rate.

Over the past few years, the language has seen a similar rise to prominence in applications outside of the browser. The Node.js runtime allows JavaScript to power applications on the server-side, and it is even becoming popular for use in embedded systems and massively distributed networked devices in the IoT field. JavaScript is spreading everywhere, and knowledge of it is essential for any developer whose work touches the web.

History & Standards

For much of its life, JavaScript has been both loved and despised for its idiosyncrasies. It is a language that, while borrowing bits and pieces from many predecessors, as a whole is truly unique.

The first version of JavaScript was designed in 1995 by Brenden Eich, then developer at Netscape and later co-founder and chief architect at Mozilla. Eich wrote the original draft in ten days, as he recalls, “under marketing orders to make it look like Java but not make it too big for its britches … [it] needed to be a silly little brother language”¹ aimed at non-professional programmers in order to complement the introduction of Sun Microsystem’s Java into Netscape’s browser.

In 1996, Netscape submitted their version of JavaScript to the standards body Ecma International, which in 1997 published the first official version of the open specification as ECMAScript in ECMA-262. The specification is maintained by ECMA’s Technical Committee 39 (TC39), which includes industry representatives. Over the next decade, Ecma released subsequent additions and refinements to the language, and it continued to be a popular tool with which to make the web just a little bit more interactive.

Around 2005, the web industry started to seriously explore and utilize a paradigm known as ajax – Asynchronous JavaScript and XML – in which pages make background calls to fetch new pieces of data without refreshing the entire page. One of the first and most popular applications built using this methodology was Google’s Gmail web client. Once the ajax pattern caught hold, the industry ran with it, and JavaScript started its ever-increasing rise to beat out competing client-side technologies such as Java applets, Flash, and Silverlight.

During this time, there were still many quirks and inconsistencies across browsers and their implementations of web languages. With a quickly-progressing industry, the whatwg began construction of the HTML5 specification in 2008, which was later adopted by the W3C. Somewhat contrary to its name, the HTML5 spec covers not only document semantics, but also defines the APIs through which scripts in the browser can interact with the document and the user’s device. These components, which continue to evolve, enable the creation of truly first-class applications on the web which can rival their “native” counterparts.

Many reference materials and tutorials that you may find, and existing libraries that you may use, are written targeting ECMAScript version 5 (ES5) or earlier, which was finalized in 2009 and formed the foundation of much of the web application ecosystem’s growth in the not-too-distant past. In June of 2015, TC39 finalized the sixth version of the spec, an expansive update commonly referred to as “ES6” (officially ECMAScript 2015, or “ES2015”). This new version was a great leap forward for the language, introducing very powerful features and constructs which solidified JavaScript’s perception as a solid modern language. This started a new era of growth and evolution for the language, with new versions scheduled for release annually. Some of the language features presented in this book are new to ES2017. In a later section we will discuss the additional (but not too difficult) steps to “transpile” newer code to ES5 that can be run in older browsers and environments.

I present this part with some assumptions a priori regarding your level of experience in writing code. I assume that you are fairly proficient in at least one other programming language – namely Java, as often utilized throughout many introductory programming classes and academic curricula. This makes some of our discussion much easier; I am not going to explain to you what a for-loop is, nor am I going to spend time pointing out perils of algorithmic complexity. As JavaScript shares common C-style syntactical roots (as do many other languages), I trust that, when given a sample of code, you can inspect it and walk yourself through its general flow of execution (with some guidance on the JavaScript-flavored parts). Although I suspect that many of you, if not most, have dabbled in JavaScript at one point or another, no prior experience in the language itself is needed in order to follow along here.

However, for some of the language concepts we will explore, previous programming experience might actually serve as a hindrance. Do not be fooled by familiar-looking syntax; the underlying mechanisms may not be the same as other languages and environments with which you have worked. Though JavaScript can be “object-oriented,” its conceptual similarities to classical object-oriented constructs number fewer than its differences. The mindset with which we approach designing applications in JavaScript is fundamentally different.

I hope that this part will help set a foundation of understanding for your own exploration of this beautiful language and the capabilities it provides. Your expertise, of course, will come only in time with its mindful use and application.

Conventions

In the code samples shown throughout this part, we will assume the existence of a function called log(), which takes any number of arguments and simply prints each one (or a string representation of each one) separated by spaces. We will use this in some cases to inspect the values of variables as code is executed.

Logged or returned values may be shown in code comments (//) beside the line on which a value is returned, or shown in a virtual “console” separate from the code itself.

(This log() function is actually available to use in your own programs as console.log(), but here I use a shorthand for brevity.)

Running JavaScript

In the Browser

Like CSS stylesheets, JavaScript can be sent to the browser embedded directly inline with the HTML document or loaded from an external file.

<!DOCTYPE html>
<html>
  <head>
    <!-- Inline script: -->
    <script>
      let foo = 'Hello, browser.';
    </script>

    <!-- External script: -->
    <script src="/url/path/to/script.js"></script>
  </head>
  <body>
    ...
    <script>
      // script elements can also be included
      // anywhere in the body of the document
    </script>
  </body>
</html>

Most modern browsers also have developer tools with “scratchpad” and console features that let you write scripts in the browser itself and execute them in the context of the currently-open page. See:

• FireFox’s Scratchpad tool
• Chrome DevTools’ Snippets feature

Web-based Playgrounds

There are a number of services which provide in-browser editors that let you write HTML, CSS, and/or JavaScript side-by-side and see the resulting output in a virtual frame or console.

• CodePen
• JSBin
• JSFiddle

Locally / Server-Side with Node.js

Follow the instructions on nodejs.org to install the Node runtime for your system.

With Node installed, you can execute scripts from your system’s terminal:

// myscript.js
console.log('Hello, node!');

$ node myscript.js
Hello, node!