Modern JavaScript features: arrow functions, destructuring, modules, and more
Shorter function syntax
const add = (a, b) => a + b;
Parentheses optional for single parameter
const square = x => x * x;
Empty parentheses required
const getRandom = () => Math.random();
Return object with parentheses
const makeObject = (x, y) => ({ x, y });
Extract values from arrays
const [first, second, ...rest] = [1, 2, 3, 4, 5];
Extract properties from objects
const { name, age, ...otherProps } = user;
Provide fallback values
const { name = "Anonymous", age = 0 } = user;
Rename destructured properties
const { name: userName, age: userAge } = user;
Embed expressions in strings
const message = `Hello, ${name}!`;
Create strings with line breaks
const html = `
<div>
<h1>${title}</h1>
<p>${content}</p>
</div>`;
Process template literals with functions
const result = tag`Hello ${name}!`;
Expand arrays and objects
const combined = [...array1, ...array2];
Collect multiple arguments
const sum = (...numbers) => numbers.reduce((a, b) => a + b, 0);
Merge and clone objects
const newObj = { ...obj1, ...obj2, newProp: "value" };
Define classes with constructor
class Person {
constructor(name) {
this.name = name;
}
greet() {
return `Hello, ${this.name}!`;
}
}
Extend classes with super
class Employee extends Person {
constructor(name, role) {
super(name);
this.role = role;
}
}
Class methods that don't need instance
static create(name) { return new Person(name); }
Export specific functions or variables
export const add = (a, b) => a + b;
Export main function or class
export default class Calculator {}
Import modules and specific exports
import { add, subtract } from "./math.js";
Import all exports as namespace
import * as math from "./math.js";
Create promises for async operations
const promise = new Promise((resolve, reject) => {
// async operation
resolve(result);
});
Function that returns a promise
async function fetchData() { return await api.get("/data"); }
Wait for promise to resolve
const data = await fetchData();
Wait for multiple promises
const results = await Promise.all([promise1, promise2]);
Modern array manipulation
// Map
const doubled = numbers.map(n => n * 2);
// Filter
const evens = numbers.filter(n => n % 2 === 0);
// Reduce
const sum = numbers.reduce((acc, n) => acc + n, 0);
// Find
const firstEven = numbers.find(n => n % 2 === 0);
// Some/Every
const hasEven = numbers.some(n => n % 2 === 0);
const allPositive = numbers.every(n => n > 0);
Modern object manipulation
// Object.keys
const keys = Object.keys(obj);
// Object.values
const values = Object.values(obj);
// Object.entries
const entries = Object.entries(obj);
// Object.assign
const merged = Object.assign({}, obj1, obj2);
// Object spread
const cloned = { ...obj };
Safe property access
// Safe property access
const name = user?.profile?.name;
// Safe method call
const result = user?.getData?.();
// Nullish coalescing
const value = data ?? defaultValue;
Use arrow functions for short, single-expression functions
Prefer const
and let
over var
Use destructuring for cleaner code and default values
Use template literals for string interpolation and multi-line strings
Prefer async/await over raw promises for better readability