Khóa học Frontend NextJS + React

console.log("--- Bài tập 1: Scope của let vs var ---");

// Sử dụng var
for (var i = 0; i < 3; i++) {
    setTimeout(() => {
        console.log('Giá trị của i (var):', i);
    }, 100 * i); // Dùng 100*i để thấy rõ kết quả theo thứ tự
}

// Sử dụng let
for (let j = 0; j < 3; j++) {
    setTimeout(() => {
        console.log('Giá trị của j (let):', j);
    }, 100 * j);
}

console.log("\n--- Bài tập 2: Sử dụng const ---");

const myConstant = 10;
// myConstant = 20; // Lỗi! Không thể gán lại cho const kiểu nguyên thủy

const myArray = [1, 2, 3];
myArray.push(4); // OK! Có thể thay đổi nội dung mảng
console.log('Mảng sau khi push:', myArray); // Mảng sau khi push: [ 1, 2, 3, 4 ]

// myArray = [5, 6]; // Lỗi! Không thể gán lại tham chiếu mới cho biến const

const myObject = { name: 'Alice' };
myObject.age = 30; // OK! Có thể thay đổi thuộc tính đối tượng
console.log('Đối tượng sau khi thêm thuộc tính:', myObject); // Đối tượng sau khi thêm thuộc tính: { name: 'Alice', age: 30 }

// myObject = { name: 'Bob' }; // Lỗi! Không thể gán lại tham chiếu mới cho biến const

console.log("\n--- Bài tập 3: Cú pháp hàm mũi tên ---");

// Hàm truyền thống
const sumTraditional = function(a, b) {
  return a + b;
};
console.log('Tổng (truyền thống):', sumTraditional(5, 7)); // 12

// Hàm mũi tên - Cú pháp ngắn gọn với implicit return
const sumArrow = (a, b) => a + b;
console.log('Tổng (mũi tên):', sumArrow(5, 7)); // 12

// Hàm mũi tên - Có khối lệnh (cần return tường minh)
const multiply = (a, b) => {
  console.log(`Nhân ${a} và ${b}`);
  return a * b;
};
console.log('Tích (mũi tên):', multiply(4, 6)); // Nhận 4 và 6 \n 24

// Hàm mũi tên - Một tham số (có thể bỏ ngoặc đơn)
const square = x => x * x;
console.log('Bình phương của 5:', square(5)); // 25

// Hàm mũi tên - Không tham số
const greet = () => console.log('Xin chào!');
greet(); // Xin chào!

console.log("\n--- Bài tập 4: this trong hàm mũi tên ---");

const person = {
  name: 'Bob',
  // Phương thức truyền thống
  greetTraditional: function() {
    // 'this' ở đây là đối tượng 'person'
    setTimeout(function() {
      // 'this' ở đây mặc định là global (window trong trình duyệt, undefined trong Node.js strict mode)
      // console.log('Chào từ setTimeout (truyền thống): ' + this.name); // Thường in ra undefined
    }, 100);
    console.log('Chào (truyền thống): ' + this.name); // In ra 'Chào (truyền thống): Bob'
  },
  // Phương thức dùng hàm mũi tên
  greetArrow: function() {
     // 'this' ở đây là đối tượng 'person'
    setTimeout(() => {
      // 'this' ở đây kế thừa từ ngữ cảnh bao quanh (phương thức greetArrow),
      // nên nó vẫn là đối tượng 'person'
      console.log('Chào từ setTimeout (mũi tên): ' + this.name); // In ra 'Chào từ setTimeout (mũi tên): Bob'
    }, 100);
    console.log('Chào (mũi tên): ' + this.name); // In ra 'Chào (mũi tên): Bob'
  }
};

person.greetTraditional();
person.greetArrow();

console.log("\n--- Bài tập 5: Destructuring Mảng ---");

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

// Gán các phần tử mảng vào biến
const [color1, color2, color3] = rgb;
console.log(color1, color2, color3); // red green blue

// Bỏ qua phần tử
const [,, thirdColor] = rgb;
console.log('Màu thứ ba:', thirdColor); // Màu thứ ba: blue

// Kết hợp với Rest operator (xem phần sau)
const [primary, ...secondary] = rgb;
console.log('Màu chính:', primary); // Màu chính: red
console.log('Màu phụ:', secondary); // Màu phụ: [ 'green', 'blue' ]

// Gán với giá trị mặc định
const [c1, c2, c3, c4 = 'black'] = rgb;
console.log('Màu mặc định:', c4); // Màu mặc định: black

// Hoán đổi giá trị
let a = 1, b = 2;
[a, b] = [b, a];
console.log('Sau khi hoán đổi:', a, b); // Sau khi hoán đổi: 2 1

console.log("\n--- Bài tập 6: Destructuring Đối Tượng ---");

