Custom Functions

Begin Programming with JavaScript Custom Functions

Text Version

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 conditional and loop, a function is another way to alter 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

Some code are messy and stressful to look at; You can hide them in a function with a sensible function name.

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 new 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 is different from the other code, because it doesn’t run unless it’s being used.

Now with the function definition in place, we can use it 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);

mini program

↓ The num variable is a parameter that represents whatever value getting passed to the function. And the roundedNum value is returned to the outside world by using the return keyword.

image

A function is like a mini program, and 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. You can picture it as calling someone and asking them to do something for you. So a function is like the customer service. They can be located anywhere, and you can call them whenever you need them. The code calling the function is referred to as the client code.

↓ Because the computer does’t run the function until we use it, it doesn’t matter if the function definition appears before or after the client 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

Our function is so simple that it can be written in just 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 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 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);

unpack:

main is the name of the new function. We don’t have to create the input array inside the new function, because it will be passed into the function as a parameter.

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.