Lesson Monday

In the previous lesson, we learned how to use a few built-in JavaScript functions. Now let's write some custom functions.

We're going to write a very simple function statement to start. We'll give the function the name sayHi.

> function sayHi() {
   alert('Hello from Epicodus!');
}
undefined
> sayHi();

When we write a function like this, it's called a function declaration. That just means we've declared a function starting with the function keyword. There is another way of writing a function which we will briefly discuss at the end of this lesson.

Every time we run the sayHi() function, it executes all JavaScript code between the opening and closing braces - { and }. In this case, our function pops up a dialog box with the text Hello from Epicodus!. This isn't terribly useful so let's write a slightly more interesting function. We'll name this function saySomething():

> function saySomething(whatToSay) {
   alert(whatToSay);
}
undefined
> saySomething("hello!");

Let's break down this function into all of its parts.

  • We start with the function keyword. A function declaration always starts with this keyword.

  • Next, we have the function name. Note that it should always be lower camel case, which means the first letter should be capitalized along with the first letter of other words in the function (Something in this case). Every other letter should be lower-cased. We should also name our functions as clearly as possible so other developers can quickly see what they are supposed to do. In the example above, we are simply denoting that this function will say something.

  • After the name of the function, we will always include parentheses. If a function has parameters, they go inside these parentheses. sayHi() doesn't have any parameters because we don't need to pass anything into the function. On the other hand, we want to be able to pass whatToSay into saySomething(whatToSay). whatToSay is the parameter. We can pass as many parameters as we want into a function - however, it is a bad practice to have more than two or three parameters because it can lead to buggy code.

In the example above, we pass "hello!" into the parameter whatToSay. "hello!" is called an argument. A parameter is essentially just an empty variable that we can use inside the function while the argument is the value we pass to that variable.

  • Next, we have the function body. This is enclosed in curly braces { and }. It is convention to have the opening curly brace on the same line as the function declaration. Meanwhile, the closing curly brace goes on the final line of the function. The function body includes any code that should be executed when the function is called.

Before we continue, let's reiterate the difference between an argument and a parameter - since the distinction is often confusing for beginners.

"hello!" is an argument to the function saySomething(). In the saySomething() function, that argument is assigned to the variable whatToSay - we call that variable a parameter. If you're confused about the difference between arguments and parameters, just remember that the argument is the information you pass in, and the parameter is the variable that receives the argument. In this case, "hello!" is the argument, and whatToSay is the parameter. The parameter can then be used just like any other variable. If this is unclear, reread it and play around with writing your own functions. Be sure you understand how to write a function that uses an argument passed in.

Okay, on to another, slightly more complex function:

> function add(number1, number2) {
   return number1 + number2;
}
undefined
> add(3, 5);
8

The return keyword tells JavaScript to return the result from that line of code. Without a return, JavaScript will return undefined from the function, which is JavaScript's way of saying something does not have a value.

Let's step through exactly what happens if we call add(3, 5):

  1. We call the add function with the arguments (3, 5).
  2. The add function is run. The parameter number1 is set equal to 3, and the parameter number2 is set equal to 5.
  3. 3 + 5 is run.
  4. The result of 3 + 5 is returned.
  5. The add function ends.

Notice our variables names: number1 and number2. We could have called them n1 and n2, and it would have taken less typing. But the name number1 very clearly expresses what the variable is for, whereas n1 will require another programmer (or your future self, when you come back to your code in a few months and don't remember exactly how it works) to figure it out from context. In this example, it would be pretty obvious what n1 is for. But if you practice choosing descriptive names now and resisting the temptation to abbreviate, you will be in the habit of doing it when you're writing more complex code where it matters more.

Declaring Functions with Function Expressions

Note: The content below is not strictly necessary right now - we just want you to be familiar with it. We will explore function expressions more once we learn about functional programming in React.

Note that we can also store a function inside a variable like this:

const add = function(number1, number2){return number1 + number2;}

This style of declaring a function is called a function expression or a function literal. We can then call this function by doing the following:

add(3, 5)
> 8

As we can see, calling the function works in exactly the same way as it does when we write the function like this:

function add(number1, number2) {
   return number1 + number2;
}

We will not be writing function expressions regularly until we learn how to do functional programming in React. The difference between function expressions and function declarations is subtle - but it can trip up beginners. Stick with function declarations for now!

If you'd like to read more about the difference, check out this page on MDN.

Terminology

An argument is what you pass into a function or method; a parameter is a variable that's assigned to the argument. Above, number1 and number2 are parameters, and 1 and 2 are arguments.

Sample code

This function takes 2 arguments (expecting two numbers) and assigns them to the parameters number1 and number2. The function returns a number:

function add(number1, number2) { return number1 + number2; }
> add(1, 2);

Parts of a function

  • A function declaration starts with the function keyword.
  • Next comes the name. It should be descriptive and clear. In the example above, the name is add. Always use lower camel case for function names.
  • The name is always followed with parens. These parens may or may not include parameters. In the add function above, number1 and number2 are parameters.
  • The function body is enclosed in curly braces. The code inside the curly braces is the code that will be executed when the function is called.
  • Generally, you will want to return a value from your function. It's very common for beginners to forget the return, which means that the function will return undefined instead of a value. In the example above, the add function will return the value of number1 + number2.

Use descriptive variable names so that your code is easily readable. Don't be tempted to abbreviate.

Lesson 24 of 61
Last updated July 30, 2020