01
1. What Makes JavaScript "Modern"?
ES6 (ECMAScript 2015) was the biggest update to JavaScript ever. It introduced let/const, arrow functions, template literals, destructuring, modules, and more — transforming JavaScript from a quirky scripting language into a powerful, professional programming language.
02
2. let, const and Modern Variable Practices
| Keyword | Scope | Reassignable? | Use When |
|---|---|---|---|
const | Block | ❌ No | Default choice — values that don't change |
let | Block | ✅ Yes | Counters, accumulators, reassignable state |
var | Function | ✅ Yes | ⚠️ Legacy only — avoid in modern code |
03
3. Template Literals
const name = "Rahul";
const greeting = `Hello, ${name}! Welcome to Pathubs.`;
// Multi-line strings (no \n needed):
const html = `
<div class="card">
<h2>${name}</h2>
</div>
`;
const greeting = `Hello, ${name}! Welcome to Pathubs.`;
// Multi-line strings (no \n needed):
const html = `
<div class="card">
<h2>${name}</h2>
</div>
`;
04
4. Destructuring
Object Destructuring
const { name, email } = user;
Array Destructuring
const [first, second] = colors;
05
5. Spread and Rest Operators
Spread (...) — Expands
const merged = [...arr1, ...arr2];
const clone = { ...obj };
const clone = { ...obj };
Rest (...) — Collects
function sum(...nums) {
return nums.reduce((a, b) => a + b);
}
return nums.reduce((a, b) => a + b);
}
06
6. Default Parameters
function greet(name = "Guest", role = "Learner") {
return `Welcome, ${name}! Role: ${role}`;
}
greet(); // "Welcome, Guest! Role: Learner"
return `Welcome, ${name}! Role: ${role}`;
}
greet(); // "Welcome, Guest! Role: Learner"
07
7. Enhanced Object Literals
const name = "Rahul";
const age = 22;
// Shorthand property names + computed keys
const user = { name, age, [`score_${age}`]: 100 };
const age = 22;
// Shorthand property names + computed keys
const user = { name, age, [`score_${age}`]: 100 };
08
8. Optional Chaining (?.)
// Without optional chaining (crashes if address is undefined):
const city = user && user.address && user.address.city;
// With optional chaining (safe!):
const city = user?.address?.city; // undefined if any link is null
const city = user && user.address && user.address.city;
// With optional chaining (safe!):
const city = user?.address?.city; // undefined if any link is null
09
9. Nullish Coalescing (??)
const count = 0;
count || 10; // 10 ❌ (treats 0 as falsy)
count ?? 10; // 0 ✅ (only null/undefined triggers fallback)
count || 10; // 10 ❌ (treats 0 as falsy)
count ?? 10; // 0 ✅ (only null/undefined triggers fallback)
💡 Use
?? when 0, '', or false are valid values that should NOT be replaced by the fallback.10
10. Short-Circuiting (&& and ||)
// AND short-circuit: execute right side only if left is truthy
isLoggedIn && showDashboard();
// OR short-circuit: use fallback if left is falsy
const theme = userTheme || "dark";
isLoggedIn && showDashboard();
// OR short-circuit: use fallback if left is falsy
const theme = userTheme || "dark";
11
11. Modern Array Methods
| Method | Returns | Purpose |
|---|---|---|
map() | New array | Transform every element |
filter() | New array | Select elements matching condition |
reduce() | Single value | Accumulate into one result |
find() | Single element | First element matching condition |
some() | Boolean | At least one matches? |
every() | Boolean | All elements match? |
12
12. Modern JavaScript Modules (import/export)
// math.js — Named exports
export function add(a, b) { return a + b; }
export const PI = 3.14159;
// app.js — Named imports
import { add, PI } from './math.js';
// Default export / import
export default function multiply(a, b) { return a * b; }
import multiply from './math.js';
export function add(a, b) { return a + b; }
export const PI = 3.14159;
// app.js — Named imports
import { add, PI } from './math.js';
// Default export / import
export default function multiply(a, b) { return a * b; }
import multiply from './math.js';
13
13. Modern Classes — Basic Introduction
class User {
constructor(name, email) {
this.name = name;
this.email = email;
}
greet() {
return `Hi, I'm ${this.name}!`;
}
}
constructor(name, email) {
this.name = name;
this.email = email;
}
greet() {
return `Hi, I'm ${this.name}!`;
}
}
14
14. Modern Error Handling
try {
const data = JSON.parse(invalidJson);
} catch (error) {
console.error("Parse failed:", error.message);
} finally {
console.log("Cleanup complete.");
}
const data = JSON.parse(invalidJson);
} catch (error) {
console.error("Parse failed:", error.message);
} finally {
console.log("Cleanup complete.");
}
15
15. Writing Cleaner Modern JavaScript
- Use
constby default. Only useletwhen you need to reassign. - Prefer arrow functions for short callbacks:
arr.map(x => x * 2). - Destructure early — extract what you need at the top of functions.
- Use optional chaining instead of nested
ifchecks for deep property access. - Use
??over||when 0 or empty string are valid values.
16
16. Common Modern JavaScript Mistakes
- Using
varin modern code: Always useconst/letfor block-scoped safety. - Mutating arrays with
map():map()should return a value, not push to external arrays. - Confusing spread and rest: Spread expands
[...arr], rest collects(...args)— same syntax, opposite behavior. - Using
||when??is needed:0 || 10gives 10, but0 ?? 10correctly gives 0.
17
17. Practical Example: Refactoring Old JavaScript
Use the interactive Refactoring Lab below to see real side-by-side comparisons of legacy vs modern JavaScript — and understand exactly what changed and why.
18
18. What to Learn Next
Now that you write clean modern JavaScript, you're ready for frontend frameworks like React.js, build tools like Vite, and advanced patterns like TypeScript and state management.