While strict mode is optional in ES5, all ES6 modules and classes are strict by default. As you will see soon, most of the code we write in ES6 resides in a module; hence, strict mode is enforced by default. However, it is important to understand that all other constructs do not have implicit strict mode enforced. There were efforts to make newer constructs, such as arrow and generator functions, to also enforce strict mode, but it was later decided that doing so would result in very fragmented language rules and code.

The majority of the browsers and server frameworks are on their way towards implementing ES6 features. You can check out the what is supported and what is not by clicking http://kangax.github.io/compat-table/es6/.

Though ES6 is not fully supported on all browsers and server frameworks, we can start using almost all features of ES6 with the help of transpilers. Transpilers are source-to-source compilers. ES6 transpilers allow you to write code in ES6 syntax and compile/transform them into equivalent ES5 syntax, which can then be run on browsers that do not support the entire range of ES6 features.

The defacto ES6 transpiler at the moment is Babel. In this book, we will use Babel and write and test our examples.

Babel supports almost all ES6 features out of the box or with custom plugins. Babel can be used from a wide range of build systems, frameworks, and languages to template engines, and has a good command line and read-eval-print loop (REPL) built in.

To get a good idea about how Babel transpiles ES6 code to its ES5 equivalent form, head over to Babel REPL (http://babeljs.io/repl/).

Babel REPL allows you to quickly test small snippets of ES6. When you open Babel REPL in the browser, you will see some ES6 code defaulted there. On the left pane, remove the code and type in the following text:

    var name = "John", mood = "happy"; 
    console.log(`Hey ${name}, are you feeling ${mood} today?`) 

When you type this and tab out of the left pane, you will see REPL transpiling this ES6 code into something like the following code:

    "use strict"; 
    var name = "John", 
      mood = "happy"; 
    console.log("Hey " + name + ", 
      are you feeling " + mood + " today?"); 

This is the ES5 equivalent of the code we wrote earlier in the left pane. You can see that the resulting code in the right pane is a familiar ES5. As we said, Babel REPL is a good place to try and experiment with various ES6 constructs. However, we need babel to automatically transpile your ES6 code into ES5, and for that, you can include Babel into your existing build systems or frameworks.

Let's begin by installing Babel as a command-line tool. For this, we will assume that you are familiar with node and Node Package Manager (npm). Installing Babel using npm is easy. Let's first create a directory where we will have Babel installed as a module and rest of the source code. On my Mac, the following commands will create a directory called babel_test, initialize the project using npm init, and install Babel command line using npm:

    mkdir babel_test
    cd babel_test && npm init
    npm install --save-dev babel-cli

If you are familiar with npm, you may get tempted to install Babel globally. However, installing Babel as a global module is not generally a good idea. Once you have installed Babel in your project, your package.json file will look something like the following block of code:

    { 
      "name": "babel_test", 
      "version": "1.0.0", 
      "description": "", 
      "main": "index.js", 
      "scripts": { 
        "test": "echo "Error: no test specified" && exit 1" 
      }, 
      "author": "", 
      "license": "ISC", 
      "devDependencies": { 
        "babel-cli": "^6.10.1" 
      } 
    } 

You can see a development dependency created for Babel for version > 6.10.1. You can use Babel to transpile your code by either invoking it from the command line or as part of the build step. For any non-trivial work, you will need the later approach. To invoke Babel as part of the project build step, you can add a build step invoking Babel inside your script tag to your package.json file, for example:

    "scripts": { 
      "build": "babel src -d lib" 
    }, 

When you do npm build, Babel will be invoked on your src directory and the transpiled code will be placed inside lib directory. Alternatively, you can run Babel manually also by writing the following command:

    $ ./node_modules/.bin/babel src -d lib

We will talk about various Babel options and plugins later in the book. This section will equip you to start exploring ES6.

As the name object-oriented suggests, objects are important. An object is a representation of a thing (someone or something), and this representation is expressed with the help of a programming language. The thing can be anything, a real-life object, or a more convoluted concept. Taking a common object, a cat, for example, you can see that it has certain characteristics-color, name, weight, and so on and can perform some actions-meow, sleep, hide, escape, and so on. The characteristics of the object are called properties in OOP-speak, and the actions are called methods.

The analogy with the spoken language are as follows:

Take the sentence "The black cat sleeps on the mat" as an example. "The cat" (a noun) is the object, "black" (adjective) is the value of the color property, and "sleep" (a verb) is an action or a method in OOP. For the sake of the analogy, we can go a step further and say that "on the mat" specifies something about the action "sleep", so it's acting as a parameter passed to the sleep method.

In real life, similar objects can be grouped based on some criteria. A hummingbird and an eagle are both birds, so they can be classified as belonging to some made-up Birds class. In OOP, a class is a blueprint or a recipe for an object. Another name for object is instance, so we can say that the eagle is one concrete instance of the general Birds class. You can create different objects using the same class because a class is just a template, while the objects are concrete instances based on the template.

There's a difference between JavaScript and the classic OO languages such as C++ and Java. You should be aware right from the start that in JavaScript, there are no classes; everything is based on objects. JavaScript has the notion of prototypes, which are also objects (we'll discuss them later in detail). In a classic OO language, you'd say something like-create a new object for me called Bob, which is of class Person. In a prototypal OO language, you'd say-I'm going to take this object called Bob's dad that I have lying around (on the couch in front of the TV?) and reuse it as a prototype for a new object that I'll call Bob.

Encapsulation is another OOP related concept, which illustrates the fact that an object contains (encapsulates) the following:

One other term that goes together with encapsulation is information hiding. This is a rather broad term and can mean different things, but let's see what people usually mean when they use it in the context of OOP.

Imagine an object, say, an MP3 player. You, as the user of the object, are given some interface to work with, such as buttons, display, and so on. You use the interface in order to get the object to do something useful for you, like play a song. How exactly the device is working on the inside, you don't know, and, most often, don't care. In other words, the implementation of the interface is hidden from you. The same thing happens in OOP when your code uses an object by calling its methods. It doesn't matter if you coded the object yourself or it came from some third-party library; your code doesn't need to know how the methods work internally. In compiled languages, you can't actually read the code that makes an object work. In JavaScript, because it's an interpreted language, you can see the source code, but the concept is still the same-you work with the object's interface without worrying about its implementation.

Another aspect of information hiding is the visibility of methods and properties. In some languages, objects can have public, private, and protected methods and properties. This categorization defines the level of access the users of the object have. For example, only the methods of the same object have access to the private methods, while anyone has access to the public ones. In JavaScript, all methods and properties are public, but we'll see that there are ways to protect the data inside an object and achieve privacy.

Combining several objects into a new one is known as aggregation or composition. It's a powerful way to separate a problem into smaller and more manageable parts (divide and conquer). When a problem scope is so complex that it's impossible to think about it at a detailed level in its entirety, you can separate the problem into several smaller areas, and possibly then separate each of these into even smaller chunks. This allows you to think about the problem on several levels of abstraction.

Take, for example, a personal computer. It's a complex object. You cannot think about all the things that need to happen when you start your computer. But, you can abstract the problem saying that you need to initialize all the separate objects that your Computer object consists of the Monitor object, the Mouse object, the Keyboard object, and so on. Then, you can dive deeper into each of the subobjects. This way, you're composing complex objects by assembling reusable parts.

To use another analogy, a Book object can contain (aggregate) one or more Author objects, a Publisher object, several Chapter objects, a TOC (table of contents), and so on.

Inheritance is an elegant way to reuse existing code. For example, you can have a generic object, Person, which has properties such as name and date_of_birth, and which also implements the walk, talk, sleep, and eat functionality. Then, you figure out that you need another object called Programmer. You can reimplement all the methods and properties that a Person object has, but it will be smarter to just say that the Programmer object inherits a Person object, and save yourself some work. The Programmer object only needs to implement more specific functionality, such as the writeCode method, while reusing all of the Person object's functionality.

In classical OOP, classes inherit from other classes, but in JavaScript, as there are no classes, objects inherit from other objects.

When an object inherits from another object, it usually adds new methods to the inherited ones, thus extending the old object. Often, the following phrases can be used interchangeably-B inherits from A and B extends A. Also, the object that inherits can pick one or more methods and redefine them, customizing them for its own needs. This way, the interface stays the same and the method name is the same, but when called on the new object, the method behaves differently. This way of redefining how an inherited method works is known as overriding.

In the preceding example, a Programmer object inherited all of the methods of the parent Person object. This means that both objects provide a talk method, among others. Now imagine that somewhere in your code, there's a variable called Bob, and it just so happens that you don't know if Bob is a Person object or a Programmer object. You can still call the talk method on the Bob object and the code will work. This ability to call the same method on different objects, and have each of them respond in their own way, is called polymorphism.

This example shows how you can use the console to type in some code that swaps the logo on the google.com home page with an image of your choice. As you can see, you can test your JavaScript code live on any page:

In order to bring up the console in Chrome or Safari, right click anywhere on a page and select Inspect Element. The additional window that shows up is the Web Inspector feature. Select the Console tab, and you're ready to go.

You type code directly into the console, and when you press Enter, your code is executed. The return value of the code is printed in the console. The code is executed in the context of the currently loaded page, so, for example, if you type location.href, it will return the URL of the current page.

The console also has an autocomplete feature. It works in a similar way to the normal command-line prompt in your operating system or autocomplete feature of the full-fledged IDEs. If, for example, you type docu and hit the Tab or right arrow key, docu will be autocompleted to document. Then, if you type . (the dot operator), you can iterate through all the available properties and methods you can call on the document object.

By using the up and down arrow keys, you can go through the list of already executed commands and bring them back in the console.

The console gives you only one line to type in, but you can execute several JavaScript statements by separating them with semicolons. If you need more lines, you can press Shift + Enter to go to a new line without executing the result just yet.

On a Mac, you don't actually need a browser; you can explore JavaScript directly from your command line Terminal application.

If you've never used Terminal, you can simply search for it in Spotlight search. Once you've launched it, type the following command:

    alias jsc='/System/Library/Frameworks/JavaScriptCore.framework/
      Versions/Current/Resources/jsc'

This command makes an alias to the little jsc application that stands for JavaScriptCore and is part of the WebKit engine. JavaScriptCore is shipped together with Mac operating systems.

You can add the alias line shown previously to your ~/.profile file so that jsc is always there when you need it.

Now, in order to start the interactive shell, you will simply type jsc from any directory. Then, you can type JavaScript expressions, and when you hit Enter, you'll see the result of the expression. Take a look at the following screenshot:

All modern browsers have consoles built in. You have seen the Chrome/Safari console previously. In any Firefox version, you can install the Firebug extension, which comes with a console. Additionally, in newer Firefox releases, there's a console built in and accessible via the Tools | Web Developer | Web Console menu.

Internet Explorer, since version 8, has an F12 Developer Tools feature, which has a console in its Script tab.

It's also a good idea to familiarize yourself with Node.js, and you can start by trying out its console. Install Node.js from http://nodejs.org and try the console in your command prompt (terminal):

As you can see, you can use the Node.js console to try out quick examples. But, you can also write longer shell scripts (test.js in the screenshot) and run them with the scriptname.js node.

Node REPL is a powerful development tool. When you type 'node' on the command line, the REPL invokes. You can try out JavaScript on this REPL:

    node 
    > console.log("Hellow World"); 
    Hellow World 
    undefined 
    > a=10, b=10; 
    10 
    > console.log(a*b); 
    100 
    undefined