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/