JAVASCRIPT FUNCTIONS BROKEN DOWN

PART 1(ONE)

Throughout your journey in programming, you will be using functions daily like you drink water. functions are used in almost all programming languages so if you understand it properly now, you’ve hacked something huge. you can build on that knowledge to achieve a lot! They are commonly known as first class citizens in javascript. This is going to be a three-part journey because the scope of functions is wide to cover, but don’t worry, i’ll make it a smooth ride.

First, let’s talk about the general idea of a function.

You can think of a function as a machine that :

1. Can Take Input
2. Process it
3. And give output/result

What does a simple machine do? It takes an input, processes it inside, and gives an output. That’s exactly what functions do as well!

We pass data into a function, and we process that data inside the function or do something with that data inside a function, and then we output or return that data.

Most programming languages have a structure or procedure that lets you extract the code and run it as a separate unit or reuse it repeatedly. In JavaScript, we call these procedures functions.

The most simple form of a function is a simple piece of code that we can repeatedly reuse in our code. What does this mean?

With function, you don’t have to write that code over and over again throughout your program. Instead, once you create it, you can reuse it whenever you want. when we run a program , You’ll often have some code that you need to execute multiple times in a program. You may need to run it 2 or 3 times, or you may need to run it millions of times. Regardless, you don’t want to write that code repeatedly. What can you do? use a function!

A JavaScript function, therefore, is a block of code designed to perform a particular task. They also can be reused & modified.

let’s take a simple example:

function myAge(){
console.log('I am 22 years old')
}
myAge()

let me break down what I just did above.

• We started with the function keyword. This is how we declare a function.
• Then, we defined a function name, which is myAge. This is the given name for the function, that will simply log something to the console.
• Then, we added parenthesis. We use parenthesis to add parameters, which we will be exploring more later.
• Then, we used curly braces to create a function body. All the code that is within this curly braces is called the function body. And it's this code that will be executed when we run this function.
• To use this function, we simply write the function name followed by a parenthesis. And this process is called "invoking", "running", or "calling" the function.

To put in a succinct way — Before using a function, you must first define it with the reserved keyword, function. After the word function, you write the function's name followed by a pair of parentheses (()). After the closing parenthesis, the code you want to associate with the function -- the function body -- gets placed between curly braces ({}).

Let’s say you want to add twelve to a number. Here’s how we can do it without function.

const number = 1 + 12
//answer = 13

with a function, it looks this way

function addTwelve(number) {
    return number + 12;
}
const firstNumber = addTwelve(1);  // Answer = 13

The good part of it is that we can use this function again and again throughout our program when we need it. So we don’t have to duplicate the code. Now, let’s see what will happen if we want to add 12 to some more numbers.

Check the below example.

function addTwelve(number) {
    return number + 12;
}
const firstNumber = addTwelve(1); // Answer = 13
const secondNumber = addTwelve(2); // Answer = 14
const thirdNumber = addTwelve(3); // Answer = 15
const fourthNumber = addTwelve(4); // Answer = 16
const fifthNumber = addTwelve(5); // Answer = 17

from the above example, we can see that functions help us reuse our code instead of tediously repeating a task over and over again.

Now let’s move on to understand few other parts of functions. Which are;

• Parameters and Arguments
• Return Statement
• Calling a Function.

what are parameters and arguments?

Parameters are used when defining a function (what goes inside the parentheses I wrote about earlier) while arguments are the values the function receives from each parameter when the function is executed.

parameter is the placeholder while the argument is the actual value. let’s take an example real quick.

function addTwelve(number) {
    return number + 12;
}
const firstNumber = addTwelve(1); // Answer = 13

As you can see, we added the “number” parameter inside the parentheses() . This is the input or list of input values that need to be received to perform the function. You can think of it as an empty placeholder that needs to be replaced later on. Note that a function can have multiple parameters depending on the structure of the code you want to run.

Arguments are now the actual values of function parameters for those input data. So in the above examples, the placeholder is replaced by the actual data, the number “1”.

RETURN STATEMENT

Return statements are the result of the function. just as the name goes, it returns a value. we use the return keyword before calling the function. Some functions may not return a value, but most functions do. We call this value the result of the function. Then, this value that is returned can be used anywhere later in the code.

Let’s look at an example:

function subtractFifty(number) {
    console.log(number - 50);
}

subtract50(200);  // Answer = 150

//2nd example
function multiplyFive(number) {
    return number * 5;
}

const firstNumber = multiplyFive(5);  // Answer = 25

in the first example, we did not return the function. we only logged it to the console.

In the second examples, we returned a value as a result of the function. And then, we have stored the function in another variable (firstNumber) and called the function. So every time the function is called, the returned value will be the result of the function.

INVOKING/CALLING A FUNCTION

Great! We have learnt how to define our function and even return it, but how do we get it to run? You can invoke (or call) a function by referencing the function name followed by parentheses.

function myBio(){
console.log('I am a good software developer and I am friendly')
}

myBio()

The last part of the above example was where we called the function. By stating “myBio()” with the parentheses, we have called the function. A lot of newbies always forget to call the function but remember that your function will not run if you don’t call it.

furthermore, If we want to store the values that are returning from our functions and use them later on, you can always store it in another variable by creating another variable and adding the function name as the value of that variable.

function multiplyFive(number) {
    return number * 5;
}

const firstNumber = multiplyFive(5);  // Answer = 25

In the above example,

• We have created a variable called firstNumber, We have given the function name (multiplyFive) as the value to that variable and you can now use this variable to call the function whenever you want!

Congratulations! you’ve written your first function. In the next topic, we will be taking a deeper dive. come with your life jacket if you can’t swim

Note: if you haven’t understood variable declarations and values, please look at THIS before coming back to this article.