Complete JavaScript ES6+ Guide

// var has function scope, not block scope
function example() {
  if (true) {
    var x = 1;
  }
  console.log(x); // 1 - accessible outside the block!
}

// var declarations are hoisted
console.log(y); // undefined (not an error)
var y = 2;

// let has block scope
function example() {
  if (true) {
    let x = 1;
    const y = 2;
  }
  console.log(x); // ReferenceError: x is not defined
}

// const must be initialized and cannot be reassigned
const name = "John";
// name = "Jane"; // TypeError: Assignment to constant variable

// const objects/arrays can be mutated
const user = { name: "John" };
user.name = "Jane"; // This is allowed
user.age = 30;      // This is allowed

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

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

// Single parameter (parentheses optional)
const square = x => x * x;

// No parameters
const greet = () => "Hello!";

// Multiple statements (need curly braces and return)
const processUser = (user) => {
  const processed = user.name.toUpperCase();
  return `Hello, ${processed}!`;
};

// Traditional function - 'this' depends on how it's called
const obj = {
  name: "John",
  greet: function() {
    setTimeout(function() {
      console.log(`Hello, ${this.name}`); // 'this' is undefined or window
    }, 1000);
  }
};

// Arrow function - 'this' is inherited from enclosing scope
const obj2 = {
  name: "John",
  greet: function() {
    setTimeout(() => {
      console.log(`Hello, ${this.name}`); // 'this' refers to obj2
    }, 1000);
  }
};

// String concatenation (old way)
const name = "John";
const age = 30;
const message = "Hello, my name is " + name + " and I'm " + age + " years old.";

// Template literals (ES6)
const message2 = `Hello, my name is ${name} and I'm ${age} years old.`;

// Multi-line strings
const html = `
  <div class="user-card">
    <h2>${name}</h2>
    <p>Age: ${age}</p>
    <p>Status: ${age >= 18 ? 'Adult' : 'Minor'}</p>
  </div>
`;

// Function calls in templates
const formatPrice = (price) => `$${price.toFixed(2)}`;
const product = { name: "iPhone", price: 999.99 };
const productInfo = `${product.name} costs ${formatPrice(product.price)}`;

// Traditional way
const numbers = [1, 2, 3, 4, 5];
const first = numbers[0];
const second = numbers[1];

// Destructuring
const [first, second, third] = numbers;
console.log(first, second, third); // 1, 2, 3

// Skip elements
const [, , third, , fifth] = numbers;

// Default values
const [a, b, c = 10] = [1, 2];
console.log(c); // 10

// Rest operator
const [head, ...tail] = numbers;
console.log(head); // 1
console.log(tail); // [2, 3, 4, 5]

const user = {
  name: "John",
  age: 30,
  email: "john@example.com",
  address: {
    city: "New York",
    country: "USA"
  }
};

// Basic destructuring
const { name, age, email } = user;

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

// Default values
const { name, age, phone = "Not provided" } = user;

// Nested destructuring
const { address: { city, country } } = user;

// Function parameters
function greetUser({ name, age }) {
  return `Hello ${name}, you are ${age} years old.`;
}

greetUser(user);

// Array spreading
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]

// Object spreading
const user = { name: "John", age: 30 };
const updatedUser = { ...user, age: 31, city: "New York" };
// { name: "John", age: 31, city: "New York" }

// Function arguments
const numbers = [1, 2, 3, 4, 5];
console.log(Math.max(...numbers)); // 5

// Copying arrays/objects
const originalArray = [1, 2, 3];
const copiedArray = [...originalArray];
const originalObject = { a: 1, b: 2 };
const copiedObject = { ...originalObject };

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

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

// Mixed parameters
function greet(greeting, ...names) {
  return `${greeting} ${names.join(", ")}!`;
}

console.log(greet("Hello", "John", "Jane", "Bob")); // "Hello John, Jane, Bob!"

// Creating a Promise
function fetchUserData(userId) {
  return new Promise((resolve, reject) => {
    // Simulate API call
    setTimeout(() => {
      if (userId > 0) {
        resolve({ id: userId, name: "John", email: "john@example.com" });
      } else {
        reject(new Error("Invalid user ID"));
      }
    }, 1000);
  });
}

// Using Promises
fetchUserData(1)
  .then(user => {
    console.log("User:", user);
    return fetchUserPosts(user.id);
  })
  .then(posts => {
    console.log("Posts:", posts);
  })
  .catch(error => {
    console.error("Error:", error.message);
  });

// Using async/await
async function getUserData(userId) {
  try {
    const user = await fetchUserData(userId);
    const posts = await fetchUserPosts(user.id);
    
    return {
      user,
      posts
    };
  } catch (error) {
    console.error("Error:", error.message);
    throw error;
  }
}

// Calling async function
async function main() {
  try {
    const data = await getUserData(1);
    console.log("User data:", data);
  } catch (error) {
    console.error("Failed to get user data");
  }
}

// Promise.all with async/await
async function fetchMultipleUsers(userIds) {
  const promises = userIds.map(id => fetchUserData(id));
  const users = await Promise.all(promises);
  return users;
}

// math.js - Named exports
export const PI = 3.14159;

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

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

// Or export all at once
const subtract = (a, b) => a - b;
const divide = (a, b) => a / b;

export { subtract, divide };

// main.js - Named imports
import { PI, add, multiply } from './math.js';

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

// Import with alias
import { subtract as sub, divide as div } from './math.js';

// Import all
import * as math from './math.js';
console.log(math.add(2, 3)); // 5

// user.js - Default export
export default class User {
  constructor(name, email) {
    this.name = name;
    this.email = email;
  }
  
  greet() {
    return `Hello, I'm ${this.name}`;
  }
}

// main.js - Default import
import User from './user.js';

const user = new User("John", "john@example.com");
console.log(user.greet());

// Basic class
class Animal {
  constructor(name, species) {
    this.name = name;
    this.species = species;
  }
  
  speak() {
    return `${this.name} makes a sound`;
  }
  
  // Static method
  static getInfo() {
    return "Animals are living organisms";
  }
  
  // Getter
  get description() {
    return `${this.name} is a ${this.species}`;
  }
  
  // Setter
  set nickname(nick) {
    this._nickname = nick;
  }
  
  get nickname() {
    return this._nickname || this.name;
  }
}

// Inheritance
class Dog extends Animal {
  constructor(name, breed) {
    super(name, "dog"); // Call parent constructor
    this.breed = breed;
  }
  
  speak() {
    return `${this.name} barks!`;
  }
  
  wagTail() {
    return `${this.name} wags tail happily`;
  }
}

// Usage
const myDog = new Dog("Buddy", "Golden Retriever");
console.log(myDog.speak()); // "Buddy barks!"
console.log(myDog.description); // "Buddy is a dog"
console.log(Animal.getInfo()); // "Animals are living organisms"