Working with functions is one of the most fundamental skills one needs to develop when learning how to code. When I first started learning about functions in JavaScript, my mathematics background made the concept fairly easy to understand. However, some of the nuances of the syntax took a little time to learn; in particular, I had to focus on the different ways functions could be created and used. I've written this post to help others navigate those same nuances with ease. In particular, this post will help you:
- distinguish between function declarations and function expressions
- learn the pros and cons of each
What is a function? A brief review
Harken back to your high school algebra days, when you were first exposed to the concept of a function. A function is, simply, a defined set of actions to take upon some 'input' such that you end up with a transformed 'output.' Functions are predictable; if you put the same input in, you'll always get the same output out.
// name
// | variable
// | | set of actions
// | | |
f ( x ) = x + 6 // "f of x is equal to x plus 6"
f ( 2 ) = 8 // "f of 2 is equal to 8"
// | |
// input output
Function notation helped us talk about them. Anytime we referred to the function called f (or any other name), we knew we were supposed to perform the defined set of operations upon the input. In coding, it works exactly the same way.
Functions are extremely useful in helping us organize complex sets of actions to take, especially when we need to perform those actions over and over again on different inputs. This idea is fairly straightforward; implementing the concept in JavaScript is perhaps a little less so, but it's a double-edged sword. You have more to learn, but you also have more functionality.
While the complete ins and outs of JS functions would make for a very long post indeed, what follows is a strong introduction to some of the core concepts.
Ways to Create Functions in JavaScript
1. Declaring functions
One way you can create a function in JavaScript is by using function declaration. The syntax is as follows:
function name(parameter1) {
"action(s) the function takes";
}
We start by declaring that we're making a function, then we name it. Next to the name, you put any parameters in parentheses; if you have more than one, you separate using commas.
Function declaration is easy to read and understand when sharing code, especially if you use intuitive naming. For example:
function addNumbers(a, b) {
console.log(a + b);
}
When you actually go to use addNumbers, you give the function arguments, in this case 3 and 5.
addNumbers(3, 5)
//LOG: 8
The primary benefit of using function declaration is that the function is hoisted, which means it can be referenced anywhere in the code (properly accounting for scope, of course), whether the function is called before or after its declaration.
2.a. Function expressions
Another way you can create a function is by using a function expression. Some more harkening back and you'll remember a mathematical expression was like an incomplete sentence. You could write 3x + 4, but without a relational statement (=, <, >, etc) or a value for x, there was nothing you could do with it.
A common way to create a function expression is to assign the function expression to a variable.
const variable = function(parameter) {
actions the function takes;
}
// example
const doubling = function(num1) {
return num1 * 2;
}
Notice there is no 'name' listed like with function declaration; the variable we assign acts much like the name of the function when you wish to use it.
The primary drawback of using a function expression is that the function will not be hoisted; you won't be able to use the function in your code anywhere before you create it. This might not seem like a big deal at first, but it quickly becomes a drawback as your projects get more complex.
There are some benefits to using function expressions, particularly when you need to use nested functions, callback functions, and/or immediately invoked functions, but I haven't seen use cases where function expressions make the most sense unless you are using an arrow function expression. If you have found specific ways in which you believe variable assignment is the better strategy (over function declaration or using an arrow function), I'd love to hear from you about it in the comments.
This gives us a good segue to talk about arrow functions.
2.b. Arrow functions [are function expressions]
Arrow function expressions were added to the JavaScript language in 2015, and personally, I love them. They can have a very clean and easy to read aesthetic, and they work great when you need to use a function inside another function, either as a nested function or callback function.
// could assign to a variable
const variable = (parameter) => {actions the function takes}
// you can also eliminate parenthesis and/or brackets if you only have one parameter and/or one action to take, respectively
const variable = parameter => action to take;
// use anonymously as a nested function
function addThenMultiply(a, b, c) => {
let sum = a + b;
return sum => sum * c;
}
Another benefit to a function expression is that they don't need to be named; they can be anonymous, and in fact, arrow functions are always anonymous. This is useful if you're immediately invoking the function as a callback or nested function and don't also need to use it elsewhere.
Conclusion
I hope you now have a better understanding of the biggest differences between function declaration and function expressions. But I only scratched the surface of many related topics, such as using anonymous functions or the difference between nested and callback. Arrow function syntax has more nuance regarding implicit versus explicit returns. We also didn't spend much time delving into various use cases and what strategy is best in different situations.
I'm excited to talk about all these topics and more in future posts, so follow me for more great content!
Top comments (4)
Function expressions can have a name, and there are valid uses for doing so. This is perfectly valid:
Hi Jon, thank you for clarifying that! Yes, I was aware of that syntax being valid, though I didn’t make that clear in my post. But I haven’t seen an application where that syntax makes the most sense or how it could be useful in practice - preferred over another. What is one of the valid uses you mentioned?
If the function has a name - it can reference itself from inside - good for recursion. Also, stack traces can be made more readable as the name will also appear there
Recursion would make sense. Thanks!