console.log(a); // undefined ← var được hoisted VÀ khởi tạo = undefined
var a = 5;

console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 10; // Khoảng cách từ đầu block đến dòng này gọi là TDZ

// Mutation: React không nhận ra thay đổi
user.age = 26;
setUser(user); // Cùng reference → không re-render!

// Tạo bản sao mới: React re-render
setUser({ ...user, age: 26 }); // Khác reference → re-render!

// Mutation
items.push(newItem);

// Immutability
setItems([...items, newItem]); // Thêm phần tử
setItems(items.filter((i) => i.id !== deleteId)); // Xóa phần tử

const user = {
  name: 'Nam',
  address: { city: 'Hà Nội', district: 'Cầu Giấy' }
};

// Bug: address vẫn cùng reference!
const newUser = { ...user, name: 'Lan' };
newUser.address.city = 'Sài Gòn';

console.log(user.address.city); // "Sài Gòn" ← BUG! user gốc bị thay đổi!

// Deep immutable update
const newUser = {
  ...user,
  address: { ...user.address, city: 'Sài Gòn' }
};

console.log(user.address.city); // "Hà Nội" ← Gốc không bị ảnh hưởng!

5 == '5';      // true
// Cơ chế: JS chuyển "5" thành 5. Sau đó so sánh 5 == 5.

'10' == 5;     // false
1 == true;     // true
// Cơ chế: true chuyển thành 1. So sánh 1 == 1.

0 == false;    // true
// Cơ chế: false chuyển thành 0. So sánh 0 == 0.

'1' == true;   // true
// Cơ chế phức tạp:
// 1. true -> 1
// 2. "1" (string) vs 1 (number) -> "1" chuyển thành 1
// 3. 1 == 1 -> true

'' == false;   // true (cả hai ép về 0)
'0' == false;  // true ("0" → 0, false → 0)
'' == '0';     // false (cùng kiểu string, so sánh giá trị)

const person = { kind: 'human' };
const student = Object.create(person);
student.name = 'Sydexa';

console.log(student.kind);                  // "human" (lấy từ prototype)
console.log(student.__proto__ === person);   // true

const a = 5;

a.toString(); // "5"

const myMap = new Map();
// Hoặc có thể khởi tạo sẵn dữ liệu
const userRoles = new Map([
  ['admin', 1],
  ['editor', 2],
]);

// Function declaration
function greet(name) {
  return `Xin chào ${name}`;
}

// Arrow function (ES6)
const greet = (name) => `Xin chào ${name}`;

// onClick nhận callback
<button onClick={() => setCount(count + 1)}>Click</button>

// useEffect nhận callback
useEffect(() => {
  fetchData();
}, []);

// .map() nhận callback
{users.map((user) => <UserCard key={user.id} user={user} />)}

// Case 1: Gọi trực tiếp → this = window (strict mode: undefined)
function show() {
  console.log(this);
}
show(); // Window

// Case 2: Gọi từ object → this = object trước dấu chấm
const user = {
  name: 'Nam',
  sayHi() {
    console.log(this.name);
  },
};
user.sayHi(); // "Nam"
const f = user.sayHi;
f(); // undefined, mất ngữ cảnh!

// Case 3: Arrow function → this kế thừa từ nơi ĐỊNH NGHĨA
function Person(age) {
  this.age = age;
  setTimeout(() => console.log(this.age), 100); // 20
  setTimeout(function () {
    console.log(this.age);
  }, 200); // undefined 
}
new Person(20);

const dev = { name: 'Chiến' };
const other = { name: 'Phương' };

function code(lang) {
  console.log(`${this.name} code ${lang}`);
}

code.call(other, 'React');      // "Phương code React", chạy ngay, tham số rời
code.apply(other, ['React']);   // "Phương code React", chạy ngay, tham số mảng

const codeLater = code.bind(other, 'React');
codeLater(); // "Phương code React", tạo hàm mới, chạy sau

const fruits = ['Táo', 'Cam', 'Xoài'];
return fruits.map((fruit) => <li key={fruit}>{fruit}</li>);