const userProfile = {
  userId: 101,
  userName: 'Charlie',
  userAge: 25,
  city: 'New York'
};

// Gán thuộc tính đối tượng vào biến cùng tên
const { userName, userAge } = userProfile;
console.log(userName, userAge); // Charlie 25

// Gán thuộc tính và đổi tên biến
const { userId: id, city: location } = userProfile;
console.log(id, location); // 101 New York

// Gán với giá trị mặc định (khi thuộc tính không tồn tại)
const { userName: nameDefault, country = 'USA' } = userProfile;
console.log('Tên và quốc gia mặc định:', nameDefault, country); // Tên và quốc gia mặc định: Charlie USA

// Destructuring trong tham số hàm
function displayUser({ userName, userAge, city = 'Unknown' }) {
  console.log(`Người dùng: ${userName}, Tuổi: ${userAge}, Thành phố: ${city}`);
}
displayUser(userProfile); // Người dùng: Charlie, Tuổi: 25, Thành phố: New York
displayUser({ userName: 'David', userAge: 35 }); // Người dùng: David, Tuổi: 35, Thành phố: Unknown

console.log("\n--- Bài tập 7: Spread Operator ---");

// Spread với mảng - Sao chép mảng (shallow copy)
const originalArray = [1, 2, 3];
const copyArray = [...originalArray];
console.log('Sao chép mảng:', copyArray); // Sao chép mảng: [ 1, 2, 3 ]
console.log('Hai mảng có giống nhau không (về tham chiếu)?', originalArray === copyArray); // false

// Spread với mảng - Ghép mảng
const arrA = [1, 2];
const arrB = [3, 4];
const combinedArray = [...arrA, ...arrB, 5, 6];
console.log('Ghép mảng:', combinedArray); // Ghép mảng: [ 1, 2, 3, 4, 5, 6 ]

// Spread với đối tượng - Sao chép đối tượng (shallow copy)
const originalObject = { x: 1, y: 2 };
const copyObject = { ...originalObject };
console.log('Sao chép đối tượng:', copyObject); // Sao chép đối tượng: { x: 1, y: 2 }
console.log('Hai đối tượng có giống nhau không (về tham chiếu)?', originalObject === copyObject); // false

// Spread với đối tượng - Ghép đối tượng
const objA = { a: 1, b: 2 };
const objB = { c: 3, d: 4 };
const combinedObject = { ...objA, ...objB, e: 5 };
console.log('Ghép đối tượng:', combinedObject); // Ghép đối tượng: { a: 1, b: 2, c: 3, d: 4, e: 5 }

// Spread với đối tượng - Ghi đè thuộc tính
const defaultSettings = { theme: 'dark', fontSize: 14 };
const userSettings = { fontSize: 16, language: 'vi' };
const finalSettings = { ...defaultSettings, ...userSettings }; // userSettings sẽ ghi đè defaultSettings nếu có thuộc tính trùng
console.log('Cài đặt cuối cùng:', finalSettings); // Cài đặt cuối cùng: { theme: 'dark', fontSize: 16, language: 'vi' }

// Spread với chuỗi
const greetingString = 'Hello';
const chars = [...greetingString];
console.log('Rải chuỗi thành mảng ký tự:', chars); // Rải chuỗi thành mảng ký tự: [ 'H', 'e', 'l', 'l', 'o' ]

// Sử dụng Spread trong gọi hàm (truyền các phần tử mảng làm đối số)
const numbers = [1, 2, 3];
function addThreeNumbers(n1, n2, n3) {
  return n1 + n2 + n3;
}
console.log('Gọi hàm với spread:', addThreeNumbers(...numbers)); // Gọi hàm với spread: 6

console.log("\n--- Bài tập 8: Rest Parameters ---");

// Thu thập tất cả các đối số
function sum(...args) {
  console.log('Các đối số được thu thập:', args); // args là một mảng
  return args.reduce((total, current) => total + current, 0);
}

console.log('Tổng các số:', sum(1, 2, 3, 4, 5)); // Các đối số được thu thập: [ 1, 2, 3, 4, 5 ] \n Tổng các số: 15
console.log('Tổng các số:', sum(10, 20));      // Các đối số được thu thập: [ 10, 20 ] \n Tổng các số: 30

// Kết hợp tham số tường minh và Rest
function greetUser(greeting, ...names) {
  console.log('Lời chào:', greeting);
  console.log('Danh sách tên:', names); // names là mảng các tên còn lại
  names.forEach(name => console.log(`${greeting}, ${name}`));
}

greetUser('Hello', 'Anna', 'Ben', 'Cindy');
// Lời chào: Hello
// Danh sách tên: [ 'Anna', 'Ben', 'Cindy' ]
// Hello, Anna
// Hello, Ben
// Hello, Cindy

greetUser('Hi'); // names sẽ là mảng rỗng
// Lời chào: Hi
// Danh sách tên: []

