Master Essential ES6 Features: Let/Const, Arrow Functions, Templates, and More

In modern web development, ES6 is widely adopted, and mastering its features has become essential, even though code still needs to be compiled with Babel.

Before learning, it is recommended to use Babel's online REPL (http://babeljs.io/repl/) to write demos and see the compiled output in real time.

1. New Variable Declarations: let/const

Unlike var, let and const provide block scope and eliminate variable hoisting. Use let for variables that will change and const for values that should remain constant. When the value is a reference type, the reference itself is immutable, but the referenced object can still be modified.

Examples:

2. Arrow Functions

Arrow functions provide a concise syntax and inherit this from the surrounding scope, meaning they have no own this. Consequently, call, apply, and bind cannot change the this value inside an arrow function.

Arrow functions can replace function expressions but cannot replace function declarations.

Because arrow functions lack their own this, they are especially useful in React components for passing values without worrying about binding.

3. Template Literals

Template literals, delimited by backticks ( `), allow embedded expressions using ${...} and support multiline strings, making string construction far more readable than using the + operator.

4. Destructuring

Destructuring lets you extract values from objects or arrays into distinct variables with a concise syntax.

For example, to obtain loading and clicked from an object:

Arrays can also be destructured similarly.

5. Default Parameters

ES6 allows functions to define default values for parameters directly, avoiding the need for manual checks.

6. Spread Operator

The spread operator ( ...) expands arrays or objects. It is useful for copying, merging, and handling rest parameters in functions.

It can also be used in function signatures to collect remaining arguments.

7. Object Literals and Class

ES6 simplifies object literals: property shorthand, method shorthand, and computed property names.

Classes provide a clear syntax for creating objects and inheritance using extends and super.

Babel compiles class syntax to Object.defineProperty calls; see "JavaScript 高级编程" for details.

Inheritance with extends is straightforward compared to ES5, and super must be called in subclass constructors.

super.getName can call a parent prototype method, though it is rarely used.

8. Promise

For a deeper dive into Promises, see: http://www.jianshu.com/p/fe5f173276bd

9. Modules

Future articles will explore modules together with create-react-app. Recommended ES6 resources: http://es6.ruanyifeng.com/