Chapter02 Emerging JavaScript

[zhu-ting]

Since its release in 1995, JavaScript has gone through many changes. At first, it made adding interactive elements to web pages much simpler. Then it got more robust with DHTML and AJAX. Now, with Node.js, JavaScript has become a language that is used to build full-stack applications.

http://kangax.github.io/compat-table/esnext/ The kangax compatibility table is a great place to stay informed about the latest JavaScript features and their varying degrees of support by browsers.

Not all web browsers support ES6, and even those that do don’t support everything. The only way to be sure that your ES6 code will work is to convert it to ES5 code before running it in the browser. This process is called transpiling. One of the most popular tools for transpiling is Babel.

[zhu-ting]

ES6 gives us new ways for working with objects and arrays and for scoping the variables within these datasets. These features include destructuring, object literal enhancement, and the spread operator.

[zhu-ting]

Promises give us a way to make sense out of asynchronous behavior. When making an asynchronous request, one of two things can happen: everything goes as we hope or there’s an error.

[zhu-ting]

Previously in JavaScript, there were no official classes. Types were defined by functions. We had to create a function and then define methods on the function object using the prototype.

ES6 introduces class declaration, but JavaScript still works the same way. Functions are objects, and inheritance is handled through the prototype, but this syntax makes more sense if you come from classical object orientation.

class Vacation {
  constructor(destination, length) {
   this.destination = destination this.length = length
}
print() {
  console.log(`${this.destination} will take ${this.length} days.`)
} }

[zhu-ting]

ES6 Modules A JavaScript module is a piece of reusable code that can easily be incorporated into other JavaScript files. Until recently, the only way to work with modular JavaScript was to incorporate a library that could handle importing and exporting modules. Now, with ES6, JavaScript itself supports modules.3 JavaScript modules are stored in separate files, one file per module. There are two options when creating and exporting a module: you can export multiple JavaScript objects from a single module, or one JavaScript object per module.

[zhu-ting]

export const print(message) => log(message, new Date()) 
export const log(message, timestamp) =>
    console.log(`${timestamp.toString()}: ${message}`}

export can be used to export any JavaScript type that will be consumed in another module.

const freel = new Expedition("Mt. Freel", 2, ["water", "snack"])
export default freel

export default can be used in place of export when you wish to export only one type. Again, both export and export default can be used on any JavaScript type: primitives, objects, arrays, and functions.

[zhu-ting]

Modules can be consumed in other JavaScript files using the import statement. Mod‐ ules with multiple exports can take advantage of object destructuring. Modules that use export default are imported into a single variable:

import { print, log } from './text-helpers'
 import freel from './mt-freel'

[zhu-ting]

CommonJS is the module pattern that is supported by all versions of Node.js.5 You can still use these modules with Babel and webpack. With CommonJS, JavaScript objects are exported using module.exports:

const print(message) => log(message, new Date())
const log(message, timestamp) =>
console.log(`${timestamp.toString()}: ${message}`} 
module.exports = {print, log}

[zhu-ting]

CommonJS does not support an import statement. Instead, modules are imported with the require function: const { log, print } = require('./txt-helpers') JavaScript is indeed moving quickly and adapting to the increasing demands that engineers are placing on the language. Browsers are quickly implementing the fea‐ tures of ES6 and beyond, so it’s a good idea to use these features now without hesita‐ tion.