JavaScript ES6+ CheatSheet (All Modern Features)

If you only save one page for JavaScript ES6+ features — make it this one.

📚 Official Docs (MDN)

• 🔗 MDN Web Docs (Main JS Reference) https://developer.mozilla.org/en-US/docs/Web/JavaScript

🎯 Quick Mental Model

• ... → spread or rest (depends on usage)
• ?. → safe access
• ?? → null/undefined fallback
• => → shorter functions
• async/await → cleaner promises

⚡ Pro Tips

1. Prefer const by default

• Use const unless reassignment is needed
• Prevents accidental bugs

const user = { name: "Praveen" } // ✅

2. Use destructuring to avoid repetitive code

// ❌
const name = user.name

// ✅
const { name } = user

3. Combine destructuring + default values

const { role = "guest" } = user

4. Use arrow functions for short logic only

• Avoid in objects/classes when this matters

const add = (a, b) => a + b

5. Use ?? instead of || for safer defaults

0 || 10   // ❌ → 10 (wrong)
0 ?? 10   // ✅ → 0

6. Chain optional properties safely

user?.address?.city

7. Spread is cleaner than mutation

// ❌ mutation
arr.push(4)

// ✅ immutable
const newArr = [...arr, 4]

8. Use Map when keys are dynamic

const map = new Map()
map.set(obj, "value") // object as key

9. Use Set to remove duplicates

const unique = [...new Set([1,1,2])]

10. Prefer for...of over forEach when needed

• Works with break, continue, await

for (const item of arr) {
  if (item === 2) break
}

11. Always handle async errors

try {
  const data = await fetchData()
} catch (e) {
  console.log(e)
}

12. Use template literals for readability

`User: ${name}, Age: ${age}`

13. Use shorthand object syntax

const name = "JS"
const obj = { name } // cleaner

14. Avoid deep nesting → use early returns

if (!user) return
if (!user.name) return

15. Dynamic keys = powerful

const key = "score"
const obj = { [key]: 100 }

🚀 Golden Rule

👉 Write modern JS like this:

• Immutable
• Declarative
• Readable
• Safe (optional chaining + nullish)