ES6+ Features

ES6 is a major update to the JavaScript language, released in 2015. It added cleaner ways to do everyday tasks, and every modern browser supports it now. If you learn the ES6 style from the start, you skip old habits that current code no longer uses.

Arrow functions are a short way to write functions. Instead of the word function, you use an arrow after the parameters. When the body is a single expression, you can drop the braces and the return keyword too. They read like math formulas, which is why modern code uses them everywhere.

Template literals make strings easier to build. Wrap the text in backticks and drop values in with ${}. Line breaks inside backticks are kept exactly as typed. Destructuring pulls values out of objects and arrays in one line, and spread copies lists. Together these features make modern JavaScript code much shorter and easier to read.

Old style vs new style

Both styles do the same job. The arrow version drops the word function and, for a single expression, the braces and return too. One thing to know: arrow functions do not have their own this, which matters mostly for event handlers and classes.

const squareOld = function (n) { return n * n; };
const squareNew = (n) => n * n;

Destructuring and spread

Destructuring pulls named values out of an object in one line, and spread copies an array into a new one. Both avoid long chains of dots and manual copying, and both appear in almost every modern codebase.

const user = { name: "Ada", age: 36 };
const { name, age } = user; // two variables in one line
const more = [...numbers, 99]; // copy plus one item

Syntax

const greet = (name) => `Hello, ${name}!`;
console.log(greet("Ada"));

const obj={ method(){ return this.x }} // not ()=>this.x