A function expression in JavaScript is a way to define a function as a part of a larger expression syntax (usually an assignment). In other words, when you create a function and assign it to a variable, you are creating a function expression. The function can be named or anonymous (without a name). The main advantage of function expressions is that they can be used to create 'private' functions.
Differences between function expression and function declaration
The main differences between a function expression and a function declaration in JavaScript are about how they are hoisted and when they can be called. Function declarations are hoisted, which means they can be called before they are defined. However, function expressions are not hoisted, which means they can't be called before they are defined.
An example of a named function expression
Let's look at a named function expression. A named function expression is handy when you need to call the function within itself, like for a recursive function. Remember, the name is only local to the function body.
var factorial = function recFactorial(n) {
if (n === 0) {
return 1;
}
return n * recFactorial(n - 1);
};
console.log(factorial(5)); // Output: 120An example of an anonymous function expression
Now, let's look at an anonymous function expression. Since the function has no name, it is referred to by the variable it is assigned to. These types of expressions are commonly used in callbacks, event handles, and closures.
var greeting = function() {
console.log('Hello, world!');
};
greeting(); // Output: Hello, world!No Time to Read? Learn on the Go!
By reading this article, you've invested 1.14 minutes of your life into expanding your knowledge and perspectives. Now, imagine learning on-the-go, turning every moment into an opportunity for growth and discovery.
Press play on a video game, you start playing it. Same way in JavaScript, we use something called a 'Function Expression' which is like pressing play button in the game! It helps to start our game or let's say to do some action. We say, 'Hey JavaScript, let's play this part of the game (or function) when I say so!'
How does Function Expression look like?
It is like naming your favourite teddy bear! We give it a name and also tell it what it should do when we play with it. It looks like this:
var myTeddyBear = function() {
console.log('Teddy bear gives a big hug!);
}How do we play with the teddy bear (or use a Function Expression)?
Once we have told our teddy bear what to do, we can play with it (or 'call the function') whenever we want! And it will do exactly what we told it to do. Here's how:
myTeddyBear();
// console logs 'Teddy bear gives a big hug!What happens when we play with the teddy bear differently (or 'call the function with different inputs')?
Sometimes, we tell our teddy bear to do different things based on what we tell it to do. Think of it like sometimes we hug our bear, sometimes we make it dance! Same way, our function can do different things based on what inputs we give it. This is how it looks like:
var myTeddyBear = function(action) {
console.log('Teddy bear ' + action + '!);
}
myTeddyBear('dances');
// console logs 'Teddy bear dances!No Time to Read? Learn on the Go!
By reading this article, you've invested 1.10 minutes of your life into expanding your knowledge and perspectives. Now, imagine learning on-the-go, turning every moment into an opportunity for growth and discovery.
Function expressions are, like other functions, callable objects in JavaScript that contain executable code. You can read more about it in Functions in JavaScript
About author
Roman Y.
Senior Software Engineer at Nike
EXCLUSIVELY
Certain articles only distributed to subscribers through email