Declaring Functions

A friendly stroll through some basic Javascript function concepts.

Intro

Functions are one of the basic building blocks of making Javascript, and a variety of other programming languages, work. Not only are functions a key element in making code do something they also allow for cleaner and more concise code as well.

If I've learned anything about learning a programming language, as a complete novice to coding, it is that for any general statement there are probably 3849208 circumstances that augment that general statement. However, one of the things I wish I understood sooner was the basic syntax requirements for functions so here we are. Learning by teaching.

Intrinsically a function is just a block of code. The most basic syntax involves using a set of parenthesis and curly brackets as your clue that you're looking at a function.

(This is where grown up developers would say "but but, curly bracket, object literal..." and we're going to say "yeah yeah, pipe down, we're talkin' functions right now and everyone knows it.")

Here's the goods. Pretty simple, right?

function genericFunctionName () {
     //what it does goes here
}

A lot of documentation will start introducing things like case structures and types of functions and all of the things that are required to know at some point. I've found value in internalizing the most basic syntax as a starting point. I also learn better through conversational writing as references are hooks for memory to latch on to, which is why the tone of this is more casual than most.

Back to the function. It is also true, that this function won't do anything... yet.

One thing that many people find challenging is naming their function! This is common. Using something like "genericFunctionName" or whatever your function is doing is super important for making the mental connection to what is happening with that code block. If you find yourself getting lost in naming just use a generic descriptor for the part of the code like the example above.

Steppin' on the gas

Moving on up to making a function do a thing. Let's get a little more descriptive with the bits and pieces of a function declaration. The word function itself is a special word, keyword, that is used to signify it should follow the rules of that keyword as defined by Javascript the programming language. We need that part.

Next is the name of the function. Gonna do you a sneaky here... functions don't always need names. SHHHHH. That's a later thing.

For now, for simplicity sake, we're going to name our declared function and we are going to use camelcase. (here is a cute image of a camel with text visually depicting camel case in it's humps just in case you're unfamiliar)

Mandatory: always start your function name with a lower case letter

Next we need parenthesis which is where parameters can be passed to the function in our current state of just declaring a simple function.

However in Javascript in general, parenthesis are the booming narrator voice Invocation Operator which will bring your functions to life. Invoking and calling the function mean the same thing. It is effectively running the function.

Lastly, we need a statement or the body of the function which is where the code goes that defines what the function actually does.

You knew it was coming. It's time for the requisite "Hello world!" baby's first output moment.

function nerdJoke() {
   console.log("Hello world!);
}

In the function above we've used console.log as the thing that spits something out somewhere. So far I like sticking console.logs all over the place because I want to see what is happening as I write code.

A quick aside: If you're following along or practicing coding you'll need to be in a place that can run your code. I've been using replit.com as an easy and free tool to do just that.

Now we have a function that can do something! It can say "Hello world!" to a console. If we tell it to. This is another thing that was a challenge for me to wrap my brain around as a newbie. It's there. It's in the code... why can't I see it?

When writing code everything is manual. You're the one making the behind the scenes magic that everyone expects to just happen as users of apps and programs as a consumer.

So we need to call or invoke, or call, the function just by giving some Destiny's Child snaps and a little head wiggle. That's right, "Say my name, say my name." says our little function wanting to be called.

function nerdJoke() {
   console.log("Hello world!");
}

nerdJoke()

Embrace the nerdy 90's humor and say the function name with the parenthesis after to invoke it and voila. Output to the console. Mission accomplished.

Ok ok, that was fun and all but let's step it up a smidge. I never really understood what was so special about saying "Hello world!" in another screen either. Let's make this basic structure work for us.

Are you one of those people that says, "It was my understanding that there would be no math." Guilty. Write functions to do math for you!

function square(number) {
  return number * number;
}

console.log(square(3));

In this example we are demonstrating using a parameter in the function declaration. A parameter is an expected piece of information. Think of it like a placeholder for what may be filled in later in the function.

In the above example we continue the pattern by using the function keyword to start, square is the name of the function, (just because we're squaring the number and that made sense to me but you could have called it uncleGeorge if you wanted to), and then we're leveling up by adding return to the body of our function.

Return is another keyword just like the word function. It is a known word in Javascript that is a very good little keyword that does exactly what it's told right on the spot without any hesitation. In this case return is giving this function something to do by multiplying our two parameters together.

Return is poised and ready as signalled by the number parameter in the first parenthesis and the asterisk * is the operator in this function. Not to be confused with the aforementioned invocation operator or smooth operator or any other kind of operator, really.

There are a LOT of operators in Javascript. You'll learn about them another time. For now it's easy to understand that the standard symbols in arithmetic like + - * / for add, subtract, divide, or multiply work as operators in functions.

But, wait! There's more! What is this? A wild new parenthesis has appeared!? Look at all of those scary stacked up parenthesis with the 3 inside of them at the bottom of our function. That 3 in the parenthesis in our console.log is an argument ...in a good way.

The console.log uses its booming narrator voice Invocation Operator to invoke our function name, square, and the argument, 3, which then takes the place of the parameter in the function.

Stop. Right meow. If you're not completely confident in how this works. Go over it again. Trace your finger on the screen. Say this out loud and go from bottom to top. "Ok, so, square is the function name. 3 is the argument that the parameter, number, was holding a space for. The body of the function says to return number times number and console log said number is now 3. So... the answerrrrr is... 9?" Jackpot.

This illustrates the difference between parameters and arguments. The parameter, number, is returned when the function is invoked and is multiplied by itself as defined by the number * number in the body of the function.

Working through the flow of how a function works is a game changer for it making sense. Channel your inner Mr. Miyagi and wax on wax off this concept until you can catch a fly with chopsticks. Bow

Another fun thing to see in action is that the words in the function could have also been gibberish if you like to be a lil silly.

You're off to a great start with some basic function knowledge. In future volumes we'll explore more function types to get into the real, functionality, of javascript. I'll see myself out.