📖 Notes
LESSON 15 OF 32
Functions — Declaration, Expression, Arrow
Three Ways to Write the Same Logic
Function declarations, expressions, and arrow functions all define reusable logic — but they differ in hoisting behaviour and how they handle "this," which matters once you reach React.
Three Forms
Declaration vs Expression vs Arrow
📢
Declaration
function name() {} — hoisted, callable before it's defined.📝
Expression
const name = function() {} — not hoisted.➡️
Arrow (ES6)
const name = () => {} — shorter syntax, no own "this".🎁
Default Parameters
function f(x = 10) {} — fallback value if the argument is omitted.Destructuring
const { name, age } = obj;— pull values out of objectsconst [first, ...rest] = arr;— pull values out of arrays
All Three Forms
JS// Declaration (hoisted)
function greet(name) {
return `Hello, ${name}!`;
}
// Arrow function (ES6)
const greet = name => `Hello, ${name}!`;
// Default parameters
const power = (base, exp = 2) => base ** exp;
power(3); // 9
power(2, 8); // 256
// Destructuring
const { name, age } = user;
const [first, ...rest] = [1,2,3,4];
💡
Why this matters for React
Arrow functions don't create their own "this," so they inherit it from the surrounding scope — this is exactly why React components almost always use arrow functions for event handlers instead of regular functions.