Custom Functions

Begin Programming with JavaScript Custom Functions

We’ve been using only the functions that come with JavaScript, but in practice, most functions that programmers use are either created by themselves or created by other programmers.

We’ll see how to create our own functions in this chapter.

Similar to a conditional and a loop, a function is another way to change the linear flow of a program. A function is a group of isolated code that can be run on demand.

use case

There are two main reasons why you might want to create your own functions.

Hide Details

You can hide some of the details of your code by creating a new function, so your code can be easier to read.

image

Avoid Repetitions

To avoid repetitions in the code, you can isolate the repeated code in a function, and use the function in multiple places.

image

Creating your own functions doesn’t really make your program behave any differently, but it’s important for keeping your code organized.

The Code

This is an example from the previous chapter.

let input = [1234, 2222, 3010];
let output = [];
for(let i=0; i<input.length; i++){
  // THIS ↓
  output[i] = input[i] - input[i] % 1000;
}
console.log(output);

The line using the modulo operator is a technical detail that should be hidden away. We can create a function just for that line.

This function will take the original number as the parameter, and return a rounded number.

function roundToThousand(num){
  let roundedNum = num - num % 1000;
  return roundedNum;
}

unpack:

We’re using two new keywords. The function keyword is for creating a function. The return keyword is for returning a value from the function.

roundToThousand is a name we give the function.

This entire block of code is called a function definition. A function definition will not run unless it’s being used.

Now with the function definition in place, we can use our new function with a pair of parentheses, just like how we used the other JavaScript functions:

function roundToThousand(num){
  let roundedNum = num - num % 1000;
  return roundedNum;
}

let input = [1234, 2222, 3010];
let output = [];
for(let i=0; i<input.length; i++){
  // CHANGE ↓
  output[i] = roundToThousand(input[i]);
}
console.log(output);

The value input[i] getting passed to the function is called an argument. And the num variable inside the function is called a parameter. They represent the same value but on different sides.

That’s why parameter and argument are the different sides of the same coin.

program in a program

↓ The num in the function header is a parameter. A parameter is like a variable, but it’s only available inside the function.

The parameter represents whatever value getting passed to the function.

image

A function is like a program inside a program, so the parameter and the return value are the input and output of a function.

Using a function is usually referred to as calling a function.

↓ The code in the function will get run only we call it using the parentheses, so it doesn’t matter if the function definition is located before or after the other code.

function roundToThousand(num){
  let roundedNum = num - num % 1000;
  return roundedNum;
}

let input = [1234, 2222, 3010];
let output = [];
for(let i=0; i<input.length; i++){
  output[i] = roundToThousand(input[i]);
}
console.log(output);

unpack:

All the code

One Line Function

Because this function is so simple, we can actually write it in one line.

Before:

function roundToThousand(num){
  let roundedNum = num - num % 1000;
  return roundedNum;
}

After:

function roundToThousand(num){
  return num - num % 1000;
}

We’ve been using console.log quite a bit. We can save ourselves some typing by creating a function with a shorter name.

function log(val){
  console.log(val)
}

unpack:

val is a common name; It’s short for value.

We’re using another function inside this function. This is very common in programming.

We don’t have to return anything. A function doesn’t always have to return a value.

Now, we can output to the console using just log:

function log(val){
  console.log(val)
}

function roundToThousand(num){
  let roundedNum = num - num % 1000;
  return roundedNum;
}

let input = [1234, 2222, 3010];
let output = [];
for(let i=0; i<input.length; i++){
  output[i] = roundToThousand(input[i]);
}

log(output); // CHANGE

We don’t always need a big reason to create a function.

Exercise

Create another function for the rest of the code:

...
let input = [1234, 2222, 3010];
let output = [];
for(let i=0; i<input.length; i++){
  output[i] = roundToThousand(input[i]);
}
console.log(output);

unpack:

The roundToThousand function is not shown here, for brevity.

↓ Make the input variable as a parameter for the function. And return the output array instead of logging it inside the function.

The function would be used like this:

...
let input = [1234, 2222, 3010];
let output = main(input);
console.log(output);

As a hint, you don’t have to modify anything in the for loop to create this function.

If you’re confused about what the goal is, you can glance over the solution before you begin.

Solution

...
function main(input){
  let output = [];
  for(let i=0; i<input.length; i++){
    output[i] = roundToThousand(input[i]);
  }
  return output;
}

let input = [1234, 2222, 3010];
let output = main(input);
console.log(output);

unpack:

The for loop is exactly the same from the original program.