Modern JavaScript Best Practices

An interactive comparison between legacy code and modern ES6+ clean code.

1. Variable Declaration

❌ Legacy (Avoid)

// 'var' causes hoisting and scope issues
var name = "John";
var name = "Doe"; // No error thrown!

for (var i = 0; i < 5; i++) {
  // i leaks out of this block
}

✅ Modern (Use const/let)

// Default to 'const', use 'let' if it changes
const name = "John";
// const name = "Doe"; // Error! Safe.

for (let i = 0; i < 5; i++) {
  // i is securely block-scoped
}

2. String Concatenation

❌ Legacy (Avoid)

const user = "Alice";
const age = 25;

// Messy quotes and plus signs
const message = "Hello, " + user + "!\n" +
                "You are " + age + " years old.";

✅ Modern (Template Literals)

const user = "Alice";
const age = 25;

// Clean, readable, supports multi-line
const message = `Hello, ${user}!
You are ${age} years old.`;

3. Object Destructuring

❌ Legacy (Avoid)

const person = {
  first: "Bob",
  last: "Smith",
  city: "NY"
};

// Repetitive property access
const first = person.first;
const last = person.last;
const city = person.city;

✅ Modern (Destructuring)

const person = {
  first: "Bob",
  last: "Smith",
  city: "NY"
};

// Extract variables in one single line
const { first, last, city } = person;