Functions
📚 What are Functions in JavaScript? A function is a named, reusable block of code. JavaScript has two main syntaxes: function greet(name) {} (declaration) and const greet = (name) => {} (arrow function). Call them by name as many times as you need, passing different inputs each time.
Appy Says…
JavaScript has more ways to write functions than any other language. The modern one — arrow functions — is everywhere in professional code. Once you spot the pattern, you'll see it in every React app, every API call, every event handler.
Functions in JavaScript
JavaScript has three main ways to define functions — they all do the same thing but look different:
- •Function declaration:
function greet(name) { return "Hi " + name; } - •Function expression:
const greet = function(name) { ... }; - •Arrow function:
const greet = (name) => "Hi " + name; - •Arrow functions are the modern standard — short, clean, and used everywhere
Arrow functions — the shortcut key
A full function declaration is like typing a full command in a game. An arrow function is like a keyboard shortcut — same result, way less typing. (x) => x * 2 means 'take x, return x times 2'. Once you get used to them, regular functions feel verbose.
Arrow Function Syntax Rules
- •One parameter:
name => "Hi " + name(no brackets needed) - •Multiple parameters:
(a, b) => a + b - •Multi-line body: wrap in
{ }and usereturn - •Single expression: no
{ }needed — the expression IS the return value - •No parameters:
() => console.log("hello")
Real-World Examples
- •Event handler:
button.addEventListener('click', () => { handleSubmit(); }); - •Map over data:
const doubled = nums.map(n => n * 2); - •Filter:
const adults = users.filter(u => u.age >= 18); - •Async fetch:
const getData = async () => { const res = await fetch(url); ... };
Key Facts
- •Function declarations are hoisted — you can call them before they're defined in the file
- •Arrow functions and expressions are not hoisted — define them before calling
- •
returnis implied when there's no{}in an arrow function - •Functions are first-class values in JS — you can pass them as arguments, store in variables, return from other functions
- •Callbacks are functions passed as arguments — used in event handlers, timers, fetch
Remember
Arrow functions don't have their own this — this matters in classes and event handlers. For now, use arrow functions for callbacks and short utilities. Use regular functions or methods when you need this to refer to the current object.
What You Learned
- •Three ways to define functions: declaration, expression, arrow
- •Arrow syntax:
(params) => expressionor(params) => { return ...; } - •Arrow functions are the modern standard — used in React, APIs, callbacks
- •Functions are first-class values — you can pass them around like variables
- •Callbacks: functions passed as arguments to other functions
Key Facts
- →Function declarations are hoisted — you can call them before they're defined in the file
- →Arrow functions and expressions are not hoisted — define them before calling
- →
returnis implied when there's no{}in an arrow function - →Functions are first-class values in JS — you can pass them as arguments, store in variables, return from other functions
- →Callbacks are functions passed as arguments — used in event handlers, timers, fetch
Real-World Examples
Remember
Arrow functions don't have their own this — this matters in classes and event handlers. For now, use arrow functions for callbacks and short utilities. Use regular functions or methods when you need this to refer to the current object.
Quick Quiz
How do you return a value from a function?