Techie BabajiLearn to Code. Build Real Skills.
ES6+ (Modern JavaScript) · Foundations

Introduction to ECMAScript

ECMAScript is the official rulebook for JavaScript. ES6, released in 2015, was the biggest upgrade the language ever had — and it is the JavaScript every modern job expects you to write.

Beginner 5 min Lesson 1 of 23 Runnable examples
Before you start:JavaScript: Introduction to JavaScript
0/23 in ES6+
On this page · 5 min · Beginner

On this page

  1. Learning objectives
  2. Explanation
  3. Code example
  4. Step by step
  5. Real-world use
  6. Common mistakes
  7. Best practices
  8. Remember this
  9. Practice exercise
  10. Mini quiz
  11. Related topics
  12. My notes
Reading time
5 min
Difficulty
Beginner
Updated
Oct 28, 2026

Related tutorials

Interview questions

Learning objectives#

  • Explain the relationship between ECMAScript and JavaScript
  • Name the major ES versions and what they added
  • Know how new features are added (TC39 stages)
  • Decide when a transpiler like Babel is needed

Explanation#

ECMAScript (ES) is the specification; JavaScript is the language browsers and Node.js implement from it. Think of ECMAScript as the recipe and JavaScript as the dish.

ES5 (2009) was the standard for years. ES6 / ES2015 added let/const, arrow functions, classes, modules, promises, template literals, destructuring, Map/Set and more.

Since 2015 a new edition is published every June: ES2017 added async/await, ES2020 added ?. and ??, ES2023 added toSorted() and findLast(), ES2024 added Object.groupBy().

The TC39 committee moves proposals through stages 0–4. Only stage-4 features become part of the standard.

All modern browsers support ES2015–ES2023. You only need Babel (or TypeScript/esbuild output targets) if you must support very old browsers.

Code example: Five modern features in seven lines#

JavaScriptFive modern features in seven lines Runnable
const user = { name: 'Asha', city: 'Pune' };
const { name, city } = user;                        // destructuring (ES2015)
const greet = n => `Hello, ${n} from ${city}!`;   // arrow + template literal (ES2015)
console.log(greet(name));


const scores = [70, 85, 90];
console.log(Math.max(...scores));                   // spread (ES2015)


console.log(user.address?.pin ?? 'no pin');         // ?. and ?? (ES2020)
Expected output
Hello, Asha from Pune!
90
no pin
Opens this example in the full playground

Step-by-step explanation#

  1. Destructuring pulls name and city out of the object in one line.
  2. The arrow function returns a template literal with values inserted by ${…}.
  3. Spread turns the array into separate arguments for Math.max.
  4. user.address is undefined, so ?. stops safely and ?? supplies the fallback.

Real-world use case#

React, Angular, Node.js and every modern library are written in ES2015+ syntax. Reading their docs and source code requires knowing these features.

Common mistakes#

Thinking ES6 is a different language

ES6 is just a version of JavaScript. Old ES5 code still runs; ES6 adds new, nicer ways to write it.

Transpiling everything “just in case”

Converting modern code to ES5 makes bundles bigger and slower. Check your real browser targets first.

Best practices#

  • Write modern syntax by default
  • Check support for brand-new features on caniuse.com or MDN
  • Set a browserslist target so tools only transpile what is needed
  • Follow TC39 proposals to see what is coming

Remember this#

ECMAScript = the recipe. JavaScript = the dish.

ES6 = ES2015. After that, one edition every year: ES2016, ES2017…

Big four of ES6: let/const, arrows, classes, modules.

Practice exercise#

Your task: Rewrite this ES5 code in modern syntax: var a = [1, 2]; var b = a.concat([3]); var msg = "Total items: " + b.length; console.log(msg);

Need a hint?
Use const, spread and a template literal.
Show solution
JavaScript Runnable
const a = [1, 2];
const b = [...a, 3];
console.log(`Total items: ${b.length}`); // Total items: 3
Opens this example in the full playground

Mini quiz#

Introduction to ECMAScript quizMultiple choice Question 1 of 3

ES6 is another name for…

Score so far: 0/0

Want more? Practise all ES6+ MCQs · ES6+ interview questions

My notes#

Saved in this browser.

Progress is saved in this browser. Sign in to sync.