How to Run Modern JavaScript
JavaScript has evolved considerably but the runtime engines are still catching up. Different browsers have varied support for different features from the newer versions of JavaScript.
Sites like kangax.github.io[2] and caniuse.com[3] can help you find whether a particular browser supports a JavaScript feature you’re interested in using. MDN[4] web docs is a good source for documentation of JavaScript features and support in a few different browsers. The good news is all browsers will be 100 percent features compatible within the next 20 years—or so it feels—but we can’t wait that long.
If you are developing for the back end using JavaScript, you may have better control of the version of the runtime engine you use. If you are developing for the front end, you may not have much say about the browser and the version of browser your users have. The version they use may not support a particular feature, or it may be an old browser and may not support any of the features of modern JavaScript. What gives?
Here are a few options to run JavaScript in general and, in particular, to practice the examples and exercises in this book.
Run in Node.js
The easiest way to practice the code examples in this book is running them in Node.js.[5] Version 8.5 or later supports most of the latest features. I will guide you along where necessary if you need to use a command-line experimental option or an additional tool.
First, verify that Node.js is installed on your system. Point your browser to https://nodejs.org and download the latest version if you don’t have it or have a fairly old version. To avoid colliding with versions of Node.js already installed on your system, use Node Version Manager[6] (NVM) if it’s supported on your operating system.
Once you install the latest version of Node.js, open a command prompt and type
| | node --version |
The version of Node.js used to run the examples in this book is
| | v9.5.0 |
The version installed on your machine may be different. If it’s very old compared to the version mentioned here, consider installing a more recent version. If what you have is later than the version shown here, then continue using the version you have.
To run the program in Node.js, issue the node command followed by the filename. For example, suppose we have a file named hello.js with the following content:
| | console.log('Hello Modern JavaScript'); |
Use the following command at the command prompt to run the code:
| | node hello.js |
The command will produce the desired output:
| | Hello Modern JavaScript |
Most IDEs that support JavaScript offer ways to more easily run the code from within the IDE. Make sure that your IDE is configured to use an appropriate version of Node.js.
Run Using the REPL
Even though I use text editors and IDEs to develop applications, I am a huge fan of REPL, which stands for “read-eval-print-loop.” I call it the micro-prototyping environment. While in the middle of working on a function or implementing enough code to make a unit test to pass, I often reach for the REPL to quickly try out ideas. This is like how painters prime their brushes on the side of the canvas while painting.
Let’s fire up the REPL and try out a snippet of code. The Node.js command node, when executed without any filename, runs in the REPL mode.
At the command prompt type the command node and press Enter. In the node prompt, which appears as >, type various JavaScript code snippets and press Enter to run immediately. The output from the execution of the snippet is shown instantly. To exit from the REPL, press Ctrl+C twice, press Ctrl+D, or type .exit.
Let’s take the REPL for a ride. Here’s an interactive session for you to try:
| | node |
| | > languages = ['Java', 'Python', 'Ruby', 'JavaScript'] |
| | [ 'Java', 'Python', 'Ruby', 'JavaScript' ] |
| | > word = 'Hello' |
| | 'Hello' |
| | > word.st(hit tab) |
| | word.startsWith word.strike |
| | |
| | > word.startsWith('H') |
| | true |
| | > languages.filter(language => language.startsWith('J')) |
| | [ 'Java', 'JavaScript' ] |
| | > |
In the REPL, create a list of languages and the REPL immediately evaluates and prints the list. Now, suppose we want to pick only languages that start with J. Hmm, does string support a startsWith() function? Why guess? We can ask the REPL.
Create a variable named word and set it to the string ’Hello’. Then type word.st and press the Tab key. The REPL lists all methods of string that start with st. Then it repeats the command you had already typed. Type a after word.st and press the Tab key again. The REPL now will complete the code with word.startsWith. Proceed to complete that call and press Enter.
Finally, type the line with filter to pick words from the list that meet the expectation. The REPL immediately provides a feedback with the result of executing the call.
REPL is also a great tool to use when you are on a colleague’s machine and trying to show something quickly and realize he or she is not using your favorite IDE. Instead of fiddling with his or her tool, you can open up the REPL and show some quick examples on it.
Run in the Browser Console
Much like Node.js’s REPL, most browsers provide a developer console for interactive experimentation. Here’s an example of using the console in Chrome, which can be invoked by choosing View > Developer > JavaScript Console or by pressing the appropriate keyboard shortcut key.
Much like an IDE, the console pops up a list of possible methods when you type a period and start typing the method. It provides an instant feedback like the REPL as well.
Run within a Browser Using Babel
In many cases, developers don’t have control over the browser that their users use. Very old browsers obviously don’t support any of the modern JavaScript features. The support of newer features in newer browsers also varies widely. Writing code using newer features, only to find that some browser a user is running chokes up, is no fun, especially once the application is in production. This is where transpilers come in—they translate the JavaScript you write to the good old JavaScript supported by browsers old and new.
If you are developing for the front end, you’re most likely already using a transpiler like Babel.[7] Since most browsers support the older version of JavaScript, you get the best of both worlds; you can write the code using the features available in the newer versions of the language and let Babel compile it to code that will run on most browsers. With this approach, you can make use of the features without the worry of browser compatibilities, although you still need to test and verify that things actually work.
Since most examples in this book run in Node.js, we don’t need to dive into Babel at this time. We’ll revisit this topic toward the end of the book in Using Decorators, when we need Babel.