Arrow functions allow us to write shorter function syntax. They are anonymous and change the way that 'this' behaves. It has a shorter syntax compared to function expressions and lexically binds the 'this' value. Arrow functions are not ideal for object methods and are not used for functions that will be called with 'new' (constructor functions).

let hello = () => {
  return 'Hello World!';
}
console.log(hello()); // outputs: Hello World!

Classes

Classes are a template for creating objects. They encapsulate data with code to work on that data. ES6 classes are a syntactical over the existing prototype-based inheritance. The class syntax is not introducing a new object-oriented inheritance model to JavaScript.

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}
let rect = new Rectangle(5,8);
console.log(rect.height); //outputs: 5

Template Literals

Template literals are string literals allowing embedded expressions. You can use multi-line strings and string interpolation features with them. They were called 'template strings' in prior editions of the ES2015 / ES6 specification.

let name = 'John';
let greeting = `Hello ${name}`;
console.log(greeting); // outputs: Hello John

Promises

Promises are used to handle asynchronous operations in JavaScript. They are easy to manage when dealing with multiple asynchronous operations where callbacks can create callback hell leading to unmanageable code.

let promise = new Promise(function(resolve, reject) {
  //some code
  if (/* everything turned out fine */) {
    resolve('Stuff worked');
  } else {
    reject(Error('It broke'));
  }
});

Modules

JavaScript modules are a way to divide JavaScript code into separate code blocks, each block having its unique responsibilities. These blocks can then be exported and imported in other modules, which allows you to access the functionality of these modules in other files.

// lib.js
export const sqrt = Math.sqrt;
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

// main.js
import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5

In your toy box, you already have lot of toys like cars, dinosaurs, and legos. Now, ES6 brings a bunch of new toys into this box, like a flying helicopter, a talking robot and lots more. These new toys are added to make your play time more fun and creative!

The Helicopter Toy (Arrow Functions)

Arrow functions in JavaScript are like a new helicopter toy. Just like the helicopter provides a new way to fly around your toy city, arrow functions add a new way to write functions in JavaScript. They're shorter and easier to write.

const greet = () => 'Hello!';

The Talking Robot (Template Strings)

Template strings in JavaScript are like a talking robot toy. Just like how a robot can talk in full sentences, template strings allow us to put variables into our strings. This makes them easier to read and write.

let toyName = 'robot';
let sentence = `My favorite toy is ${toyName}`;

The Lego Building Blocks (Classes)

Classes in JavaScript are like Lego building blocks. Just like how you can build structures with legos, classes allow us to build objects in our code. They make it easier to create complex things in our code.

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