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

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

// Arrow function with block body
const calculate = (a, b) => {
  const result = a * b;
  return result;
};

// Arrow functions and this
function Counter() {
  this.count = 0;
  
  // In traditional functions, 'this' depends on how the function is called
  setInterval(function() {
    this.count++; // 'this' is not the Counter instance!
    console.log(this.count); // NaN
  }, 1000);
  
  // Arrow functions capture 'this' from the surrounding context
  setInterval(() => {
    this.count++; // 'this' is the Counter instance
    console.log(this.count); // 1, 2, 3...
  }, 1000);
}

// Array destructuring
const [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // 1
console.log(second); // 2
console.log(rest); // [3, 4, 5]

// Object destructuring
const person = {
  name: 'John',
  age: 30,
  city: 'New York',
  country: 'USA'
};

const { name, age, ...address } = person;
console.log(name); // 'John'
console.log(age); // 30
console.log(address); // { city: 'New York', country: 'USA' }

// Destructuring with default values
const { name: fullName = 'Anonymous', job = 'Unknown' } = person;
console.log(fullName); // 'John'
console.log(job); // 'Unknown'

// Destructuring in function parameters
function printPerson({ name, age }) {
  console.log(`${name} is ${age} years old`);
}

printPerson(person); // 'John is 30 years old'

// Spread with arrays
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]

// Spread with objects
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 }; // { a: 1, b: 2, c: 3 }

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

// Rest in function parameters
function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4)); // 10

const name = 'World';

// String concatenation (old way)
console.log('Hello ' + name + '!');

// Template literal (new way)
console.log(`Hello ${name}!`);

// Multi-line strings
const message = `
  This is a multi-line string.
  No need for \n characters.
  Expressions like ${2 + 2} work too.
`;

// Tagged templates
function highlight(strings, ...values) {
  return strings.reduce((result, str, i) => {
    const value = values[i] || '';
    return `${result}${str}<span class="highlight">${value}</span>`;
  }, '');
}

const user = 'John';
const status = 'active';
const result = highlight`User ${user} is ${status}`;
// 'User <span class="highlight">John</span> is <span class="highlight">active</span>'

const user = {
  name: 'John',
  address: {
    city: 'New York'
  }
};

// Without optional chaining
const zipCode = user.address && user.address.zipCode;
console.log(zipCode); // undefined

// With optional chaining
const zipCode2 = user.address?.zipCode;
console.log(zipCode2); // undefined

// Deeply nested properties
const country = user.address?.country?.name;
console.log(country); // undefined

// With function calls
const result = user.getAddress?.().city;

// Logical OR (||) returns the right side for any falsy value
const count = 0 || 10;
console.log(count); // 10 (because 0 is falsy)

// Nullish coalescing only returns the right side for null or undefined
const count2 = 0 ?? 10;
console.log(count2); // 0

const name = null ?? 'Anonymous';
console.log(name); // 'Anonymous'

const emptyString = '' ?? 'Default';
console.log(emptyString); // '' (empty string is not null or undefined)

// Promise-based approach
function fetchUserData() {
  return fetch('https://api.example.com/user')
    .then(response => response.json())
    .then(data => {
      console.log(data);
      return data;
    })
    .catch(error => {
      console.error('Error:', error);
    });
}

// Async/await approach
async function fetchUserData() {
  try {
    const response = await fetch('https://api.example.com/user');
    const data = await response.json();
    console.log(data);
    return data;
  } catch (error) {
    console.error('Error:', error);
  }
}

// Parallel requests with Promise.all
async function fetchMultipleUsers(ids) {
  try {
    const promises = ids.map(id => 
      fetch(`https://api.example.com/user/${id}`).then(res => res.json())
    );
    
    const users = await Promise.all(promises);
    return users;
  } catch (error) {
    console.error('Error:', error);
  }
}

// math.js
export const PI = 3.14159;

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

export default function multiply(a, b) {
  return a * b;
}

// app.js
import multiply, { add, PI } from './math.js';

console.log(add(2, 3)); // 5
console.log(multiply(2, 3)); // 6
console.log(PI); // 3.14159

// Import everything as a namespace
import * as math from './math.js';
console.log(math.add(2, 3)); // 5
console.log(math.default(2, 3)); // 6