1. Arrow Functions
Cleaner, shorter syntax for functions:
javascript
// Old way
function add(a, b) { return a + b; }
// Arrow function
const add = (a, b) => a + b;2. Destructuring
Extract values from objects and arrays easily:
javascript
const user = { name: "Ali", age: 22, city: "Karachi" };
const { name, city } = user;
const [first, second, ...rest] = [1, 2, 3, 4, 5];3. Template Literals
No more ugly string concatenation:
javascript
const greeting = `Hello ${name}, welcome to Karachi!`;4. Spread & Rest Operators
javascript
// Spread — expand
const merged = { ...obj1, ...obj2 };
const combined = [...arr1, ...arr2];
// Rest — collect
const sum = (...nums) => nums.reduce((a, b) => a + b, 0);5. Optional Chaining ?.
Safely access nested properties:
javascript
const city = user?.address?.city ?? "Unknown";6. async / await
Write async code that reads like sync code:
javascript
async function fetchUser(id) {
try {
const res = await fetch(`/api/users/${id}`);
const data = await res.json();
return data;
} catch (err) {
console.error("Failed:", err.message);
}
}7. Array Methods: map, filter, reduce
javascript
const scores = [45, 78, 92, 55, 88];
const passed = scores.filter(s => s >= 50);
const doubled = scores.map(s => s * 2);
const total = scores.reduce((sum, s) => sum + s, 0);8. Modules (import / export)
javascript
// math.js
export const add = (a, b) => a + b;
export default function multiply(a, b) { return a * b; }
// main.js
import multiply, { add } from "./math.js";9. Promise.all
Run multiple async operations in parallel:
javascript
const [users, posts, courses] = await Promise.all([
fetch("/api/users").then(r => r.json()),
fetch("/api/posts").then(r => r.json()),
fetch("/api/courses").then(r => r.json()),
]);10. Nullish Coalescing ??
javascript
const name = user.name ?? "Anonymous"; // only null/undefined
const port = process.env.PORT ?? 3000;Master these 10 features and you will write JavaScript like a professional.
Published by Sohail Code Academy
Share