Functions

Episode #7 of the course Fundamentals of JavaScript by Matt Fay

 

In today’s lesson, we’ll focus on an important topic in programming: functions. Functions take in some data, do something with it, and return a value.

You might remember functions from mathematics class. Well, they’re not entirely different when we write them in our code.

Consider the square function:

f(x) = x^2

This reads as, f of x is equal to x squared.

We’ll write that below in JavaScript.

Defining a function in JavaScript is pretty simple. We use the word “function,” followed by the function’s name, sort of like defining a variable, only that, with functions, we pass them arguments, or parameters, which are contained within parentheses.

function foo(a, b) {
    return a * b;
}
foo(5, 5); // 25

In the function above, we defined a function foo, which takes in two arguments, a and b. In our function’s body (between the curly braces), we’re giving instructions to the function, and that is to simply return a times b. As you can see, when we pass some values to our function foo(5, 5), we’re going to get what we’d expect: 25. How does this work?

Well, imagine that we declared three variables: x, a, and b. x is a function, while a and b are undefined. In Lesson 3, we learned that undefined simply means that a variable hasn’t yet received any data. When we pass in 5, 5, a and b become those numbers: return 5 * 5;. Neat, right?

Note: This isn’t how things are. If we were to try accessing a or b, we’d get a reference error. a and b are unique to that function, and we don’t have access to them outside of it. They’re called “local” variables. Global variables would be stored outside a function block.

As for our squared function, we’d simply pass the function a single argument, like so:

function f(x) {
    return x * x;
}
f(5); // 25

Here, we’re simply returning a number x and multiplying it by itself.

That’s not the only way to declare functions. We can also declare a variable and assign it to a function, like so:

var x = function(a, b) {
    return a * b;
}
x(5, 5); // 25

We don’t have to actually pass anything to our function, we can leave the arguments empty, like so:

function greet() {
    alert(‘Hello’);
}
greet(); // Hello

This function can be invoked without any user input by the use of a button. Let’s say we have a button on a website, and we want to send that alert message when the button is clicked. First, we’d define our function as above, and then within the button, we’d add something called an “onclick” event, which waits for a user to click the button. Once clicked, our function will be called, alerting the “Hello” message.

 

Methods

Now, we’re going to take a look at methods. Methods are functions within an object.

var person = {
    name: “Sarah”,
    age: 24,
    greet: function() {
        console.log(“Hello, “ + this.name);
    }
}
person.greet(); // Hello, Sarah

We’ve declared a function a bit differently above than in our previous two examples. Here, the function is a property of the object.

 

Using Functions

If you open your browser, you can experiment with the code below:

function greet() {
    var name = prompt(“What is your name?”);
    alert(“Hello, ” + name);
}

Above, we’ve declared a variable name and set it equal to a built-in function prompt(), which takes in a value (in our case, name) and stores it in the name variable. Below that line, we call another built-in function, alert(), and pass it the message, “Hello,” and our name variable. If you’ve ran the code above, it wouldn’t work. It’s missing something, and that is: our call to the function. We need to invoke our function. It’s simple; we just add “greet()” below the block* of code we already have.

function greet() {
    var name = prompt(“What is your name?”);
    alert(“Hello, ” + name);
}
greet(); // calls the function and runs the code

Note: A block of code, in this case, is just the code between our curly braces.

I pose a challenge to you. See if you can make a small text-based game with the use of functions.

In tomorrow’s lesson, while you’re drinking your coffee, you’ll learn about ES6, or JavaScript’s latest features.

 

Share with friends