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.

Note once again how we are using semicolons here. The first line, which uses the function keyword and includes the name of the function, ends with a {. It will never have a semicolon.

The next line has an alert. Statements and expressions will have semicolons at the end of the line regardless of whether they are inside functions or not.

Finally, we close our function with a } (curly brace). We don't add a semicolon here. Why is this? Well, this is what's known as a function declaration. It's not a statement. JavaScript knows that the } represents the end of the function so it doesn't need a semicolon.

If this feels fuzzy still, it's really not something to worry about. Understanding semicolon placement is important but there are much more important topics we need to focus on right now such as learning about functions and how they work. We'll also provide a debugging tool later in this section that will

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 of the name should be lower-cased while the first letter of other words in the function (Something in this case) should be capitalized. 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. Here's another example of lower camel case: thisIsLowerCamelCase.

  • 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 a special kind of variable that holds the value of the argument passed into the function. When the function is called, the value of the argument that is passed into the parameter is then available inside the function.

  • 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 be using function expressions briefly in Intermediate Javascript but for the most part we won't be using them 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. When in doubt, stick with function declarations!

Also, you might be wondering why we added a semicolon. Doesn't the curly brace indicate the end of the function? Yes, it does, but we are treating this similarly to other statements where we assign a value to a variable. For that reason, we are adding a semicolon to the end.

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. In the example below, number1 and number2 are parameters while 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 25 of 27
Last updated April 7, 2021