Functions I - Beginner's JS

Stephon Fraser's photo
Stephon Fraser

Published on Jun 18, 2021

4 min read

Subscribe to my newsletter and never miss my upcoming articles

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( //parameters here or not ){
      //code here
}

or


const myFunc = function( //parameters here or not ){
      //code here
}
  1. The 'function' keyword is similar to 'var' keyword in that it tells the JS engine that you're declaring something.

  2. 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.
  3. In the parenthesis () , you can either have parameters or leave it blank. (We'll discuss parameters and arguments later)

  4. Within the curly braces {} is the 'body' of the function. Statements (codes) 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 basically 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

From the above, you can see that 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 basically '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, or value, 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! 🎉🎊

 
Share this