Refactor code ES5 sang ES6+: destructuring, spread, Map/Set

function formatOrderSummary(user, items, options) {
  options = options || {};
  var taxRate = options.taxRate || 0.1;
  var currency = options.currency || "USD";
  var name = user && user.name ? user.name : "Khách";
  var city = user && user.address && user.address.city ? user.address.city : "N/A";
  var subtotal = 0;
  var lines = "";
  for (var i = 0; i < items.length; i++) {
    subtotal += items[i].price * items[i].qty;
    lines += "- " + items[i].name + " x" + items[i].qty + "\n";
  }
  var tax = subtotal * taxRate;
  var total = subtotal + tax;
  return (
    "Đơn hàng của " + name + " (" + city + ")\n" +
    lines +
    "Tạm tính: " + subtotal + " " + currency + "\n" +
    "Thuế: " + tax + " " + currency + "\n" +
    "Tổng: " + total + " " + currency
  );
}

for (var i = 0; i < 3; i++) {
  // ...
}
console.log("var i sau loop:", i); // 3 — i lộ ra ngoài for

var count = 1;
var count = 2; // redeclare cùng tên: không lỗi
console.log("redeclare var:", count); // 2

for (let j = 0; j < 3; j++) {
  // ...
}
try {
  console.log(j); // j block-scoped, không tồn tại ngoài loop
} catch (err) {
  console.log("let j sau loop:", err.name); // ReferenceError
}

console.log("var trước khai báo:", hoisted); // undefined — var được hoisting
var hoisted = 1;

try {
  console.log(price); // TDZ: price chưa được khởi tạo
  let price = 100;
} catch (err) {
  // message theo V8; Firefox/Safari wording khác
  console.log("let trong TDZ:", err.name + ": " + err.message);
}

const config = { retries: 3 };
config.retries = 5; // mutate thuộc tính: OK
console.log("mutate const object:", config); // { retries: 5 }

const PI = 3.14;
PI = 3.14159; // ❌ TypeError: Assignment to constant variable.

const name = "Alice";
const city = "Hà Nội";
const subtotal = 250000;
const currency = "VND";

// ES5: nối chuỗi bằng + và \n
const oldStr =
  "Đơn của " + name + " (" + city + ")\n" +
  "Tạm tính: " + subtotal + " " + currency;

// ES6: template literal — ${} và xuống dòng thật, không cần \n
const newStr = `Đơn của ${name} (${city})
Tạm tính: ${subtotal} ${currency}`;

console.log("giống nhau?", oldStr === newStr); // true
console.log(newStr);

function safeHtml(strings, ...values) {
  const escape = (s) =>
    String(s)
      .replace(/&/g, "&")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;");
  return strings.reduce(
    (out, str, i) => out + str + (i < values.length ? escape(values[i]) : ""),
    ""
  );
}

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

// tag escape phần ${} nhưng giữ nguyên phần literal
console.log(safeHtml`<p>Bình luận: ${userInput}</p>`);
console.log(`raw: <p>Bình luận: ${userInput}</p>`);

const user = {
  name: "Alice",
  age: 30,
  address: { city: "Hà Nội", zip: "10000" },
};

// object destructuring + rename + default cho field thiếu
const { name, age, role = "user" } = user;
console.log(name, age, role); // Alice 30 user

const { name: userName } = user; // rename khi bóc
console.log("renamed:", userName); // Alice

// array destructuring + rest (teaser cho mục 5)
const [first, second, ...rest] = [90, 85, 70, 60];
console.log("first/second/rest:", first, second, rest); // 90 85 [ 70, 60 ]

// nested
const {
  address: { city },
} = user;
console.log("city:", city); // Hà Nội

const user = { name: "Alice", address: { city: "Hà Nội" } };

function formatUser({ name, address: { city } = {} } = {}) {
  return `${name} - ${city ?? "N/A"}`;
}

console.log(formatUser(user)); // Alice - Hà Nội
console.log(formatUser({ name: "Bob" })); // Bob - N/A (address thiếu -> default {})

const response = { data: undefined }; // API trả thiếu data