// Xóa user khỏi state (immutable)
setUsers(users.filter((user) => user.id !== deleteId));

// Chỉ hiển thị user active
{users.filter((u) => u.active).map((u) => <UserCard key={u.id} user={u} />)}

const total = cart.reduce((sum, item) => sum + item.price, 0);

// User click button -> fetch dữ liệu -> update UI
// Giả sử fetchSync là hàm đồng bộ
button.addEventListener('click', () => {
  const response = fetchSync('https://api.example.com/users');
  // Chờ... 2 giây
  // Chờ... 3 giây
  // Chờ... đến 5 giây mới có dữ liệu!

  updateUI(response);
});

// Async version
button.addEventListener('click', async () => {
  const response = await fetch('https://api.example.com/users');
  // Trong 5 giây này, Call Stack KHÔNG bị khoá
  // User vẫn có thể click, scroll, hover -> UI phản ứng bình thường!

  updateUI(response);
});

useEffect(() => {
  const fetchData = async () => {
    const res = await fetch('/api/users');
    const data = await res.json();
    setUsers(data); // Cập nhật state sau khi có dữ liệu
  };
  fetchData();
}, []);

function main() {
  console.log('A');
  setTimeout(() => {
    console.log('B');
  }, 0);
  console.log('C');
}

main();

function main() {
  console.log('A');

  setTimeout(() => {
    console.log('B');
  }, 100);

  console.log('C');
}

setTimeout(() => {
  console.log('D');
}, 0);

main();

function main() {
  console.log('A');

  Promise.resolve().then(() => console.log('B'));

  console.log('C');
}

main();
// Kết quả: A, C, B

function main() {
  console.log('A');

  setTimeout(() => {
    console.log('B');
  }, 0);

  Promise.resolve().then(() => console.log('D'));
  console.log('C');
}

main();

// Button.jsx: export component
export default function Button({ label }) {
  return <button>{label}</button>;
}

// App.jsx: import component
import Button from './Button';

export function formatDate(date) { /* ... */ }   // Named export
export function formatMoney(amount) { /* ... */ } // Named export

import { formatDate, formatMoney } from './utils'; // Named import: phải đúng tên

export default function Button() { /* ... */ } // Default export: mỗi file chỉ 1 cái

import Button from './Button';     // Có thể đặt tên bất kỳ
import MyButton from './Button';   // Cũng hợp lệ!

// Cách cũ - verbose
const name = user.name;
const email = user.email;
const role = user.role;

// Destructuring - gọn gàng
const { name, email, role } = user;

// Đổi tên biến (rename)
const { name: userName, email: userEmail } = user;

// Giá trị mặc định (default value)
const { name, avatar = '/default-avatar.png' } = user;
// Nếu user.avatar là undefined → dùng default

const colors = ['red', 'green', 'blue'];

// Destructure theo vị trí
const [first, second, third] = colors;
// first = 'red', second = 'green', third = 'blue'

// Bỏ qua phần tử
const [primary, , accent] = colors;
// primary = 'red', accent = 'blue'

// Giá trị mặc định
const [a, b, c, d = 'white'] = colors;
// d = 'white' (vì colors[3] là undefined)

const response = {
  data: {
    user: {
      name: 'Nam',
      address: { city: 'HCM', district: '1' }
    }
  },
  status: 200
};

// Nested destructuring
const {
  data: {
    user: {
      name,
      address: { city }
    }
  }
} = response;

console.log(name); // 'Nam'
console.log(city); // 'HCM'

const { id, ...restProps } = { id: 1, name: 'Nam', age: 25, role: 'dev' };
// id = 1
// restProps = { name: 'Nam', age: 25, role: 'dev' }

const [head, ...tail] = [1, 2, 3, 4, 5];
// head = 1
// tail = [2, 3, 4, 5]

// Thay vì nhận cả object rồi truy cập từng property
function greet(user) {
  return `Hello ${user.name}, age ${user.age}`;
}

