What Even Is a Function?

Okay so you keep seeing the word "function" everywhere and you're like... what IS that? Let me break it down.

But First — Why Should You Care?

Functions are everywhere. Every app you use runs on them. Here's what they actually power in the real world:

• Instagram: When you tap the heart button, a function runs that adds your like, updates the count, and animates the heart. One function, triggered by one tap.
• Uber Eats: When you hit "Place Order," a function takes your cart, calculates the total with tax and tip, sends it to the restaurant, and charges your card. That's a chain of functions working together.
• Spotify: The shuffle button? A function that picks a random song from your playlist. The search bar? A function that takes what you typed and finds matching songs.
• Your calculator app: Every button press calls a function — add, subtract, multiply, equals.

Functions aren't some abstract concept you learn and forget. They're the building blocks of literally every feature in every app you've ever used. Once you understand them, you can start building those features yourself.

The Coffee Shop Analogy

Think about ordering coffee. You walk up to the counter, you say what you want, and the barista makes it for you. A function works the same way:

1. You call it (walk up to the counter)
2. You give it inputs (your order: "oat milk latte, please")
3. It does its thing (barista makes the drink)
4. It returns something back to you (your latte!)

1// This is a function! That's it. That's the whole thing.
2function makeCoffee(milk, size) {
3return 'One ' + size + ' latte with ' + milk + ', coming up!';
4}
5
6// Now let's 'call' it (place our order):
7makeCoffee('oat milk', 'large');
8// Returns: 'One large latte with oat milk, coming up!'

Why Should You Care?

Without functions, you'd have to write the same code over and over again. Imagine if the barista had to re-learn how to make a latte every single time someone ordered one. Functions let you write something once and reuse it forever.

The Arrow Function (Fancy Version)

You'll also see functions written like this:

1// Same thing, just written differently:
2const makeCoffee = (milk, size) => {
3return 'One ' + size + ' latte with ' + milk + ', coming up!';
4};
5
6// Or even shorter (one-liner):
7const makeCoffee = (milk, size) => 'One ' + size + ' latte with ' + milk + '!';

Let's Build Something Real

Here's a function you might actually use — one that formats a name nicely:

1function formatName(firstName, lastName) {
2// Make sure the first letter is capitalized
3const first = firstName[0].toUpperCase() + firstName.slice(1);
4const last = lastName[0].toUpperCase() + lastName.slice(1);
5return first + ' ' + last;
6}
7
8formatName('denise', 'tech');
9// Returns: 'Denise Tech'

Quick Recap

• A function is a reusable recipe
• You give it inputs (called parameters)
• It does something and returns a result
• You can call it as many times as you want
• Arrow functions (=>) are just a shorter way to write them