Variables and Equality — the two golden rules

// ✓ const by default, let when it must change, NEVER var
const siteName = "CodeKaFunda";
let count = 0;
var oldStyle = "avoid";                // ✗

// ✓ Always strict equality
if (age === 18) { }                    // ✓
if (age == 18) { }                     // ✗ type coercion surprises

// ✓ Declare in the smallest scope that works
function calc() {
    const total = 100;                 // local, not global
}

Meaningful Names

// ✗ Meaningless
let d = 5;
let arr = [];
function proc(x) { }

// ✓ Self-documenting
let daysRemaining = 5;
let studentNames = [];
function calculateTotalPrice(items) { }

// Booleans read like questions:
let isLoggedIn = true;
let hasPermission = false;

// Functions start with a verb:
function getUserById(id) { }
function validateEmail(email) { }

Small, Focused Functions

// ✗ One function doing four things
function handleForm() {
    // reads inputs, validates, formats, sends, updates DOM...  60 lines
}

// ✓ Each function does ONE thing
function getFormData() { }
function validateData(data) { }
function saveData(data) { }
function showSuccess() { }

function handleForm() {                 // reads like a summary
    const data = getFormData();
    if (!validateData(data)) return;    // guard clause
    saveData(data);
    showSuccess();
}

Defensive DOM Code

// ✗ Crashes if the element isn't found
document.querySelector("#btn").addEventListener("click", handler);

// ✓ Check first
const btn = document.querySelector("#btn");
if (btn) {
    btn.addEventListener("click", handler);
}

// ✓ Cache selections instead of re-querying in a loop
const list = document.querySelector("#list");     // once, outside
items.forEach(item => list.appendChild(makeItem(item)));

// ✓ Safe by default: textContent for anything a user typed
el.textContent = userInput;        // not innerHTML

Common Mistakes to Avoid

• Forgetting Number() on input values — .value is always a string, so "3" + 5 gives "35".
• Forgetting e.preventDefault() in a form submit handler — the page reloads and your code never runs.
• Calling instead of passing a callback: addEventListener("click", fn()) — drop the parentheses.
• Using = instead of === in an if — it assigns and is usually truthy.
• Assuming async code runs in order — fetch results arrive later; use await.
• Polluting the global scope — declare variables inside functions where possible.
• Leaving console.log in production — clean them out before shipping.

Exam Corner