// This is a comment - the computer ignores this text

// Printing to the console
console.log('Hello, World!');

// Basic math operations
console.log(5 + 10); // Output: 15
console.log(10 - 5); // Output: 5
console.log(5 * 5); // Output: 25
console.log(10 / 2); // Output: 5

// Declaring variables
let name = 'Sarah'; // Use let when the value might change later
const age = 25; // Use const when the value won't change
var oldWay = 'outdated'; // Older way of declaring variables (best avoided now)

// Basic data types
const myString = 'Hello'; // Text (string)
const myNumber = 42; // Number
const isAwesome = true; // Boolean (true/false)
const nothing = null; // Explicitly nothing
const notDefined = undefined; // Value not assigned
const myArray = [1, 2, 3]; // Array (collection of values)
const myObject = { name: 'Book' }; // Object (collection of key-value pairs)

// Basic function declaration
function sayHello(name) {
  return 'Hello, ' + name + '!';
}

// Using the function
console.log(sayHello('Alex')); // Output: "Hello, Alex!"

// Function that adds two numbers
function add(a, b) {
  return a + b;
}

const sum = add(5, 3);
console.log(sum); // Output: 8

// Regular function
function double(num) {
  return num * 2;
}

// The same function as an arrow function
const doubleArrow = (num) => num * 2;

console.log(double(4)); // Output: 8
console.log(doubleArrow(4)); // Output: 8

// Multiple parameters need parentheses
const add = (a, b) => a + b;
console.log(add(3, 5)); // Output: 8

// For multiple lines, use curly braces and 'return'
const greet = (name) => {
  const message = 'Hello, ' + name + '!';
  return message;
};

// Creating an array
const fruits = ['apple', 'banana', 'orange'];

// Accessing items (starting from zero)
console.log(fruits[0]); // Output: "apple"
console.log(fruits[1]); // Output: "banana"

// Adding to the end of an array
fruits.push('mango');
console.log(fruits); // Output: ["apple", "banana", "orange", "mango"]

// Common array methods
const numbers = [1, 2, 3, 4, 5];

// map - transforms each item
const doubled = numbers.map((num) => num * 2);
console.log(doubled); // Output: [2, 4, 6, 8, 10]

// filter - keeps only items that pass a test
const evenNumbers = numbers.filter((num) => num % 2 === 0);
console.log(evenNumbers); // Output: [2, 4]

// Creating an object
const person = {
  name: 'Emma',
  age: 28,
  city: 'Berlin',
  hobbies: ['reading', 'hiking'],
};

// Accessing properties
console.log(person.name); // Output: "Emma"
console.log(person['age']); // Output: 28 (alternative way)

// Adding or changing properties
person.job = 'Developer';
person.age = 29;

console.log(person);
// Output: {name: "Emma", age: 29, city: "Berlin", hobbies: ["reading", "hiking"], job: "Developer"}

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

// Without destructuring
const firstColor = colors[0];
const secondColor = colors[1];

// With destructuring
const [first, second, third] = colors;

console.log(first); // Output: "red"
console.log(second); // Output: "green"
console.log(third); // Output: "blue"

// Skipping elements
const numbers = [1, 2, 3, 4, 5];
const [one, , three, ...rest] = numbers;

console.log(one); // Output: 1
console.log(three); // Output: 3
console.log(rest); // Output: [4, 5]

const user = {
  name: "Alex",
  age: 32,
  location: "Tokyo",
};

// Without destructuring
const userName = user.name;
const userAge = user.age;

// With destructuring
const { name, age, location } = user;

console.log(name); // Output: "Alex"
console.log(age); // Output: 32
console.log(location); // Output: "Tokyo"

// Using different variable names
const { name: fullName, age: years } = user;
console.log(fullName); // Output: "Alex"
console.log(years); // Output: 32

// Default values
const { name, country = "Unknown" } = user;
console.log(country); // Output: "Unknown" (since it doesn't exist in the object)

const name = 'Maria';
const age = 30;

