Best Practices

1 min read | JavaScript Tutorial

⭐

Want the full learning experience?

Get structured courses, certificates, projects, and instructor support with LabsICT Pro.

Explore Pro Courses

Performance Tips

Avoid blocking the main thread. Use debouncing for frequent events. Minimize DOM access by caching references.

const list = document.querySelector("#list");
const fragment = document.createDocumentFragment();

for (let i = 0; i < 100; i++) {
  const li = document.createElement("li");
  li.textContent = "Item " + i;
  fragment.appendChild(li);
}

list.appendChild(fragment);

function debounce(fn, delay) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}

Security Best Practices

Never trust user input. Use textContent instead of innerHTML to prevent XSS. Validate and sanitize all external data.

function displayMessage(msg) {
  const div = document.querySelector("#output");
  div.textContent = msg;
}

function sanitize(str) {
  const el = document.createElement("div");
  el.textContent = str;
  return el.innerHTML;
}

const userInput = "<script>alert('xss')</script>";
displayMessage(sanitize(userInput));

Readability & Maintainability

Write small, pure functions. Use descriptive names. Avoid deep nesting. Favor early returns.

function isValidEmail(email) {
  if (!email) return false;
  if (!email.includes("@")) return false;
  const parts = email.split("@");
  return parts[0].length > 0 && parts[1].includes(".");
}

function processUser(user) {
  if (!user || !user.id) return null;
  const name = user.name || "Anonymous";
  return { id: user.id, displayName: name };
}

Concepts Explained