JavaScript Functions for Dummies: Part 1 — Function Declarations vs Expressions

Functions in JavaScript are the most useful and also jumbling part of the language, in my humblest of opinions. Much like sentences in English, functions are the building blocks that make most websites, well, functional!

And much like English, I’ve had to dedicate some(*cough* a lot of) time and effort to fully understanding the rules and exceptions to functions in JavaScript. So I figured it’s time to help out my other friends who also aren’t so great with grammar, regardless of language!

What is a function?

The simplest way to define a function is that it is a means of defining some code that you can use at your discretion later in your program.

function greeting(){
    alert("Hi James!")
}

In the above example, I wrote a simple greeting() function that now, anywhere in my file, I can call on to get an alert that says “Hi James!”. Whether I use it right away or make it the very last part of code in my file, JavaScript knows that if it sees greeting() it should execute alert("Hi James!").

Function Declarations

Let’s break down what we’re looking at.

function greeting(){
    alert("Hi James!")
}

If you notice, the first thing I did was write function , this tells JavaScript that what I’m doing is defining a new bit of code for it to store and execute later. This is called a function declaration. What I wrote afterwards , greeting , is the function name. This can be whatEVER you want it to be! I can write function sayHi() or function salutations() , and JavaScript will still run the alert, as long as I appropriately call the function by the name I decided on.

The next two core parts of a JavaScript function are the () parameters and the function body {} . Personally, this is where I always get tripped up and get errors when I’m going too fast, so let’s make sure this is super clear. JavaScript functions don’t always have to accept parameters. In the example I gave above, my () parameters are empty, meaning no parameters were given. That’s totally fine! But if I want to call the JavaScript function, I still have to include the empty () parameters. There are some exceptions to that, but more on that later. In our case, calling greeting does nothing on its own, I have to call greeting(). Next, the function body {}is where the meat and potatoes of your code goes. Whatever you want your new function to do will go inside the body. In our case, I want it to alert me with a greeting message(“Hi James!”).

Function Expressions

let greeting = function() {
      alert("Hi James!")
}

Functions can also be stored in variables, as seen above with let greeting. This is called a function expression. Whether you use a function declaration or expression is totally up to you, however it’s important to note that function expressions are not hoisted, function declarations are. What does that mean?

greeting(); => "Hi James!"
function greeting(){
    alert("Hi James!")
}

With function declarations, you can call greeting() above the function that was written and it will still be understood. That’s because of the way JavaScript processes and stores information. What happens is that JS will read through your code and store variables and functions in memory first. Then it goes through and processes the information of the program after that, meaning if you use a declaration, that will be prioritized in your code. Function expressions are not hoisted.

greeting(); => undefined 
let greeting = function() {
 alert(“Hi James!”)
}

This won’t always be the case, but regardless of whether you’re declaring functions or using function expressions, save yourself cumulative hours of looking over code errors and make sure you’ve called your functions properly. Function expressions are still called with the parameters. The above would still be called as greeting().

PROTIP: Using function expressions means you have a narrower view of where errors may/will pop up in your program. If you use declarations a lot and are calling them in a lot of random places, it means you have more ground to cover to search for errors.

DRYing out our code with parameters.

The problem with the way our current greeting is written, however, is that if I want to create a new greeting for someone else, JavaScript only knows how to say “Hi James!”. If I wanted to create a new greeting, I could, but I’d have to create a new function with a different name like

function greetingTwo(){
    alert("Hi Samantha!")
}

and so on and so forth for each individual person. This isn’t just annoying and tedious, it also breaks a fundamental concept of software development, which is Don’t Repeat Yourself (DRY)! Instead we can use ()parameters and make our code more adaptable for any time we want to greet different people.

function greeting(name) {
    alert(`Hi ${name}!`)
}

Here, we’ve given our function a parameter of name. By using a parameter, we can call our function a multitude of times and just switch out who we’re greeting! Isn’t that just swell? Now I can say greeting(James) and we should see Hi James! as a result, or switch it out with greeting(Samantha) and our alert will change while still using the same function! Such fun.

There’s so much more to functions that can and should be covered, but this is a good starting point. Happy coding!