JavaScript Concepts Introduced in ES6

Modern JavaScript looks and feels vastly different than it did a decade ago. ECMAScript 2015 (ES6) introduced language features that transformed how we write clean, expressive code.

1. Block Scoping with let and const Prior to ES6, `var` was function-scoped and hoisted, leading to tricky scope bugs. `let` and `const` introduced true lexical block scoping.

2. Arrow Functions and Lexical this Arrow functions provide a concise syntax and, crucially, do not bind their own `this`, making callback handling intuitive in event-driven UI code.

// Traditional function
const numbers = [1, 2, 3];
const doubled = numbers.map(function(n) {
  return n * 2;

// ES6 Arrow function const doubledES6 = numbers.map(n => n * 2); ```

3. Object & Array Destructuring Destructuring allows extracting properties or items cleanly into variables:

const user = { name: 'Musa', role: 'Frontend Developer', city: 'Brussels' };
const { name, role, city } = user;

Mastering these core principles creates a strong foundation for React, TypeScript, and modern framework architectures.