In the previous chapter, we set up our working environment with many tools that we will be using throughout this book. In this chapter, we will get ourselves prepared for the rest of this book, and we will be considering some interesting and powerful modern features of JavaScript that can you help be more effective and write better code.

We will be considering several new language features that will come handy—but definitely not everything! JS has really grown into a big language, and there are some features that you're not likely to ever need. From the very start, we will also work more seriously with Flow, aiming to forego the usage of untyped JS, for a safer way of developing code.

It may be important to highlight that JS has evolved through the years, and that there isn't a single standard version. The most recent one is (formally) called ECMAScript...

In the previous chapter, we installed Flow so that we could add data types check to JS, but we didn't really get into its syntax or rules. Let's get into that now, before getting into JS-specific features.

Flow will not check every file unless you expressly require it to. For a file to be checked, you must add a simple comment to the very top, as shown in the following code snippet. Flow will ignore any files that lack this comment, so even if you were adding the tool to an already existing project, you could do it gradually, adding files one at a time:

/* @flow */

Starting with Flow's controls, you just have to specify what data type you expect any variable to be, and Flow will...

Strings have been a feature of JS since the very first version, but nowadays there are some more features available.

In the following sections, we'll see many functions that we'll be using through the rest of this book, such as interpolation (to build up strings out of several parts) or tagged strings (which we'll use to style components in the Creating StyledComponents for inline styling section of Chapter 7, Enhancing Your Application), to show just two examples.

Everybody has, at one...

Now, let's go over several useful new functions of JS, which have to do with basic needs and features. This won't be exhaustive, since JS is quite big, after all! However, we will touch on the most interesting features that you will be likely to use.

The features in this section aren't linked by a common thread, apart from the fact that they will help you to write shorter, more concise code and help you to avoid possible common errors.

Let's start with a change that you probably won't need...

JS isn't a functional programming language by definition, but it includes practically everything that a full-fledged functional language would provide. In our case, we won't be delving too deeply into this programming paradigm, but let's see some important features that will simplify your work.

JS has always included functions, which can be defined in many ways, but now there is yet one more function definition style that will provide several advantages; read on.

After reading the preceding paragraph...

Functional programming is often more declarative than imperative, with higher level functions that can do complete processing in a simpler, straightforward way. Here, let's look at several functional programming techniques that you should really adopt for your own code.

Functional programming has always been present in JS, but recent versions of the language have added well-known features of other languages that you can use to shorten your code, also making it simpler to understand.

A simple question...

When Ajax started appearing, it was commonly used with callbacks, which themselves could have callbacks of their own, with more callbacks within, which eventually led to coining the term callback hell. As a way out of that impractical programming style, two other styles of working with services and asynchronous calls appeared: promises and async/await—though in truth, the latter also use promises!

Let's see both styles by using a simple example. This book was written in three different cities: Pune, India; London, England; and Montevideo, Uruguay, so let's do some work related to those cities. We will write code that will get weather information for those cities...

If you want to start a lively discussion, ask a group of web developers: is JavaScript an object oriented language, or merely an object based one?, and retreat quickly! This discussion, while possibly arcane, has gone on year after year, and will probably continue for a while. A usual argument for the object-based opinion has to do with the fact that JS didn't include classes and inheritance and was prototype oriented. This argument has been voided now because the latest versions of JS provide two new keywords, class and extends, which behave in pretty much the same way as their counterparts in other official OO languages. However, keep in mind that the new classes are just syntactical sugar over the existing prototype-based inheritance; no new paradigm or model was truly introduced.

As today's JS applications become more and more complex, working with namespaces and dependencies becomes ever more difficult to handle. A key solution to this problem was the concept of modules, which allows you to partition your solution in independent parts, taking advantage of encapsulation to avoid conflict between different modules. In this section, we'll look at how to work in this fashion. However, we'll start with a previous JS pattern, which may become useful in its own way.

Organizing...

To round off this chapter, let me introduce two web tools that can help you be aware about what features you can safely use and which will make a transpiler (such as Babel, which we mentioned at the start of this chapter) necessary.

Your first resource will be https://kangax.github.io/compat-table/, which provides very thorough and complete tables showing, feature by feature, what is supported on JS engines everywhere. Depending on your specific needs, you might be able to totally dispense with transpiling, but it's certain you should be careful before taking such a measure!

The following screenshot shows Kangax at work: