// let: Block-scoped variables
{
  let name = 'JavaScript';
  console.log(name); // 'JavaScript'
}
// console.log(name); // ReferenceError: name is not defined

// const: Constant declaration
const API_URL = 'https://api.example.com';
// API_URL = 'new-url'; // TypeError: Assignment to constant variable

// Object/array constants can still modify content
const user = { name: 'Alice' };
user.name = 'Bob'; // ✅ Allowed
// user = {}; // ❌ Not allowed

// Traditional function
function add(a, b) {
  return a + b;
}

// Arrow function
const add = (a, b) => a + b;

// Single parameter can omit parentheses
const double = x => x * 2;

// Multi-line function body
const createUser = (name, age) => {
  return {
    name,
    age,
    createdAt: new Date()
  };
};

// this binding特性
const obj = {
  name: 'Object',
  traditional: function() {
    setTimeout(function() {
      console.log(this.name); // undefined (this points to global)
    }, 100);
  },
  arrow: function() {
    setTimeout(() => {
      console.log(this.name); // 'Object' (inherits outer this)
    }, 100);
  }
};

const name = 'World';
const age = 25;

// Basic interpolation
const message = `Hello, ${name}! You are ${age} years old.`;

// Multi-line strings
const html = `
  <div class="user">
    <h2>${name}</h2>
    <p>Age: ${age}</p>
  </div>
`;

// Expression evaluation
const price = 100;
const tax = 0.08;
const total = `Total: $${(price * (1 + tax)).toFixed(2)}`;

// Array destructuring
const [first, second, third] = [1, 2, 3];
const [, , , fourth] = [1, 2, 3, 4]; // Skip first three

// Object destructuring
const user = { name: 'Alice', age: 30, city: 'New York' };
const { name, age } = user;

// Renaming
const { name: userName, age: userAge } = user;

// Default values
const { name, country = 'Unknown' } = user;

// Nested destructuring
const data = {
  user: {
    profile: {
      name: 'Bob',
      email: '[email protected]'
    }
  }
};
const { user: { profile: { name, email } } } = data;

// Function parameter destructuring
function createUser({ name, age, city = 'Unknown' }) {
  return { name, age, city };
}
const user1 = createUser({ name: 'Alice', age: 25 });

// Default parameters
function greet(name = 'Guest', message = 'Hello') {
  return `${message}, ${name}!`;
}

// Spread operator - Arrays
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]

// Spread operator - Objects
const user = { name: 'Alice', age: 30 };
const userWithRole = { ...user, role: 'admin' };

// Rest parameters
function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}
sum(1, 2, 3, 4, 5); // 15

// Spread operator in function calls
const numbers = [1, 2, 3];
console.log(Math.max(...numbers)); // 3

// Basic class definition
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  // Instance method
  greet() {
    return `Hello, I'm ${this.name}`;
  }

  // Static method
  static createAdult(name) {
    return new Person(name, 18);
  }
}

// Inheritance
class Employee extends Person {
  constructor(name, age, position) {
    super(name, age); // Call parent constructor
    this.position = position;
  }

  // Override method
  greet() {
    return `${super.greet()} and I'm a ${this.position}`;
  }

  work() {
    return `${this.name} is working as a ${this.position}`;
  }
}

const employee = new Employee('Alice', 28, 'Developer');
console.log(employee.greet()); // "Hello, I'm Alice and I'm a Developer"

// math.js - Export
export const PI = 3.14159;

export function add(a, b) {
  return a + b;
}

export class Calculator {
  multiply(a, b) {
    return a * b;
  }
}

// Default export
export default function subtract(a, b) {
  return a - b;
}

// main.js - Import
import subtract from './math.js'; // Default import
import { PI, add, Calculator } from './math.js'; // Named import
import * as MathUtils from './math.js'; // Import all

// Usage
console.log(PI);
console.log(add(2, 3));
const calc = new Calculator();
console.log(calc.multiply(4, 5));
console.log(subtract(10, 3));

// Basic syntax
async function fetchData() {
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error:', error);
    throw error;
  }
}

// Using async function
async function main() {
  try {
    const data = await fetchData();
    console.log('Data:', data);
  } catch (error) {
    console.error('Failed to fetch data:', error);
  }
}

// Arrow function form
const fetchUserData = async (userId) => {
  const response = await fetch(`/api/users/${userId}`);
  return response.json();
};

// Parallel execution of multiple async operations
async function fetchMultipleData() {
  const [users, posts, comments] = await Promise.all([
    fetch('/api/users').then(r => r.json()),
    fetch('/api/posts').then(r => r.json()),
    fetch('/api/comments').then(r => r.json())
  ]);
  
  return { users, posts, comments };
}

// Sequential execution of async operations
async function processItems(items) {
  const results = [];
  for (const item of items) {
    const result = await processItem(item);
    results.push(result);
  }
  return results;
}

// Async function returns Promise
async function getValue() {
  return 42;
}
const promise = getValue(); // Returns Promise
promise.then(value => console.log(value)); // 42

// Async iterator
async function* asyncGenerator() {
  yield await Promise.resolve(1);
  yield await Promise.resolve(2);
  yield await Promise.resolve(3);
}

// Using for-await-of
async function processAsyncData() {
  for await (const value of asyncGenerator()) {
    console.log(value); // 1, 2, 3
  }
}

// Async iterable object
const asyncIterable = {
  async *[Symbol.asyncIterator]() {
    let i = 1;
    while (i <= 3) {
      yield new Promise(resolve => {
        setTimeout(() => resolve(i * 2), 1000);
      });
      i++;
    }
  }
};

async function processAsyncIterable() {
  for await (const value of asyncIterable) {
    console.log(value); // 2, 4, 6 (output one per second)
  }
}

// Practical application: Paginated data fetching
async function* fetchPages(url) {
  let page = 1;
  let hasMore = true;
  
  while (hasMore) {
    const response = await fetch(`${url}?page=${page}`);
    const data = await response.json();
    
    yield data.items;
    
    hasMore = data.hasMore;
    page++;
  }
}

async function getAllItems(url) {
  const allItems = [];
  
  for await (const items of fetchPages(url)) {
    allItems.push(...items);
  }
  
  return allItems;
}

// flat() - Array flattening
const nestedArray = [1, [2, 3], [4, [5, 6]]];
console.log(nestedArray.flat()); // [1, 2, 3, [4, [5, 6]]]

// Specify flattening depth
console.log(nestedArray.flat(2)); // [1, 2, 3, 4, 5, 6]

// Complete flattening
const deeplyNested = [1, [2, [3, [4, [5]]]]];
console.log(deeplyNested.flat(Infinity)); // [1, 2, 3, 4, 5]

// flatMap() - Map and flatten
const sentences = [
  'Hello world',
  'How are you',
  'Fine thank you'
];

const words = sentences.flatMap(sentence => sentence.split(' '));
console.log(words);
// ['Hello', 'world', 'How', 'are', 'you', 'Fine', 'thank', 'you']

// Comparison with map + flat
const result1 = sentences.map(s => s.split(' ')).flat();
const result2 = sentences.flatMap(s => s.split(' '));
console.log(result1.length === result2.length); // true

// Practical application: Data transformation
const data = [
  { id: 1, tags: ['javascript', 'nodejs'] },
  { id: 2, tags: ['react', 'javascript'] },
  { id: 3, tags: ['vue', 'nodejs'] }
];

const allTags = data.flatMap(item => item.tags);
const uniqueTags = [...new Set(allTags)];
console.log(uniqueTags); // ['javascript', 'nodejs', 'react', 'vue']

// Complex data processing
const orders = [
  { id: 1, items: [{ name: 'Book', price: 20 }, { name: 'Pen', price: 5 }] },
  { id: 2, items: [{ name: 'Laptop', price: 1000 }] }
];

const allItems = orders.flatMap(order => 
  order.items.map(item => ({ ...item, orderId: order.id }))
);
console.log(allItems);
// [
//   { name: 'Book', price: 20, orderId: 1 },
//   { name: 'Pen', price: 5, orderId: 1 },
//   { name: 'Laptop', price: 1000, orderId: 2 }
// ]

