9 Important New Features of ES6 (ES2015)

What is ECMAScript ？

ECMAScript is the language specification that defines:

• Syntax: variables, functions, scope, classes, etc.
• Execution semantics: type system, prototype chain, execution context, event loop, etc.
• Built-in objects: Array, Map, Promise, …

Relationship Between JavaScript and ECMAScript

• JavaScript = ECMAScript (the core language) + Browser APIs (DOM, BOM, Web APIs).
• Browsers and Node.js both implement ECMAScript and provide their own extended APIs.

Major Version Milestones (must-know for engineers)

• ES5 (2009): foundation standard; formally defined JavaScript behavior.
• ES6 (2015): the beginning of modern JavaScript, introducing modules, classes, let/const, Promises, arrow functions, etc. Followed by ES7, ES8, and so on each year.

JIT (Just-In-Time) Performance Model: Why Is JavaScript So Fast?

Modern JS engines (V8, SpiderMonkey, JSC) rely on JIT compilation:

1. Detecting Hot Functions / Hot Paths

• Hot function: a function called very frequently.
• Hot path: the code path in loops or branches that gets executed repeatedly.

Engines watch the code run → identify which parts are “hot.”

2. Type Stability

If JavaScript code maintains stable types, the JIT engine can assume:

• a variable is always a number,
• an array is always a packed array (no holes),
• an object’s Shape does not change.

3. Aggressive Optimization

Once the engine believes the types are stable, it will:

• eliminate dynamic checks (typeof checks, hidden-class checks, etc.)
• generate machine code close to C-level performance

Result: huge speed-ups — often tens of times faster.

4. Deoptimization (Deopt)

If the types suddenly change, the JIT will discard the optimized version and fall back to the slower interpreter.

ES6 (ES2015) — 9 Important New Features

1. let and const Keywords

• Scope: var → function scope; let and const → block scope.
• Redefinition: var can be redeclared; let and const cannot.
• Initialization: var is initialized as undefined; let and const are not.
• Assignment: let can be reassigned; const cannot.

2. Arrow Functions

// ES5 normal function
let addOne = function (n) {
  return n + 1;
};

// ES6 arrow function — parentheses omitted when only one parameter
let addOne = (n) => {
  return n + 1;
};

// ES6 arrow function — one-line implicit return
let addOne = (n) => n + 1;

• this means “who is executing this code.”
• Normal functions: this depends on how they are called
  • bare call f() → this is undefined (strict mode)
  • obj.f() → this is obj
  • f.call(user) → this is user
  • new F() → this is the new instance
• Arrow functions:
  • ignore all calling styles
  • this is always taken from the nearest enclosing non-arrow function
• Arrow functions cannot be used as constructors (new will throw).

3. Template Literals

Strings enclosed by backticks ....

4. Destructuring Assignment

const arr = ["iphone", 20000];
const [product, price] = arr;
console.log(product); // iphone
console.log(price);   // 20000

5. Default Parameters

function add(a = 0, b = 0) {
  return a + b;
}

console.log(add(1)); // 1

6. Spread Operator and Rest Parameters

• Spread: expand iterables or objects

const base = { a: 1, b: 2 };
const patch = { b: 3, c: 4 };
const merged = { ...base, ...patch };
// { a:1, b:3, c:4 }

• Rest: collect remaining fields:

const user = { id: 1, name: "Tom", password: "12345" };
const { password, ...publicInfo } = user;

7. Classes

• What is a class?

class Animal {
  constructor(name) {
    this.name = name;
  }

  eat() {
    console.log(`${this.name} eat food.`);
  }

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

• Inheritance: extends and super Purpose of super(name) → initialize the parent class (Animal) inside the child constructor.

class Dog extends Animal{
  constructor(name) {
    super(name);
  }

  speak () {
    console.log(`${this.name}barks`);
  }
}

• static methods Static methods belong to the class itself, not to instances.

• Private fields Use the # prefix to declare private fields or methods; accessible only inside the class.

8. Modules

• Front-end modularization improves maintainability, dependency clarity, and code splitting.
• Build tools allow these modules to run efficiently in browsers.

Webpack provides a “build pipeline”: → Parse all files as modules → Build dependency graph → Output optimized browser-executable bundles

9. Promise

A Promise is a one-time state machine, representing the result of an async operation in the future.

• then → pass values
• catch → catch errors
• finally → always run cleanup
• await → extract the resolved value

async function run () {
 try {
   const result = await new Promise ((resolve,reject) =>
   setTimeout(() => (Math.random() > 0.5 ? resolve("ok") : reject ("err")),300)
   );
   console.log(result);
 }
 catch (e) {
   console.log ("error:",e);
 } finally {
   console.log("done");
 }
}
run();