JavaScript mein 2015 ek kranti aayi thi — naam tha ES6 (ECMAScript 2015)! Iske baad se JavaScript ne har saal naye features dena shuru kiye. Chalo samjhein yeh “modern JS” kya hai aur aage kya aaya:
ES6: 5 Game-Changing Features
let
aurconst
:
var
ki problems fix karne aaye (hoisting, scope issues).const
se constants banaye:javascript const PI = 3.14; // Ab change nahi hoga! let count = 0; // Block-scoped variable
- Arrow Functions (
=>
)
- Short syntax +
this
ki tension khatam:javascript // Purana tarika: function add(a, b) { return a + b; } // ES6: const add = (a, b) => a + b;
- Classes
- OOP ko simple banaya:
javascript class Dog { constructor(name) { this.name = name; } bark() { console.log('Bhow!'); } } const tommy = new Dog('Tommy');
- Template Literals
- Dynamic strings aasaan hue:
javascript const user = 'Amit'; console.log(`Hello ${user}!`); // Backticks (``) use karo
- Destructuring
- Objects/Arrays se data nikalo seconds mein:
javascript const [x, y] = [10, 20]; // x=10, y=20 const { name } = { name: 'Riya', age: 25 }; // name='Riya'
ES7/ES8: Next Level Features
Version | Feature | Example | Use Case |
---|---|---|---|
ES7 | Array.includes() | [1,2].includes(1) // true | Array mein value check |
ES7 | ** (Exponent) | 2**3 // 8 | Math calculations |
ES8 | async/await | const data = await fetch() | Asynchronous code |
ES8 | Object.values() | Object.values({a:1}) // [1] | Object se values nikalna |
ES9 to ES12: Sab Kuch Simple!
- ES9: Spread Operator (
...
)
- Objects ko easily merge karo:
javascript const obj1 = { a: 1 }; const obj2 = { ...obj1, b: 2 }; // {a:1, b:2}
- ES10:
flat()
Arrays
- Nested arrays ko seedha karo:
javascript [1, [2,3]].flat() // [1,2,3]
- ES11: Nullish Coalescing (
??
)
0
,''
ko bachate hue default values set karo:javascript const price = userInput ?? 100; // userInput=null/undefined ho toh 100
- ES12: Logical Assignment
- Conditions ke saath assignment:
javascript let x = 0; x ||= 5; // x=5 (if x falsy)
Kyon Important Hai ES6+?
- Code Kam, Kaam Zyada:
- 10 lines ka code 2 lines mein!
- Readability Badhao:
async/await
> Callback Hell 😇
- Industry Standard:
- React/Vue/Angular sab ES6 use karte hain.
Kaise Seekhe ES6+?
- Free Resources:
- ES6 Cheatsheet (PDF download karo)
- YouTube: Akshay Saini’s “Namaste JavaScript”
- Practice Platforms:
- LeetCode (ES6 problems)
- CodePen (Live testing)
- Babel:
- Purane browsers ko modern code samjhaane ka jadu!
npm install @babel/core @babel/preset-env
Future: ECMAScript 2023 (ES14)
findLast()
: Array ke end se search karo.#
Private Class Fields:
class Wallet {
#balance = 0; // Private! Bahar access nahi
}
Final Tip: “Start Using ES6 Today!”
// Purana JS (Avoid!)
var name = 'Old';
function hello() { return 'Hi ' + name; }
// ES6 (Yeh karo!)
const name = 'Modern';
const hello = () => `Hi ${name}`;
Browser Support?
- Chrome/Firefox/Edge: 95%+ features supported.
- Internet Explorer? Bhool jao! 🚫
Aaj se shuru karo:
let
/const
use karna.- Arrow functions try karo.
- Ek class banao!
Kal tak aapka code “zamaane se aage” hoga! 🔥