This lesson explains Modern JS Best Practices with clear examples, use cases, and best practices so you can use modern JavaScript confidently in real projects.
ES6 best practices help developers write modern, clean, readable, maintainable, and scalable JavaScript. These practices are useful for frontend applications, backend Node.js projects, React apps, API integrations, interviews, and real-world enterprise development.
const by default.const when the variable reference should not be
reassigned.
const appName = "Dashboard";let only when reassignment is needed.let for counters, loops, and values that change.
let count = 0;
count += 1;var.var is function-scoped and can create hoisting confusion.
Prefer let and const.
let total = 100;
const tax = 8;const numbers = [1, 2, 3];
const doubled =
numbers.map((number) => number * 2);this.
const user =
{
name: "Alice",
showName() {
return this.name;
}
};const name = "John";
const message =
`Welcome, ${name}!`;const user =
{
name: "Alice",
role: "Admin"
};
const { name, role } =
user;const colors =
["red", "green", "blue"];
const [firstColor, secondColor] =
colors;function greet(name = "Guest") {
return `Hello ${name}`;
}arguments.function sum(...numbers) {
return numbers.reduce(
(total, number) => total + number,
0
);
}const items = ["A", "B"];
const copy =
[...items];const frontend =
["HTML", "CSS"];
const advanced =
["JavaScript", "React"];
const skills =
[...frontend, ...advanced];const user =
{
name: "Alice",
active: true
};
const updatedUser =
{
...user,
active: false
};const name = "Alice";
const role = "Admin";
const user =
{
name,
role
};const calculator =
{
add(a, b) {
return a + b;
}
};const field = "email";
const formData =
{
[field]: "user@example.com"
};map() for transformations.map() when every item should become a new value.
const prices =
[10, 20, 30];
const withTax =
prices.map((price) => price * 1.08);filter() for selecting items.filter() when only matching items should remain.
const users =
[
{ name: "Alice", active: true },
{ name: "Bob", active: false }
];
const activeUsers =
users.filter((user) => user.active);reduce() for totals and summaries.reduce() is useful when an array becomes one result.
const total =
[10, 20, 30].reduce(
(sum, value) => sum + value,
0
);find() for one matching item.find() instead of filter() when you need
only one result.
const product =
products.find(
(item) => item.id === 101
);some() for at-least-one checks.some() returns true when at least one item matches.
const hasError =
fields.some((field) => field.error);every() for all-items checks.every() returns true only when all items pass.
const isFormValid =
fields.every((field) => field.valid);includes() for simple value checks.includes() is cleaner than checking index positions.
const roles =
["admin", "editor"];
const canEdit =
roles.includes("editor");const updatedItems =
items.map((item) => {
if (item.id === 1) {
return {
...item,
selected: true
};
}
return item;
});filter() instead of directly changing the array.
const remainingUsers =
users.filter(
(user) => user.id !== removedUserId
);export function formatPrice(price) {
return "$" + price.toFixed(2);
}export const appVersion = "1.0.0";
export function logMessage(message) {
console.log(message);
}export default function Button() {
return "Button";
}class UserService {
constructor(apiUrl) {
this.apiUrl = apiUrl;
}
getUsers() {
return fetch(this.apiUrl);
}
}const canLog =
{
log(message) {
console.log(message);
}
};fetch("/api/users")
.then((response) => response.json())
.then((users) => console.log(users))
.catch((error) => console.error(error));async function loadUsers() {
const response =
await fetch("/api/users");
return response.json();
}try catch around awaited operations.
async function loadData() {
try {
const response =
await fetch("/api/data");
return await response.json();
} catch (error) {
console.error(error.message);
return null;
}
}Promise.all() for parallel requests.const [users, products] =
await Promise.all(
[
fetch("/api/users").then((res) => res.json()),
fetch("/api/products").then((res) => res.json())
]
);Promise.allSettled() for optional tasks.const results =
await Promise.allSettled(
[
fetch("/api/news"),
fetch("/api/weather")
]
);forEach().forEach() does not wait for async callbacks.
for (const id of ids) {
await loadUser(id);
}for...of for sequential async tasks.for (const file of files) {
await uploadFile(file);
}for await...of for async iterables.for await (const chunk of stream) {
console.log(chunk);
}const city =
user?.address?.city;?? when only null or
undefined should use the fallback.
const pageSize =
settings.pageSize ?? 20;=== and !== to avoid type conversion
surprises.
if (status === "active") {
showDashboard();
}const activeUsers =
users.filter((user) => user.active);function calculateTax(price, rate) {
return price * rate;
}function saveUser(user) {
if (!user) {
return null;
}
return api.save(user);
}function createUser(options) {
const { name, email, role } =
options;
return {
name,
email,
role
};
}Set removes duplicate values easily.
const tags =
["js", "css", "js"];
const uniqueTags =
[...new Set(tags)];Map is useful when keys are dynamic or not simple strings.
const cache =
new Map();
cache.set("users", []);
const users =
cache.get("users");const names =
users.map((user) => user.name);// Retry once because this API may fail during cold start
await retryOnce(loadReport);const userName =
formatUserName(user);const, use let only when reassignment is needed,
and avoid var.
map(), filter(),
reduce(), find(), some(), and
every() for readable data operations.
Pro Tip
In interviews, explain ES6 best practices with intent: use
const for safety, arrow functions for callbacks,
destructuring for readability, spread for immutable updates, array methods
for data transformation, and async await for clean asynchronous code.