// Destructure ngay tại parameter
function greet({ name, age = 0 }) {
  return `Hello ${name}, age ${age}`;
}

greet({ name: 'Nam', age: 25 }); // "Hello Nam, age 25"
greet({ name: 'An' });             // "Hello An, age 0" (default)

// 1. useState - array destructuring
const [count, setCount] = useState(0);
const [user, setUser] = useState(null);

// 2. Props - object destructuring tại parameter
function UserCard({ name, email, avatar = '/default.png' }) {
  return (
    <div>
      <img src={avatar} alt={name} />
      <h2>{name}

const user = null;

// Crash
// const city = user.profile.address.city;

// Safe
const city = user?.profile?.address?.city;
console.log(city); // undefined

const apiResponse = {
  data: {
    user: { name: 'Nam' }
  }
};

console.log(apiResponse?.data?.user?.name);  // 'Nam'
console.log(apiResponse?.data?.user?.email); // undefined

const users = [{ name: 'A' }, { name: 'B' }];

console.log(users?.[0]?.name); // 'A'
console.log(users?.[10]?.name); // undefined

const callbacks = {
  onSuccess: (msg) => console.log(msg),
};

callbacks.onSuccess?.('Done!'); // chạy
callbacks.onError?.('Failed');  // không crash, bỏ qua

try {
  // Code có thể throw error
  const data = JSON.parse(invalidJson);
  console.log(data);
} catch (error) {
  // Chạy khi có lỗi trong try block
  console.error('Parse failed:', error.message);
} finally {
  // LUÔN chạy, dù có lỗi hay không
  // Dùng để cleanup: đóng connection, reset loading state
  console.log('Done parsing attempt');
}

// THIẾU error handling - app crash khi API lỗi
async function getUsers() {
  const res = await fetch('/api/users');
  const data = await res.json();
  return data;
}

// Error handling đầy đủ
async function getUsers() {
  try {
    const res = await fetch('/api/users');

    if (!res.ok) {
      throw new Error(`HTTP ${res.status}: ${res.statusText}`);
    }

    const data = await res.json();
    return data;
  } catch (error) {
    // Network error, JSON parse error, hoặc HTTP error
    console.error('Fetch failed:', error.message);
    return []; // Fallback value
  }
}

// Pattern: trả về { data, error } thay vì throw
async function fetchUser(id) {
  try {
    const res = await fetch(`/api/users/${id}`);

    if (!res.ok) {
      return {
        data: null,
        error: { type: 'HTTP_ERROR', status: res.status,
                 message: `Server trả về ${res.status}`

// Hai cách tương đương:

// Cách 1: .catch() - chain style
fetch('/api/data')
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error('Lỗi:', err));

// Cách 2: try/catch - async/await style
try {
  const res = await fetch('/api/data');
  const data = await res.json();
  console.log(data);
} catch (err) {
  console.error('Lỗi:', err);
}

// CHÚ Ý: fetch() chỉ throw khi NETWORK error
// HTTP 404, 500 KHÔNG throw → phải kiểm tra res.ok

// &&: trả về operand đầu tiên nếu falsy, ngược lại trả operand cuối
true && 'A';    // 'A'
false && 'A';   // false
0 && 'A';       // 0

// ||: trả về operand đầu tiên nếu truthy, ngược lại trả operand cuối
'user' || 'Guest'; // 'user'
'' || 'Guest';     // 'Guest'

// ??: chỉ fallback khi null/undefined
0 ?? 100;          // 0
null ?? 100;       // 100

function Notifications({ unreadCount }) {
  return (
    <div>
      <h2>Inbox</h2>
      {unreadCount > 0 && <span>Bạn có {unreadCount} tin chưa đọc</span>}
    </div>
  );
}

function TodoList({ todos }) {
  return (
    <div>
      {/* Nếu todos.length = 0, React sẽ render số 0 */}
      {todos.length && <p>Có {todos.length} việc cần làm</p>}

      {/* Viết an toàn hơn */}
      {todos.length > 0 && <p>Có {todos.length} việc cần làm</p>}
    </div>
  );
}