try {
  const { items } = response.data; // destructure undefined -> throw
  console.log(items);
} catch (err) {
  console.log(err.name + ": " + err.message);
}

// Fix: chuẩn hoá bằng ?? {} rồi mới bóc
const { items = [] } = response.data ?? {};
console.log("sau fix, items:", items); // []

// ES5: arguments là array-like, không có .reduce
function sumOld() {
  var total = 0;
  for (var i = 0; i < arguments.length; i++) total += arguments[i];
  return total;
}
// ES6: rest -> nums là array thật
function sumNew(...nums) {
  return nums.reduce((a, b) => a + b, 0);
}

console.log("sumOld:", sumOld(1, 2, 3)); // 6
console.log("sumNew:", sumNew(1, 2, 3)); // 6

const a = [1, 2];
const b = [3, 4];
console.log("concat:", [...a, ...b]); // [ 1, 2, 3, 4 ]

console.log("Math.max:", Math.max(...[5, 1, 9, 3])); // 9

// object spread thay Object.assign({}, defaults, options)
const defaults = { currency: "USD", taxRate: 0.1 };
const options = { taxRate: 0.2 };
console.log("merge:", { ...defaults, ...options }); // { currency: 'USD', taxRate: 0.2 }

const original = {
  name: "Alice",
  address: { city: "Hà Nội" }, // nested object
};

const copy = { ...original }; // shallow copy
copy.name = "Bob"; // đổi primitive tầng ngoài: original an toàn
copy.address.city = "Đà Nẵng"; // đổi nested: original đổi theo!

console.log("copy.name:", copy.name); // Bob
console.log("original.name:", original.name); // Alice
console.log("original.address.city:", original.address.city); // Đà Nẵng (leak!)
console.log("cùng reference?", copy.address === original.address); // true

function createUser(name, role) {
  return {
    name, // shorthand thay name: name
    role,
    greet() {
      // method shorthand thay greet: function () {}
      return `${this.name} (${this.role})`;
    },
  };
}

const u = createUser("Alice", "admin");
console.log("user:", u);
console.log("greet:", u.greet()); // Alice (admin)

// computed property: build key động ngay trong literal
function buildFilter(field, value) {
  return { [field]: value };
}
console.log("filter:", buildFilter("status", "active")); // { status: 'active' }

const users = [
  { name: "Alice", address: { city: "Hà Nội" }, greet: () => "hi" },
  { name: "Bob" }, // không có address, không có greet
];

for (const user of users) {
  // thay user && user.address && user.address.city
  console.log(user.name, "->", user.address?.city ?? "N/A");
}

// ?.[] cho key động
const key = "city";
console.log("dynamic có:", users[0].address?.[key]); // Hà Nội
console.log("dynamic thiếu:", users[1].address?.[key]); // undefined

// ?.() cho method có thể không tồn tại
console.log("greet có:", users[0].greet?.()); // hi
console.log("greet thiếu:", users[1].greet?.()); // undefined

function calcTotal(subtotal, taxRate) {
  const rateOld = taxRate || 0.1; // BUG: taxRate = 0 bị nuốt -> 0.1
  const rateNew = taxRate ?? 0.1; // đúng: 0 được giữ
  return {
    withOr: subtotal + subtotal * rateOld,
    withNullish: subtotal + subtotal * rateNew,
  };
}

// Đơn miễn thuế: taxRate = 0 hợp lệ
console.log("taxRate = 0:", calcTotal(100, 0));
// { withOr: 110, withNullish: 100 } — || cộng nhầm 10 tiền thuế

// Không truyền taxRate: cả hai fallback 0.1
console.log("taxRate = undefined:", calcTotal(100, undefined));
// { withOr: 110, withNullish: 110 }

function applyDefaults(options) {
  const withOr = { ...options };
  withOr.retries ||= 3; // retries = 0 (falsy) bị gán đè thành 3 — SAI
  withOr.timeout ||= 5000;

  const withNullish = { ...options };
  withNullish.retries ??= 3; // retries = 0 giữ nguyên — đúng
  withNullish.timeout ??= 5000;

  return { withOr, withNullish };
}

