Lesson Tuesday

In the previous lesson we saw 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();

Every time we run the sayHi() function it executes all JavaScript code between the opening and closing braces - { and }. In this case it simply 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, which we'll call saySomething:

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

As you know, we call "hello!" 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.

Other Syntax for Declaring Functions

The syntax for defining a function in the video is:

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

These function definitions are called function literals or function expressions. The syntax presented higher up on this page (i.e.function add(number1, number2){returnnumber1 + number2;}) defines a function statement. The differences between function expressions and function statements are subtle and beyond the scope of this course. Just know that both are ways of defining a function. 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);

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