console.log("\n--- Bài tập 9: Template Literals ---");

const subject = 'JavaScript';
const topic = 'ES6+';
const version = 'modern';

// Nội suy biến (Interpolation)
const greeting = `Chào mừng bạn đến với ${subject} ${version}, đặc biệt là ${topic}!`;
console.log(greeting); // Chào mừng bạn đến với JavaScript modern, đặc biệt là ES6+!

// Có thể nhúng các biểu thức JavaScript
const price = 10;
const vatRate = 0.1;
const total = `Tổng cộng: ${price * (1 + vatRate)} USD`;
console.log(total); // Tổng cộng: 11 USD

// Chuỗi nhiều dòng (Multi-line strings)
const multiLinePoem = `Dòng một
Dòng hai
  Dòng ba (có thụt lề)`;
console.log(multiLinePoem);
// Dòng một
// Dòng hai
//   Dòng ba (có thụt lề)

// Sử dụng với các ký tự đặc biệt không cần thoát
const specialChars = `Thẻ HTML: <div class="container">
Dấu nháy đơn: '
Dấu nháy kép: "
Backticks: \``; // Cần thoát backtick nếu muốn hiển thị backtick thật
console.log(specialChars);

console.log("\n--- Bài tập 10: Class cơ bản ---");

// Định nghĩa Class
class Animal {
  // Constructor - Phương thức được gọi khi tạo đối tượng mới
  constructor(name, species) {
    this.name = name; // Thuộc tính
    this.species = species;
  }

  // Phương thức của Class
  introduce() {
    console.log(`Xin chào! Tôi là ${this.name}, thuộc loài ${this.species}.`);
  }

  // Getter (đọc thuộc tính)
  get fullName() {
    return `${this.name} (${this.species})`;
  }

  // Setter (ghi thuộc tính) - Ít phổ biến hơn cho ví dụ đơn giản này
  set species(newSpecies) {
    if (newSpecies.length > 2) { // Kiểm tra đơn giản
        this._species = newSpecies; // Lưu vào thuộc tính nội bộ
    } else {
        console.error("Tên loài quá ngắn!");
    }
  }

  get species() { // Cần getter tương ứng cho setter
      return this._species;
  }
}

// Tạo đối tượng từ Class (Instantiate)
const myPet = new Animal('Max', 'Dog');
const anotherPet = new Animal('Whiskers', 'Cat');

// Sử dụng phương thức và getter
myPet.introduce();      // Xin chào! Tôi là Max, thuộc loài Dog.
anotherPet.introduce(); // Xin chào! Tôi là Whiskers, thuộc loài Cat.

console.log('Tên đầy đủ của Max:', myPet.fullName); // Tên đầy đủ của Max: Max (Dog)

// Sử dụng setter
myPet.species = 'Super Dog'; // Gán giá trị mới qua setter
myPet.introduce(); // Xin chào! Tôi là Max, thuộc loài Super Dog.

myPet.species = 'D'; // Thử gán giá trị không hợp lệ
// console.error("Tên loài quá ngắn!"); (Lỗi được in ra)
console.log('Loài của Max sau khi thử gán lỗi:', myPet.species); // Loài của Max sau khi thử gán lỗi: Super Dog

console.log("\n--- Bài tập 11: Kế thừa Class ---");

// Class con kế thừa từ Animal
class Dog extends Animal {
  constructor(name, breed) {
    // Gọi constructor của Class cha
    super(name, 'Dog'); // Luôn gọi super trước khi dùng 'this' trong constructor của class con
    this.breed = breed; // Thuộc tính riêng của Dog
  }

  // Phương thức riêng của Dog
  bark() {
    console.log(`${this.name} nói: Woof woof!`);
  }

  // Ghi đè phương thức của Class cha
  introduce() {
    console.log(`Xin chào! Tôi là ${this.name}, một chú chó giống ${this.breed}.`);
  }
}

// Tạo đối tượng từ Class con
const myDoggy = new Dog('Buddy', 'Golden Retriever');

// Sử dụng phương thức kế thừa và phương thức riêng
myDoggy.introduce(); // Xin chào! Tôi là Buddy, một chú chó giống Golden Retriever. (Phương thức đã bị ghi đè)
myDoggy.bark();      // Buddy nói: Woof woof!

// Vẫn có thể truy cập các thuộc tính
console.log('Tên của doggy:', myDoggy.name);   // Tên của doggy: Buddy
console.log('Loài của doggy:', myDoggy.species); // Loài của doggy: Dog (set trong super)

console.log("\n--- Bài tập 12: Sử dụng Promises ---");