// retries = 0 nghĩa là "không retry" — giá trị hợp lệ
console.log(applyDefaults({ retries: 0 }));

// &&= chỉ gán khi biến hiện tại truthy
const flags = { debug: true };
flags.debug &&= false; // debug đang true -> gán false
console.log("debug &&= false:", flags.debug); // false

const keyA = { id: 1 };
const keyB = { id: 2 };

// object: hai object key khác nhau nhưng đều stringify thành "[object Object]"
const obj = {};
obj[keyA] = "A";
obj[keyB] = "B"; // ghi đè "A" vì cùng một string key
console.log("object key collision:", obj); // { '[object Object]': 'B' }

// Map: key giữ nguyên identity, không va nhau
const map = new Map();
map.set(keyA, "A");
map.set(keyB, "B");
console.log("map.get(keyA):", map.get(keyA)); // A
console.log("map.get(keyB):", map.get(keyB)); // B
console.log("map.size:", map.size); // 2

// duyệt theo insertion order, không tự sort
const order = new Map();
order.set("banana", 1);
order.set("apple", 2);
order.set("cherry", 3);
console.log("insertion order:", [...order.keys()]); // [ 'banana', 'apple', 'cherry' ]

for (const [k, v] of order) {
  console.log(`${k} = ${v}`);
}

const tags = ["js", "ts", "js", "css", "ts", "js"];

// ES5: dedup thủ công bằng indexOf
const uniqueOld = [];
for (var i = 0; i < tags.length; i++) {
  if (uniqueOld.indexOf(tags[i]) === -1) uniqueOld.push(tags[i]);
}
console.log("dedup thủ công:", uniqueOld); // [ 'js', 'ts', 'css' ]

// ES6: Set bỏ trùng, spread về lại array
console.log("dedup bằng Set:", [...new Set(tags)]); // [ 'js', 'ts', 'css' ]

// membership: .has() thay array.includes() gọi lặp lại
const allowed = new Set(["admin", "editor"]);
console.log("has admin:", allowed.has("admin")); // true
console.log("has guest:", allowed.has("guest")); // false

// ES5 legacy (dán lại từ mục 1 để so trực tiếp)
function formatOrderSummaryOld(user, items, options) {
  options = options || {};
  var taxRate = options.taxRate || 0.1;
  var currency = options.currency || "USD";
  var name = user && user.name ? user.name : "Khách";
  var city = user && user.address && user.address.city ? user.address.city : "N/A";
  var subtotal = 0;
  var lines = "";
  for (var i = 0; i < items.length; i++) {
    subtotal += items[i].price * items[i].qty;
    lines += "- " + items[i].name + " x" + items[i].qty + "\n";
  }
  var tax = subtotal * taxRate;
  var total = subtotal + tax;
  return (
    "Đơn hàng của " + name + " (" + city + ")\n" +
    lines +
    "Tạm tính: " + subtotal + " " + currency + "\n" +
    "Thuế: " + tax + " " + currency + "\n" +
    "Tổng: " + total + " " + currency
  );
}

// ES6+ modern
function formatOrderSummaryNew(user, items, { taxRate = 0.1, currency = "USD" } = {}) {
  const name = user?.name ?? "Khách";
  const city = user?.address?.city ?? "N/A";
  const subtotal = items.reduce((sum, { price, qty }) => sum + price * qty, 0);
  const lines = items.map(({ name, qty }) => `- ${name} x${qty}`).join("\n");
  const tax = subtotal * taxRate;
  const total = subtotal + tax;
  return `Đơn hàng của ${name} (${city})
${lines}
Tạm tính: ${subtotal} ${currency}
Thuế: ${tax} ${currency}
Tổng: ${total} ${currency}`;
}

const user = { name: "Alice", address: { city: "Hà Nội" } };
const items = [
  { name: "Cà phê", price: 45000, qty: 2 },
  { name: "Bánh mì", price: 25000, qty: 1 },
];

console.log(formatOrderSummaryNew(user, items));
console.log("---");
console.log(
  "legacy === modern?",
  formatOrderSummaryOld(user, items) === formatOrderSummaryNew(user, items)
);