Modern JavaScript (ES6+)

What does “ES6+” mean?

JavaScript gets new features over time, released as numbered versions. ES6 is short for ECMAScript 2015 — a big 2015 update that added many of the handy tools we use today (ECMAScript is just the official name for the JavaScript standard). The little + means "ES6 and everything added since". So "modern JavaScript (ES6+)" simply means the newer, nicer way of writing JS — nothing scary, just shortcuts you will love.

Destructuring — unpack values

Pull values out of arrays and objects into variables in one line.

<script>
  const user = { name: "Asha", age: 22, city: "Bengaluru" };
  const { name, city } = user;     // unpack object
  document.write(name + " from " + city + "<br>");

  const colors = ["red", "green", "blue"];
  const [first, second] = colors;  // unpack array
  document.write(first + ", " + second);
</script>

const { name, city } = user reaches into the object and pulls those two properties into their own variables in one line (we ignored age). For arrays, const [first, second] = colors pulls items out by position — first gets index 0 ("red"), second gets index 1 ("green").

Spread — copy and combine

The spread operator ... copies or merges arrays and objects.

<script>
  const a = [1, 2, 3];
  const b = [...a, 4, 5];          // copy a, then add more
  document.write(b.join(", ") + "<br>");

  const base = { role: "student" };
  const asha = { ...base, name: "Asha" };  // merge objects
  document.write(asha.name + " is a " + asha.role);
</script>

[...a, 4, 5] means "pour all of a in here, then add 4 and 5", giving a new array [1, 2, 3, 4, 5]. The same dots work on objects: { ...base, name: "Asha" } copies everything from base (the role) and adds a name, building a new merged object.