JavaScript Functions and Scope

// Basic function declaration
function greet() {
  console.log("Hello!");
}

greet(); // Call the function

// Function with parameters
function greetPerson(name) {
  console.log(`Hello, ${name}!`);
}

greetPerson("Alice"); // "Hello, Alice!"

// Function with return value
function add(a, b) {
  return a + b;
}

const result = add(5, 3); // result is 8
console.log(result);

// Function with multiple parameters
function createUser(name, age, email) {
  return {
    name: name,
    age: age,
    email: email
  };
}

const user = createUser("Alice", 30, "alice@example.com");
console.log(user); // { name: "Alice", age: 30, email: "alice@example.com" }

// Function hoisting
sayHello(); // ✅ Works! Function is hoisted

function sayHello() {
  console.log("Hello!");
}

Function declarations use the function keyword. They can take parameters and return values. Functions are hoisted, meaning they can be called before they're declared in the code.

// Function expression
const greet = function(name) {
  console.log(`Hello, ${name}!`);
};

greet("Bob");

// Arrow function (ES6+)
const greetArrow = (name) => {
  console.log(`Hello, ${name}!`);
};

greetArrow("Charlie");

// Arrow function with implicit return
const add = (a, b) => a + b;
// Equivalent to:
// const add = (a, b) => { return a + b; };

console.log(add(5, 3)); // 8

// Arrow function with single parameter (no parentheses needed)
const square = x => x * x;
console.log(square(5)); // 25

// Arrow function with no parameters
const sayHello = () => console.log("Hello!");
sayHello();

// Arrow functions in React (preview)
const Button = ({ label, onClick }) => {
  return (
    <button onClick={onClick}>
      {label}
    </button>
  );
};

// Or with implicit return
const Button = ({ label, onClick }) => (
  <button onClick={onClick}>
    {label}
  </button>
);

Arrow functions provide concise syntax and are preferred in modern JavaScript and React. They have implicit return for single expressions and lexical this binding.

// Function with parameters
function greet(name, greeting) {
  console.log(`${greeting}, ${name}!`);
}

greet("Alice", "Hello"); // "Hello, Alice!"

// Default parameters
function greet(name, greeting = "Hello") {
  console.log(`${greeting}, ${name}!`);
}

greet("Bob"); // "Hello, Bob!" (uses default)
greet("Charlie", "Hi"); // "Hi, Charlie!" (uses provided value)

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

console.log(sum(1, 2, 3)); // 6
console.log(sum(1, 2, 3, 4, 5)); // 15

// Arrow function with default and rest
const createUser = (name, age = 18, ...hobbies) => {
  return {
    name,
    age,
    hobbies
  };
};

const user = createUser("Alice", 30, "reading", "coding", "gaming");
console.log(user);
// { name: "Alice", age: 30, hobbies: ["reading", "coding", "gaming"] }

Parameters make functions flexible. Use default parameters for optional values. Rest parameters allow functions to accept variable numbers of arguments.

// Global scope
const globalVar = "I'm global";

function myFunction() {
  // Function scope
  const functionVar = "I'm in function scope";
  console.log(globalVar); // ✅ Can access global
  
  if (true) {
    // Block scope
    const blockVar = "I'm in block scope";
    console.log(functionVar); // ✅ Can access function scope
    console.log(globalVar); // ✅ Can access global
  }
  
  // console.log(blockVar); // ❌ Error: blockVar not accessible here
}

// console.log(functionVar); // ❌ Error: functionVar not accessible here

// var vs let/const scope
function scopeExample() {
  if (true) {
    var varVariable = "I'm var";
    let letVariable = "I'm let";
    const constVariable = "I'm const";
  }
  
  console.log(varVariable); // ✅ Works (var is function-scoped)
  // console.log(letVariable); // ❌ Error (let is block-scoped)
  // console.log(constVariable); // ❌ Error (const is block-scoped)
}

// Scope in React (preview)
function Component() {
  const [count, setCount] = useState(0); // count is scoped to Component
  
  const handleClick = () => {
    // Can access count here
    setCount(count + 1);
  };
  
  return <button onClick={handleClick}>{count}</button>;
}

Scope determines variable accessibility. let and const are block-scoped (preferred). var is function-scoped (avoid). Understanding scope is essential for React state management.

// Function that takes a function as argument
function operate(a, b, operation) {
  return operation(a, b);
}

const add = (x, y) => x + y;
const multiply = (x, y) => x * y;

console.log(operate(5, 3, add)); // 8
console.log(operate(5, 3, multiply)); // 15

// Function that returns a function
function createMultiplier(multiplier) {
  return function(number) {
    return number * multiplier;
  };
}

const double = createMultiplier(2);
const triple = createMultiplier(3);

console.log(double(5)); // 10
console.log(triple(5)); // 15

// Arrow function version
const createMultiplier = (multiplier) => (number) => number * multiplier;

// Higher-order functions in React (preview)
function TodoList({ todos }) {
  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
}

// Event handler (function passed as prop)
function Button({ onClick }) {
  return <button onClick={onClick}>Click me</button>;
}

Higher-order functions take or return functions. They enable powerful patterns and are essential in React for event handlers, array methods, and component composition.