# The Anatomy of a JavaScript function, part 2

## Let's learn how to generalize functions in JS!

Ajdin Imsirovic

is a developer, technical writer, and a (former) designer.

This is the second post in the series of posts titled “The Anatomy of a JavaScript function”.

Photo by Kobby Mendez on Unsplash.com

If you are brand new to functions in JavaScript, I warmly recommend reading part 1 first.

Let’s quickly revise what we’ve learned:

Javascript functions are *like machines*.

We can *define them* - i.e “build the machine”.

We can *call them* - i.e “run the machine”.

We can define what inputs (“raw materials”) the machine will take - i.e we specify *function parameters*.

We can give the actual inputs to the machine when we run it - i.e we call our function, and we *pass in arguments* it will use.

In part 1, we’ve seen an example of a Bottle Capper machine and then we wrote a JavaScript function to imitate that behavior.

When we built the Bottle capper machine in the form of the `bottleCapper`

function, we gave it two parameters: a `bottle`

and a `cap`

.

```
function bottleCapper(bottle, cap) {
return bottle + cap;
}
```

Now we realize that we want to build another machine. This one will staple two pieces of paper together, so we’ll call it `paperStapler`

.

```
function paperStapler(firstPiece, secondPiece) {
return firstPiece + secondPiece
}
```

And now we can run it too, just like this:

```
paperStapler("Page 1", "Page 2")
```

Great! We’ve just built and ran our new machine!

Soon enough, if we keep going like this, we might have a full warehouse of those things!
We just think of a simple machine, and *poof* - we build it, just like that.

Things can’t possibly get better than this, right?

Or can they?

Truth is, if we compare our `bottleCapper`

and our `paperStapler`

, we’ll see they’re doing almost the exact same thing.

Even their structure is almost the same. ** Generally**, we could look at it like this:

```
function machineName(something1, something2) {
return something1 + something2
}
```

Taking things even further, let’s change a rather non-descript `machineName`

function name and call it `concatenateArgs`

.

“Concatenate” is a fancy way of saying “put them together”, and “Args” is just an abbreviation of “Arguments”.

We can make our function name even shorter, and call it `concatArgs`

.

Instead of `something1`

and `something2`

, let’s give it a more generic `a`

and `b`

.

Now we have our updated function definition:

```
function concatArgs(a, b) {
return a + b
}
```

We’ve just built a magical machine! We no longer have to specify if it’s a *Bottle capper* or a *Paper stapler* - whatever two things we give it, it will put them together.

Thus, instead of filling up our warehouse with a bunch of machines that ** generally** do the same thing, we’ve just built a single one that’s gonna do

*all*the work. Pretty cool stuff!

## Generalizing functions

Hopefully you’ve caught me writing the word “generally” in the previous section twice. It was a hint at the formal name for what we did in the previous section: *We took the bottleCapper and the paperStapler functions and we*

**generalized**

*them into*.

`concatArgs`

Generalizing makes our functions applicable to more situations.

Let’s look at another example to see this in practice.

Let’s say we want to allow a user to give us a number, and we’ll tell our user if that number is divisible by 2.

Of course, this is a trivial example, but our focus here is on *function generalization*; our focus is not on building complex functions.

We’ll keep things even simpler and use ES5 syntax:

```
var divisibleByTwo = function() {
var num = Number(prompt("Enter a number"))
var testResult = num % 2;
if (testResult == 0) {
alert ("This number IS divisible by 2");
}
if (testResult != 0) {
alert ("This number ISN'T divisible by 2");
}
}
```

In the above function, we’re keeping things as simple as possible:

- On line 1, we start to define our function
- On line 2, we prompt the user for an answer. Since that answer is a string, we convert it to a number using the native
`Number()`

function - On line 3, we declare the
`testResult`

variable; we also store the result of`num % 2`

inside of it. The`%`

is the modulus operator, and returns the remainder of division. If our number is divisible by 2, there will be no remainder - i.e the remainder of such division is.*zero* - On lines 4, 5, and 6, we test if the value stored in
`testResult`

is indeed a zero. If it is, we’ll alert the message:*This number IS divisible by 2*. - On lines 7, 8, and 9, we test if the value stored in
`testResult`

is not a zero. This means that our division has a remainder, such as if we divided 3 with 2, or 5 with 2, or 7 with 2, etc. If this if statement’s condition is satisfied, we’ll alert the message:*This number ISN’T divisible by 2*.

Let’s now imagine that we need to check if user input is ** divisible by 3**.

We could write a similar function to the one we just saw:

```
var divisibleByThree = function() {
var num = Number(prompt("Enter a number"))
var testResult = num % 3;
if (testResult == 0) {
alert ("This number IS divisible by 3");
}
if (testResult != 0) {
alert ("This number ISN'T divisible by 3");
}
}
```

This function, just like the previous one, works perfectly.

But how do we make a function that will check if a number is divisible by any other number, without remainder? Do we write an infinite number of functions, for each specific number?

Of course not. That would be silly.

Instead, we write a generalized `divisibleByX`

function, like this:

```
var divisibleByX = function() {
var testedNumber = Number(prompt("Enter the num to be tested"));
var x = Number(prompt("Enter the num that tests"));
var testResult = testedNumber % x;
if (testResult == 0) {
alert ("This number IS divisible by " + x);
}
if (testResult != 0) {
alert ("This number ISN'T divisible by " + x);
}
}
```

Now we can run our function, and we’ll be asked two questions:

*Enter the num to be tested*- I’ve typed in.*15**Enter the num that tests*- I’ve typed in.*5*

Once we give these two answers, we’ll get back the following message:

*This number IS divisible by 5.*

If we give a different answer, such as ** 16** and

**, the message will be:**

*5**This number ISN’T divisible by 5.*

Great! We’ve just learned how to generalize functions in JavaScript.

This wraps up part 2 of the Anatomy of a JavaScript function article series.

In part 3, we’ll learn about differences between ES5 and ES6 functions.