function simulateAsyncOperation(success, delay, data, error) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (success) {
        console.log(`--- Thao tác thành công sau ${delay}ms ---`);
        resolve(data); // Hoàn thành thành công, gọi resolve
      } else {
        console.error(`--- Thao tác thất bại sau ${delay}ms ---`);
        reject(error); // Thất bại, gọi reject
      }
    }, delay);
  });
}

// Sử dụng Promise
console.log('Bắt đầu gọi Promise thành công...');
simulateAsyncOperation(true, 1000, { id: 1, message: 'Data fetched' })
  .then(result => {
    console.log('Promise thành công với dữ liệu:', result);
    // Có thể trả về một Promise khác để chaining
    return simulateAsyncOperation(true, 500, 'Second step complete');
  })
  .then(secondResult => {
      console.log('Bước thứ hai thành công:', secondResult);
  })
  .catch(error => {
    // Xử lý lỗi của bất kỳ Promise nào trong chuỗi
    console.error('Promise thất bại:', error);
  })
  .finally(() => {
    console.log('Promise hoàn thành (dù thành công hay thất bại)');
  });

console.log('\nBắt đầu gọi Promise thất bại...');
simulateAsyncOperation(false, 1500, null, 'Network Error')
  .then(result => {
    console.log('Đây sẽ không chạy vì promise thất bại');
  })
  .catch(error => {
    console.error('Promise thất bại (bị bắt bởi catch):', error); // Bắt lỗi tại đây
  })
  .finally(() => {
    console.log('Promise thất bại hoàn thành (finally)');
  });

console.log('Các Promise đã được gọi (code đồng bộ tiếp tục chạy ngay)');

console.log("\n--- Bài tập 13: Sử dụng Async/Await ---");

function simulateFetchData(data, delay) {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log(`Đã lấy dữ liệu:`, data);
      resolve(data);
    }, delay);
  });
}

function simulateProcessData(data, delay) {
   return new Promise((resolve, reject) => {
     setTimeout(() => {
       if (data) {
         console.log(`Đã xử lý dữ liệu: ${typeof data === 'object' ? JSON.stringify(data) : data}`);
         resolve(`Processed: ${typeof data === 'object' ? JSON.stringify(data) : data}`);
       } else {
         reject("Không có dữ liệu để xử lý!");
       }
     }, delay);
   });
}


async function performOperations() {
  console.log('Bắt đầu các thao tác bất đồng bộ với async/await...');

  try {
    // Await sẽ tạm dừng ở đây cho đến khi simulateFetchData hoàn thành
    const userData = await simulateFetchData({ user: 'Eva' }, 1500);
    console.log('Nhận được userData:', userData);

    // Await sẽ tạm dừng ở đây cho đến khi simulateProcessData hoàn thành với userData
    const processedUserData = await simulateProcessData(userData, 1000);
    console.log('Nhận được processedUserData:', processedUserData);

    // Thử một thao tác có thể thất bại
    const result = await simulateProcessData(null, 500);
    console.log('Đây sẽ không chạy nếu dòng trên thất bại:', result);

  } catch (error) {
    // Nếu bất kỳ await nào trong try block ném ra lỗi (Promise bị reject),
    // khối catch này sẽ bắt lỗi đó.
    console.error('Đã xảy ra lỗi trong quá trình thực hiện:', error);
  } finally {
      console.log('Kết thúc hàm performOperations (dù thành công hay thất bại).');
  }

  // Code sau await cuối cùng chỉ chạy khi Promise trước đó resolve thành công
  // Nếu có catch block, code sau catch cũng sẽ chạy
  console.log('Kết thúc hàm async.');
}

performOperations();
console.log('Hàm async đã được gọi (code đồng bộ tiếp tục chạy ngay).');

console.log("\n--- Bài tập 14: Tham Số Mặc Định ---");

// Hàm với tham số mặc định
function greet(name = 'Guest', greeting = 'Hello') {
  console.log(`${greeting}, ${name}!`);
}

greet();             // Hello, Guest! (Sử dụng cả hai giá trị mặc định)
greet('Daniel');     // Hello, Daniel! (Chỉ sử dụng giá trị mặc định cho greeting)
greet('Emily', 'Hi'); // Hi, Emily! (Không sử dụng giá trị mặc định nào)

// Có thể sử dụng kết quả của biểu thức hoặc giá trị của tham số khác
function calculateTotal(price, quantity = 1, discount = price * 0.1) {
  return (price * quantity) - discount;
}

console.log('Tổng đơn hàng 1:', calculateTotal(100));    // Tổng đơn hàng 1: 90 (price=100, quantity=1, discount=100*0.1=10)
console.log('Tổng đơn hàng 2:', calculateTotal(100, 2)); // Tổng đơn hàng 2: 180 (price=100, quantity=2, discount=100*0.1=10)
console.log('Tổng đơn hàng 3:', calculateTotal(100, 2, 5)); // Tổng đơn hàng 3: 195 (price=100, quantity=2, discount=5)