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

James Bond
Apr 16 · 4 min read

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!

Sign up for Geek Culture Hits

By Geek Culture

Subscribe to receive top 10 most read stories of Geek Culture — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store