Functions I - Beginner's JS

Ah...functions. You have to love 'em 💙. Why, you ask?

Well, let's explore what functions are and how useful they can be. 😉

What was life like before the washing machine? You'd have to manually wash each individual clothing with your hands ✋ (with a lot of effort) in order to get them cleaned properly. Washing machines revolutionized washing, giving you the ability to wash, and dry without the effort. Just toss your clothes inside and with just the click of a few buttons, it begins!

Washing machines automated washing (manual task). This is one of the things that functions do, automate.

The syntax of a function are as follows:


function myFunc( /*arguments here or not*/ ){
      //code here
}


const myFunc = function( /*arguments here or not*/ ){
      //code here
}

const myFunc = (/*arguments here or not*/) => {
//Code here
}

The 'function' keyword is similar to 'var' keyword in that it tells the JS engine that you're declaring something.
myFunc is the function name. Like variables, you can name a function whatever you want, but by convention, it's best to do the following when naming functions:

Name your function according to its use.

Do not give the function a long name.
Functions with multiple names cannot be separated by '-' or a whitespace, you would instead name it in camelCase. Like the example above, my func is technically two words. However, instead of doing my-func or my func() we say myFunc where the first letter of the second word is capitalized.

In the parenthesis () , you can either have arguments or leave it blank. (We'll discuss parameters and arguments later)
Within the curly braces {} is the 'body' of the function. Statements (code) placed within the body will be executed when the function is called.

Note: There's no need to put a semi colon at the end of the last curly bracket like so' { code }; '.

Now let's discuss the contents of the function.

The parameters and arguments. 👀.

Parameters are technically variables, or placeholders for values that will be accepted into the function. The values accepted into the parameters are called arguments. If we were to use our washing machine example, our function would be as follows:

function washingMachine(water, clothes, detergent){
  //washing clothes
}

In the above, 'water', 'clothes', and 'detergent' are parameters. The arguments (values) would be the actual water, your clothes and the detergent you put into the washing machine. You've basically provided the function, the washing machine, what it needs to do what it was programmed to do.

Let's look at a real example now.

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

addNumbers(2, 4);
//6

In the above code, we have the function keyword, our function name addNumbers and within our parenthesis we have two parameters; a and b. These parameters are accepting two arguments that will be used to perform the calculation you see within the body of the function.

Notice also, that when we 'call' the function at the bottom, we did not use the keyword 'function' again. That's because 'function' is only used when declaring and defining our function, just as you would do with var, let and const.

In the body of the function, you can see we used the parameters, a and b, and perform an addition on them. The value of that addition is then assigned to our function variable, result, and returned.

Function Call and Return

We 'call' a function by referencing it's name and entering the arguments into the parenthesis (). By calling the function, you're 'activating' it to begin it's purpose (of course, once all of the required arguments are provided).

Within the function, you may notice the 'return' keyword placed just before the function body was closed. Any variable, value or object placed on the right of the return keyword will become the output of the function, meaning, when you run addNumbers(2, 4), the value that will be returned would be whatever is in the result variable.

Now that you've seen how awesome functions are, I'm sure you're thrilled to create functions of your own. Go ahead and start coding! 🎉🎊

Don't forget to follow me social media accounts :) :

Twitter/X - steph_codes

Threads - steph.codes

Instagram - steph.codes