Learn / JavaScript / Functions & Scope
Lesson 4 of 6

Functions & Scope

A function is a recipe. You write the steps once, give the recipe a name, and from then on you just say the name whenever you want those steps carried out — with different ingredients each time.

💡 The Bottom Line

Functions let you write logic once and reuse it with different inputs. Parameters are the ingredients you plug in; return is the dish that comes back out. Scope decides which boxes (variables) a piece of code is even allowed to see.

Three ways to write the same function

JavaScript grew these three styles over time. You'll meet all three in real code, so recognize them even though you'll mostly reach for the third.

// 1. function declaration — the classic
function greet(name) {
  return `Hello, ${name}!`;
}

// 2. function expression — a function stored in a variable
const greet2 = function (name) {
  return `Hello, ${name}!`;
};

// 3. arrow function — shorter, modern, most common today
const greet3 = (name) => {
  return `Hello, ${name}!`;
};

// arrow function, one-line shortcut (implicit return)
const greet4 = (name) => `Hello, ${name}!`;

console.log(greet("Deva"));   // "Hello, Deva!"
console.log(greet4("Deva"));  // "Hello, Deva!" — identical result

🙋 There Are No Dumb Questions

Q: If arrow functions are shorter, why does anyone still write function?
A: Mostly habit and a few technical differences around a keyword called this, which matters more once you're inside objects and classes. For now, arrow functions are the safe default for almost everything you'll write.

Parameters, arguments, and return

function addTax(price, rate) {
  return price + price * rate;
}

const total = addTax(1000, 0.18);
console.log(total); // 1180

price and rate are parameters — placeholders in the recipe. 1000 and 0.18 are the arguments — the real values handed in this time. return hands a value back to whoever called the function; without it, a function silently gives back undefined.

⚠️ Watch Out

A function that never hits a return statement doesn't error — it just quietly returns undefined. This is a common source of "why is my variable undefined?" bugs. If you expect a value back, double-check the function actually returns one.

Scope — who can see which box

Scope is simply: where a variable is visible from. Three levels matter day to day:

let globalVar = "I'm visible everywhere in this file";

function outer() {
  let functionVar = "I only exist inside outer()";

  if (true) {
    let blockVar = "I only exist inside these { } braces";
    console.log(globalVar);   // ✅ works
    console.log(functionVar); // ✅ works
    console.log(blockVar);    // ✅ works
  }

  console.log(blockVar); // ❌ error — blockVar doesn't exist out here
}

The rule of thumb: a variable is visible inside the { } braces it was declared in, and in anything nested deeper — never outside them, and never in a sibling block.

🔧 Try It Yourself

Write a function called isAdult that takes an age parameter and returns true if the age is 18 or over, otherwise false. Test it with a few ages in the console.

function isAdult(age) {
  // your code here
}

console.log(isAdult(20)); // should print true
console.log(isAdult(15)); // should print false

✅ Quick Check

What does a function return if it has no return statement at all?

You've got boxes (variables) and recipes (functions). Lesson 5 teaches your code how to make decisions and repeat itself — the part that turns a script into a program.

← Back to
Next →