JavaScript Functions & Operators

Hey there! In this code tutorial, we're going to learn about JavaScript functions.

What is a function?

A function is a reusable code! With a function, you can plug in different inputs and receive outputs based on the input.

Imagine a function that adds 1 to any number you give it:

1 -> function -> 2

4 -> function -> 5

The input is on the left of the function and the output is on the right. When we input 1, we get back 2. When we input 4, we get back 5.

What might this function look like in code?

function addOne(input){
    return input +1;
}

Ready to learn more about function syntax? Let's start coding!

Functions

A function is a reusable code! One important aspect of functions is the ability to return an output. Let's take a look at this closely.

function getNumber(){
    return 4;
}

In this case, the number 4 is always returned when we call getNumber. Calling the function would look like this:

const num = getNumber();

The value 4 would now be stored in our variable num!

Function Syntax

Let's break down function syntax a bit!

Calling a Function

You will see the term call used with functions. What does it mean? Call means to execute the function. Often when you call a function, you'll pass specific input values.

You may also see the word invoke. These terms mean the same thing, you can call a function or you can invoke a function

What does calling a function look like?

const output = addOne(2);

Here addOne is our function. We're using parenthesis after addOne to call the function. We are passing in an input value 2 into our function addOne. Functions don't need to have input values, consider our getMessage function:

const message = getMessage();

In this case, we're just using parenthesis to call the function. We are not passing any input values to this function.

Function Declaration

In order to call a function, we must first define it!

function addOne(input){
    return input +1;
}

In this example, we are creating a function called addOne which takes one input called input. We are returning the input plus one.

function getMessage(){
    return "Hello World";
}

This function getMesssage does not take input. We are simply returning a string, saying "Hello World!".

Return Statement

The return keyword within a function will return the desired output of your function. This value will be returned to where the function is called.

For example, if you have the following statement:

const a = addOne(1);

The variable a is now assigned to the return value of the addOne function invoked with an input of 1, which evaluates to 2.

You may see the term declare a function. This is synonymous with defining a function. It means we are creating a function. Once it's been created, we'll be able to call it elsewhere in our program!

Add Two

Now it's time to write a function that accepts some input.

For inputs, you might see the term parameter or argument. See details for a distinction between these two terms.

Parameters and Arguments

Both the terms parameter and argument refer to the inputs supplied to a function. Let's take a look at a function that has two inputs:

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

In this case, there are two inputs. We can also say there are two parameters: a and b. These are the variables that are defined in the function declaration. If we were to call this function with two values: 1 and 2:

addNumbers(1,2);

Values 1 and 2 would be considered arguments. They are the data supplied to the function, which get filled into the parameters.

This a pretty small distinction, so generally you'll hear these terms used interchangeably! The important this is to know that when someone says parameter or argument they are referring to the function inputs

When calling a function with input, we pass the input into the parenthesis:

assOne(1);

When defining a function that takes an input, we will also add it to the parenthesis! Inside the function definition:

function addOne(input){
    const output = input +1;
    return output;
}

The + is referred to as an addition operation. This operator takes two numbers and adds them together. For instance, 3+1 would evaluate to 4.

On the flip side, JavaScript also has a subtraction operator -. JavaScript has many more operators which we'll discuss in future stages!

Multiply Two Numbers

Now we're going to learn about two things: the multiplication operator and passing multiple function inputs!

Multiplying Numbers

In the last stage, we added numbers together with the + operator. We can also multiply numbers using the multiplication operator:

const a = 2;
const b = a*3;

Here, b will have the value 6! We are using the multiplication operator to multiply 2 and 3.

Multiple Inputs

In the last stage, we learned how to define an input for a function. We can expand on this by accepting several inputs, separated by a comma!

function sum (a,b,c){
    return a+b+c;
}

Here, our function sum accepts three inputs a, b, and c. It will add these three values and return the sum. Calling sum(3,4,5) would return the value 12!

Division Operator

At this stage, we're going to introduce a new operator, the division operator: /. The divide operator takes two inputs and divides the left side by the right side. So 8/4 would evaluate to 2.

Averaging Numbers

In this exercise, we're going to work on averages.

Let's think about how to determine the average of three numbers.

The average of the three values 4, 5, and 6 is 5. The algorithm for figuring this out is summing all three values and then dividing by the total number of values (3).

In this case, the sum of 4, 5, and 6 is 15. Then we divide 15 by 3 (15/3) to get 5.

To ensure that the operation occurs in the order you expect you can break them up line by line:

const sum = 1 + 2 + 3;
const average = sum / 3;

Or you can use parenthesis:

const average = (1 + 2 + 3 ) / 3;

Operator Precedence

We've learned about a few operators so far: +, -, *, and /.

Multiplication and division have higher precedence than addition and subtraction

5 + 1 * 2

This statement would evaluate to 7. The multiplication operator takes precedence over the addition operator. If the operators are the same precedence, like multiplication and divide, the expression will be evaluated from left to right.

4 / 4 * 2

This statement would evaluate to 2 because the division is the first operation from left to right. If you're not sure about the operator precedence, you can always use parenthesis:

( 5 + 1 ) * 2

This will evaluate to 12. The parenthesis will always be evaluated first before any other part of the expression.

Let's get Random!

Now let's learn to call a function within our function.

In JavaScript, there are many math utilities on the Math object.

For instance, to get a random number we can call the Math.random function:

const myRandomNumber = Math.random();

This will return some number between 0 and 1 (not including 1).

Math.random can be used to generate a random number in different ranges as well.

Random Ranges

The function Math.random generates a number between 0 and 1 not including 1.

If we wanted to generate a random number between 0 and 100, we could simply multiply the output:

//randomNumber will be between 0 and 100
const randomNumber = Math.random()*100;

Similarly, if we wanted to get a random number between 25 and 100, we could multiply and then add:

//randomNumber will be between 25 and 100
const randomNumber = (Math.random()*75)+25;

The actual number here will include values after the decimal point, like 81.00635445515044. We'll learn in the next stage how to trim those values to make them an integer.

Math Floor

Now we're going to discuss another useful Math function Math.floor, Unlike Math.random, Math.floor will take an argument:

a

This function will take 2.2598223 and return l2. The function will round a number down to the nearest integer. For example, if we had the number, 2.9999, the function will round this input down to 2