JavaScript Functions and Arrow Functions

A function is a named block of code you can run whenever you need it. If you've copied the same three lines into four places, you need a function. When the rule changes, and it will, you fix it once instead of four times and hoping you found them all.

Writing and calling a function

function computeVat(amount) {
  return amount * 0.12;
}

console.log(computeVat(1000));
console.log(computeVat(250));

120
30

• function starts it, then the name, then the parameters in parentheses.
• return sends a value back to whoever called it.
• computeVat(1000) calls it. 1000 is the argument: the value that goes into amount this time.

The function doesn't run when you write it. It runs when you call it.

return vs console.log

This is the most common beginner mix-up.

function showTotal(price, qty) {
  console.log(price * qty);
}
function getTotal(price, qty) {
  return price * qty;
}

const a = showTotal(250, 3);
const b = getTotal(250, 3);
console.log("a is", a, "and b is", b);

750
a is undefined and b is 750

showTotal prints 750 but gives nothing back, so a is undefined. getTotal gives the value back, so you can store it, add VAT to it, or put it on the page. Functions that calculate something should return it. Printing is for you, while debugging.

Default values

If an argument isn't passed, the parameter is undefined. You can give it a default:

function priceWithVat(amount, rate = 0.12) {
  return amount + amount * rate;
}
console.log(priceWithVat(1000));
console.log(priceWithVat(1000, 0));

1120
1000

Arrow functions

Modern JavaScript has a shorter way to write a function. You'll see it everywhere, so you need to read it even if you prefer the long form.

const computeVat = (amount) => {
  return amount * 0.12;
};

const computeVatShort = amount => amount * 0.12;

console.log(computeVat(500), computeVatShort(500));

60 60

Both do the same as the function version. The short form works when the body is a single expression: no braces, no return, the value is returned automatically. With one parameter, the parentheses are optional. With zero or two or more, you need them: () => ..., (a, b) => ....

Where arrow functions really pay off is when you pass a function to another function, which happens a lot:

const prices = [250, 120, 75];
const withFee = prices.map(price => price + 20);
console.log(withFee);

[ 270, 140, 95 ]

map calls the arrow function once for each price and builds a new array with a ₱20 packaging fee added. You'll go deeper into this in JavaScript Intermediate.

Which one to use?

Both are fine for most functions. A simple rule: use function for named, top-level functions (they're easier to spot when scanning a file), and arrow functions for short functions you pass to something else. There's one technical difference (how this works) that matters for objects and event handlers. You'll meet it later. For now, it won't bite you.

Common mistakes

• Forgetting return, then wondering why the result is undefined.
• Calling without parentheses: getTotal is the function itself, getTotal() runs it.
• Arrow function with braces but no return: x => { x * 2 } returns undefined.
• Passing arguments in the wrong order. getTotal(qty, price) gives the same number here by luck. priceWithVat(0.12, 1000) doesn't.

What happens if you skip this

You'll keep copying code blocks. Then the VAT rate changes, you update three copies and miss the fourth, and the invoice and the checkout page show different totals.

Look at the last script you wrote. Which lines appear more than once, and what would you name the function that replaces them?