// Basic usage: Convert key-value pairs array to object
const entries = [
  ['name', 'Alice'],
  ['age', 30],
  ['city', 'New York']
];

const obj = Object.fromEntries(entries);
console.log(obj); // { name: 'Alice', age: 30, city: 'New York' }

// Used with Object.entries()
const original = { name: 'Bob', age: 25, city: 'London' };
const transformed = Object.fromEntries(
  Object.entries(original).map(([key, value]) => [
    key.toUpperCase(),
    typeof value === 'string' ? value.toUpperCase() : value
  ])
);
console.log(transformed);
// { NAME: 'BOB', AGE: 25, CITY: 'LONDON' }

// Practical application: Query parameter processing
const queryString = 'name=Alice&age=30&city=New+York';
const params = new URLSearchParams(queryString);
const paramsObj = Object.fromEntries(params);
console.log(paramsObj); // { name: 'Alice', age: '30', city: 'New York' }

// Object filtering
const user = {
  name: 'Alice',
  age: 30,
  password: 'secret123',
  email: '[email protected]',
  token: 'abc123'
};

const publicUser = Object.fromEntries(
  Object.entries(user).filter(([key]) => 
    !['password', 'token'].includes(key)
  )
);
console.log(publicUser);
// { name: 'Alice', age: 30, email: '[email protected]' }

// Map to object conversion
const map = new Map([
  ['name', 'Charlie'],
  ['age', 35]
]);
const mapObj = Object.fromEntries(map);
console.log(mapObj); // { name: 'Charlie', age: 35 }

const user = {
  name: 'Alice',
  address: {
    street: '123 Main St',
    city: 'New York'
  }
};

// Traditional way: Multiple checks
const city = user && user.address && user.address.city;
console.log(city); // 'New York'

// Optional chaining: Concise and safe
const city2 = user?.address?.city;
console.log(city2); // 'New York'

// Handling non-existent properties
const country = user?.address?.country;
console.log(country); // undefined

// Array optional chaining
const users = [
  { name: 'Alice', posts: [{ title: 'Post 1' }] },
  { name: 'Bob' }
];

const firstPostTitle = users[0]?.posts?.[0]?.title;
console.log(firstPostTitle); // 'Post 1'

const secondPostTitle = users[1]?.posts?.[0]?.title;
console.log(secondPostTitle); // undefined

// Function call optional chaining
const userWithMethod = {
  name: 'Alice',
  greet: function() {
    return 'Hello!';
  }
};

const greeting = userWithMethod.greet?.();
console.log(greeting); // 'Hello!'

const noGreeting = userWithMethod.sayGoodbye?.();
console.log(noGreeting); // undefined

// Practical application: API response handling
function getUserCity(user) {
  return user?.profile?.address?.city ?? 'Unknown';
}

console.log(getUserCity({ profile: { address: { city: 'Beijing' } } })); // 'Beijing'
console.log(getUserCity({ profile: {} })); // 'Unknown'
console.log(getUserCity(null)); // 'Unknown'

// Basic usage: Use default value only when null or undefined
const name = null ?? 'Guest';
console.log(name); // 'Guest'

const age = undefined ?? 18;
console.log(age); // 18

const active = false ?? true;
console.log(active); // false (false is not null or undefined)

const count = 0 ?? 10;
console.log(count); // 0 (0 is not null or undefined)

// Comparison with || operator
const value1 = 0 || 10;     // 10 (0 is falsy)
const value2 = 0 ?? 10;     // 0 (0 is not null/undefined)
const value3 = '' || 'default'; // 'default' (empty string is falsy)
const value4 = '' ?? 'default'; // '' (empty string is not null/undefined)

// Practical application: Configuration defaults
const config = {
  timeout: null,
  retries: undefined,
  enabled: false,
  port: 0
};

const finalConfig = {
  timeout: config.timeout ?? 5000,    // 5000
  retries: config.retries ?? 3,      // 3
  enabled: config.enabled ?? true,   // false (keeps original value)
  port: config.port ?? 3000          // 0 (keeps original value)
};

// Function parameter defaults
function createUser(options = {}) {
  return {
    name: options.name ?? 'Guest',
    age: options.age ?? 0,
    email: options.email ?? null,
    active: options.active ?? true
  };
}

const user1 = createUser({ name: 'Alice', age: 0, active: false });
console.log(user1);
// { name: 'Alice', age: 0, email: null, active: false }

// Nested usage
const data = {
  user: {
    profile: null
  }
};

const bio = data.user?.profile?.bio ?? 'No bio available';
console.log(bio); // 'No bio available'

// Basic usage
const promises = [
  Promise.resolve(1),
  Promise.reject('Error 1'),
  Promise.resolve(3),
  Promise.reject('Error 2')
];

Promise.allSettled(promises).then(results => {
  results.forEach((result, index) => {
    if (result.status === 'fulfilled') {
      console.log(`Promise ${index}: ${result.value}`);
    } else {
      console.log(`Promise ${index}: ${result.reason}`);
    }
  });
});

// Comparison with Promise.all
async function comparePromiseMethods() {
  const promises = [
    Promise.resolve('Success 1'),
    Promise.reject('Error'),
    Promise.resolve('Success 2')
  ];

  try {
    // Promise.all - fails if any fails
    const allResults = await Promise.all(promises);
    console.log('All succeeded:', allResults);
  } catch (error) {
    console.log('Promise.all failed:', error);
  }

  // Promise.allSettled - waits for all to complete
  const settledResults = await Promise.allSettled(promises);
  console.log('All settled:', settledResults);
}

// Practical application: Batch operations
async function uploadFiles(files) {
  const uploadPromises = files.map(file => 
    uploadFile(file).catch(error => ({ error, file }))
  );

  const results = await Promise.allSettled(uploadPromises);
  
  const successful = results
    .filter(result => result.status === 'fulfilled')
    .map(result => result.value);
    
  const failed = results
    .filter(result => result.status === 'rejected')
    .map(result => result.reason);

  return { successful, failed };
}

// Data fetching: Return successful data even if some fail
async function fetchMultipleAPIs() {
  const apis = [
    'https://api.example.com/users',
    'https://api.example.com/posts',
    'https://api.example.com/comments'
  ];

  const results = await Promise.allSettled(
    apis.map(url => fetch(url).then(r => r.json()))
  );

  return results.reduce((acc, result, index) => {
    const apiName = apis[index].split('/').pop();
    acc[apiName] = result.status === 'fulfilled' ? result.value : null;
    return acc;
  }, {});
}

// Logical AND assignment (&&=)
let user = { name: 'Alice', age: 30 };
user.age &&= user.age > 18 ? 'adult' : 'minor';
console.log(user.age); // 'adult'

// Equivalent to
// if (user.age) {
//   user.age = user.age > 18 ? 'adult' : 'minor';
// }

// Logical OR assignment (||=)
let settings = { theme: 'dark' };
settings.language ||= 'en';
console.log(settings.language); // 'en'

// Equivalent to
// settings.language = settings.language || 'en';

// Nullish coalescing assignment (??=)
let config = { timeout: null };
config.timeout ??= 5000;
console.log(config.timeout); // 5000

// Equivalent to
// if (config.timeout === null || config.timeout === undefined) {
//   config.timeout = 5000;
// }

// Practical application: Configuration updates
function updateConfig(currentConfig, newConfig) {
  // Only update non-null values
  newConfig.theme &&= (currentConfig.theme = newConfig.theme);
  newConfig.language ??= (currentConfig.language = newConfig.language);
  newConfig.timeout ||= (currentConfig.timeout = newConfig.timeout);
  
  return currentConfig;
}

const current = { theme: 'light', language: null, timeout: 0 };
const updates = { theme: 'dark', language: 'zh', timeout: null };

const updated = updateConfig(current, updates);
console.log(updated);
// { theme: 'dark', language: 'zh', timeout: 0 }

// Conditional object property updates
const user = { name: 'Alice', email: null, age: 25 };

user.email ??= '[email protected]'; // Set default email
user.age &&= user.age >= 18 ? 'adult' : 'minor'; // Set status based on age

console.log(user);
// { name: 'Alice', email: '[email protected]', age: 'adult' }