Functions
What are JavaScript functions? They are one of the most fundamental building blocks of JavaScript. At its most basic level, functions are objects. An object that contains some code that we would like to call, or execute multiple times.
The purpose of functions, is to put reusable code inside of a function block, that we can then use at different points, rather than having to write everything out over and over, and violating the principle of Don't Repeat Yourself.
Functions Syntax
Functions are made up of several key parts.
We define a function using the keyword function, and then a function name, followed by parentheses and then curly braces {}.
Within the curly braces, is the function body, or the code that will execute when we run the function.
function foo(){
console.log("I was called!");
}
Once the function has been written, we can use it as many times as we want. We call, invoke, or run the function, by writing the function name, followed by parentheses.
foo();
And we can call a function as many times as we wish.
foo();
foo();
foo();
foo();
Which would then output to the console:
I was called!
I was called!
I was called!
I was called!
Typically, passed in between the parentheses will be parameters, or arguments, separated by a comma. And if we want to return some kind of data from the function, we can do so using the return keyword.
function add(argument1, argument2){
return argument1 + argument2;
}
If parameters are used, they act like placeholders, placeholders for the actual data we wish to pass in, and be executed. So that our add function can be called like so:
add(1, 100);
Which will then return 101 to the console.
But if we wrote the function incorrectly, and did not use the return keyword, instead writing it like this:
function add(argument1, argument2){
argument1 + argument2;
}
Calling our function with arguments, add(1, 100) would result in an undefined.
Where it starts to get a little tricky, or perhaps confusing, is that functions aren't always so straightforward. Not all functions have to have arguments. Not all functions return something.
There are also different ways of writing functions as well.
Function Declarations vs Function Expressions
The type of function we have learned about thus far, is called a function declaration. A function declaration is a function created using the function keyword.
A function expression, is a function written without a name, but stored within a variable. We can also call these nameless functions, anonymous functions. They work the same way that function declarations work, as functions are essentially just values in JavaScript.
If we wanted to rewrite our add function as a function expression, we could do so like this:
const add = function(arg1, arg1) {
return arg1 + arg2
}
The function can be called the same way, although we are calling the variable name add rather than the function name, and supplying it with two arguments.
add(100, 1)
Which will return 101
The biggest difference between a function declaration, and a function expression, is that if you call a function declaration before it's been defined, you'll still get the same result. If you call a function expression before it's been defined, you'll get an error as a function expression cannot be called before it's been initialized. This is all do to a concept called hoisting, which I'm not going to go into today.
Arrow Functions
Arrow functions, or an arrow function expression, is a shorter syntax for writing function expressions essentially, although it can't be used in all situations. They are always anonymous, as they are not created using a function name.
Arrow functions appear very much like function expressions:
const add = (arg1, arg2) => arg1 + arg2
One difference is that you can omit the return keyword. Because of how an arrow function is written, it implicitly returns the result of our last expression immediately.
Another is that if there is only one argument being passed in, we can omit the parentheses altogether.
const squared = x => x * 2
Just as function expressions do not have to have a parameter, so too can arrow functions not have one.
Conclusion
I hope that this has helped clarify some of the different types of functions that can be used when working in JavaScript. I haven't covered all types of functions at this point in time.
There is another type of function in JavaScript, called an Immediately Invoked Function Expression, or an IFFE, understanding IFFE's relies upon a deeper understanding of Scope in JavaScript as well as hoisting.
There are also generator functions as well, you can read more about them here
Top comments (0)