Functions, part 1: make one, call it, get an answer back

A function is a piece of code with a name, that you can run whenever you want, as many times as you want. Instead of writing the same lines again and again, you write them once and call them by name. By the end of this lesson you'll be able to make a function, run it, give it information to work with, and get an answer back.

Make a function, then call it

Think of a function as a recipe. Writing the recipe down doesn't cook anything. You have to make it and then call it:

// 1. Make the function
function sayHello() {
  console.log("Hello!");
  console.log("Welcome to EDUFY");
}

// 2. Call it (run it)
sayHello();
sayHello();

• function tells JavaScript you're making a function.
• sayHello is its name.
• The code between { and } is what it does.
• sayHello() runs it. The brackets () are what make it run.

Making the function prints nothing. Each call runs the code once, so you see the two lines twice.

Give it information: parameters

Most functions need some information to work with. You put a name for it between the brackets. That name is called a parameter:

function greet(name) {
  console.log("Hello, " + name + "!");
}

greet("Sara");
greet("Omar");
greet("Lina");

name works like a variable that only exists inside the function. Each time you call greet, the value you put in the brackets ("Sara", "Omar"…) goes into name.

A function can take more than one value. Separate them with commas, and give them in the same order:

function introduce(name, age) {
  console.log(name + " is " + age + " years old");
}

introduce("Sara", 16);
introduce("Omar", 17);

Get an answer back: return

console.log only shows a value. Often you want the function to give back an answer that the rest of your code can use. That's what return does:

function add(a, b) {
  return a + b;
}

const result = add(2, 3);
console.log(result);        // 5
console.log(add(10, 20));   // 30
console.log(add(1, 1) * 2); // 4

When the function reaches return, it stops and hands the value back to where it was called. You can store the answer in a variable, print it, or use it in more maths.

A real example: prices

Here is a function you could find in a real shop. It works out the total for one product:

function getTotal(price, quantity) {
  return price * quantity;
}

const shirts = getTotal(20, 3);
const socks = getTotal(5, 4);

console.log("Shirts: " + shirts + " €"); // 60 €
console.log("Socks: " + socks + " €");   // 20 €
console.log("All: " + (shirts + socks) + " €");

If the price rule ever changes (a discount, for example), you change it in one place, and every call uses the new rule.

Give functions good names

A function does something, so start its name with a verb: getTotal, showMessage, addItem, isValid. When you read getTotal(20, 3), you already know what happens without opening the function.

Common mistakes

Exercise

function toFahrenheit(celsius) {
  return celsius * 1.8 + 32;
}

console.log(toFahrenheit(0));   // 32
console.log(toFahrenheit(20));  // 68
console.log(toFahrenheit(100)); // 212

In the next lesson you'll use functions on a real web page: with buttons, with the short arrow => way of writing them, and with default values.