Techdegree Journal 6: An Easy Way To Remember How Functions, Arguments and Parameters Work Together

love-vs-hate-clinton-vs-trump-4aec5d0779eb57b5a491565e0b25fdf0

Unlike these two, this is the only time an ‘argument’ is good…

Functions

Last week, I spoke about how I was learning how local and function scopes effected functions and how they could be accessed by different parts of the program. But after reflecting and looking through my notes, I realised that I put the “horse before the cart” and should have spoke more about what a function actually does so here goes…

A JavaScript function is a group of statements (lines of code) that when activated, will perform a particular action. In my last blog post, I gave the example of telling my nephew that when I text him from work, that he would need to go to the store and bring me eggs, bacon and milk so that we could have a good breakfast the next morning.

To declare a function, all you need is:
* The keyword ‘function’
* A name goToStore
* A pair of parenthesis ()
* A pair of curly braces which will contain the task that needs to be completed {}

So if I were to write my nephew’s task in pseudo-code, it would look something like this:

function goToStore() {
drive to store;
buy eggs, bacon & milk;
return home;
}

goToStore();

The beautiful thing about functions is that if we can set up a task and when we call it, it will execute the whole thing without me having to write the whole task again. That what keeps the code “DRY”.

The DRY Principle

So I’ve mentioned the term “DRY” in previous posts but what does it actually mean? “DRY” means “Don’t Repeat Yourself” and this basically means that programmers should write the most efficient code possible with the least amount of lines. “DRY” code is:

  • Easier to read by other humans
  • Less bug (error) prone

Along with clear and concise documentation, DRY code makes our life easier!

Arguments and Parameters 

Take a look at this code:

function goToCoffeeShop() {
alert(“Coffee is on the way!”)
}

Now this is similar to the errand that I made my nephew do earlier but this time I asked him to go to the Coffee Shop and grab me a coffee and let me know that it’s coming. That function works perfectly fine but what if instead of a coffee, I wanted some flexibility and wanted to change my drink? Now we would have to do the code to do something slightly different…

function goToCoffeeShop(drink) {
alert(drink + ” is on the way!”)
}
goToCoffeeShop(“Espresso”)

Notice that when I declared (created) the function, the word “drink” is in the first set of parentheses? And when we ‘call’ the function, the word “Espresso” is in the second set? These are examples of parameters and arguments respectively.

In the simplest possible terms, an “argument” is a real value that can be passed to a function that, when the function is called, change the way that the function works.

A “parameter” behaves like a ‘container’ which holds the argument just like a variable will hold a value.

To a novice programmer like me, terms like ‘passing the argument to a function’ were baffling at first and I just couldn’t get my head around it. But being the super creative genius that I am (lol!), I created a mental image that helped me get my head around around it…

Going back to the coffee shop example, I told my nephew that when I contact him, he needs to go the Coffee Shop and grab me a coffee (declaring the function). But while I was at work I had a change of heart and wanted an “Expresso” (the argument). But I need to find a way to pass that information to my nephew.

real-prince-coffee

Sorry I just had to add this in… Too funny!

So after much heavy thinking, I send him a text message with the word “Expresso” – that text message acts as the parameter that ‘holds’ the instruction of what I want. The text message via the phone allows me to pass the instruction to my nephew to change my drinks order, the same way that I can pass a value to a function to change how it works.

Here is another example from my Techdegree:

170-parameter-assistant-2

If only getting your nephew to get things for you on time were this easy…

In this stage of my learning, I find functions fascinating and their applications so useful!
I know that you can only stretch an analogy so far but that mental picture really helped me get a grasp of the concept!

What do you guys think? Is there anything you wish to add? Leave your comments below or tweet at me @karlwebdev.

As always, I really appreciate your time & I will see you next Thursday!

Karlwebdev

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s