// Old way of combining strings
const greeting1 =
  'Hello, my name is ' + name + ' and I am ' + age + ' years old.';

// Using template literals
const greeting2 = `Hello, my name is ${name} and I am ${age} years old.`;

console.log(greeting2);
// Output: "Hello, my name is Maria and I am 30 years old."

// You can also do calculations inside ${}
const price = 19.99;
const tax = 1.2;
const total = `The total is $${(price * tax).toFixed(2)}`;

console.log(total);
// Output: "The total is $23.99"

// Multi-line strings are easy with template literals
const message = `This is line one.
This is line two.
This is line three.`;

console.log(message);
// Output:
// This is line one.
// This is line two.
// This is line three.

const age = 20;

// Basic if statement
if (age >= 18) {
  console.log('You are an adult');
} else {
  console.log('You are not an adult yet');
}

// Multiple conditions
const score = 85;

if (score >= 90) {
  console.log('Grade: A');
} else if (score >= 80) {
  console.log('Grade: B');
} else if (score >= 70) {
  console.log('Grade: C');
} else {
  console.log('Grade: F');
}

// Logical operators
const isRegistered = true;
const hasConfirmedEmail = true;

if (isRegistered && hasConfirmedEmail) {
  console.log('Welcome!');
}

const isMember = false;
const hasFreeTrial = true;

if (isMember || hasFreeTrial) {
  console.log('You can access this content');
}

const age = 20;

// Traditional if/else
let message;
if (age >= 18) {
  message = "You can vote!";
} else {
  message = "Too young to vote.";
}

// Same thing using ternary operator
const message = age >= 18 ? "You can vote!" : "Too young to vote.";

console.log(message); // Output: "You can vote!"

// Useful in React and other frameworks
const userType = "admin";
const greeting =
  userType === "admin" ? "Welcome, Administrator" : "Welcome, User";

console.log(greeting); // Output: "Welcome, Administrator"

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

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

// Rest in array destructuring
const [first, second, ...others] = [1, 2, 3, 4, 5];

console.log(first); // Output: 1
console.log(second); // Output: 2
console.log(others); // Output: [3, 4, 5]

// Rest in object destructuring
const person = { name: 'Alex', age: 25, city: 'Paris', job: 'Developer' };
const { name, age, ...otherDetails } = person;

console.log(name); // Output: "Alex"
console.log(otherDetails); // Output: { city: "Paris", job: "Developer" }

// Spreading arrays
const numbers1 = [1, 2, 3];
const numbers2 = [4, 5, 6];
const combined = [...numbers1, ...numbers2];

console.log(combined); // Output: [1, 2, 3, 4, 5, 6]

// Copying arrays (without reference)
const original = [1, 2, 3];
const copy = [...original];
copy.push(4);

console.log(original); // Output: [1, 2, 3] (unchanged)
console.log(copy); // Output: [1, 2, 3, 4]

// Spreading objects
const defaults = { theme: 'light', fontSize: 12, cache: true };
const userPrefs = { theme: 'dark', notifications: false };

const settings = { ...defaults, ...userPrefs };

console.log(settings);
// Output: { theme: "dark", fontSize: 12, cache: true, notifications: false }

const user = {
  name: 'Alex',
  details: {
    age: 30,
    preferences: {
      theme: 'dark',
    },
  },
};

// Without optional chaining (error-prone)
// If user.details or user.details.preferences is undefined,
// this will throw an error
// const theme = user.details.preferences.theme;

// With optional chaining (safe)
const theme = user?.details?.preferences?.theme;
console.log(theme); // Output: "dark"

// If a property doesn't exist
const country = user?.details?.location?.country;
console.log(country); // Output: undefined (no error!)

// With arrays
const users = [{ name: 'Alex', role: 'admin' }, { name: 'Sarah' }];

console.log(users[0]?.role); // Output: "admin"
console.log(users[1]?.role); // Output: undefined (no error)

// With function calls
const getData = () => ({ value: 42 });
// const noData = undefined;

console.log(getData?.().value); // Output: 42
// console.log(noData?.().value); // Output: undefined (no error)