In this section, we will learn what the Function Expression is and how to use it in JavaScript.
What is Function Expression in JavaScript?
In JavaScript, variables can store any type of data. Functions are also a type of data. This means variables can store functions as well.
A function that is assigned to a variable is called function expression.
How to Declare and Invoke Function Expression in JavaScript?
let func = function function_name(){/*body...*/}
Note: when we create a function, no-matter if it is a function expression or the usual functions that you saw in the previous sections; the function will be stored in a memory location and the address of that location will be stored in the variable name that the function is linked to.
So when we call a function via its name, it’s a signal for the execution engine that we want to execute the body of the function that this variable name has its memory address. Of course, after that, the execution engine will load the body of the function into the stack memory and the execution proceeds. (In the stack section, you’ll learn what the stack is).
Here there’s a variable that is named `func` and it stored the memory address in which the `function_name` function is stored in.
Note: the name that we used after the `function` keyword is optional and could be ignored in function expressions.
Example:
let func = function(){/*body...*/}
When we want to call a function expression, we use the name of the variable that it has the address of that function. So in this example, if we wanted to call the function, we would use the variable `func`.
Note: we cannot use the function name (if any) that is set after the `function` keyword to invoke the function-expression.
Example: creating Function Expression in JavaScript
let func = function function_name(name , lastName){ console.log(`Hello ${name} ${lastName}`); } func("John","Doe");
Output:
Hello John Doe
As you can see, we used the name of the variable that the memory address of the target function is stored in, and put the pair of parentheses with arguments on the right side of it as if this variable is the actual function.
After calling the function via the variable, the body of the function ran, and we got the message: Hello John Doe on the browser’s console.
JavaScript Function Expression Passing to Another Function:
Because the variable is holding the memory address in which the function is stored in, we can pass the variable to other functions (as their arguments) as well. In situations like this, the memory address will be copied to the target function and so the parameter in that function will have the same memory address as the function as well. So we can use the parameter to invoke that function.
Example: passing function expression to another function
let func = function function_name(name , lastName){ console.log(`Hello ${name} ${lastName}`); } function caller(fnc){ fnc("John","Doe"); } caller(func);
Output:
Hello John Doe
In the scope section, we will talk more about the differences between usual functions and function expressions.
JavaScript Anonymous Function and Function Expression
When working with function expressions, if we omit the name that comes after the `function` keyword, that function expression becomes an anonymous function.
Note: the use of a name after the `function` keyword in function-expression is optional.
But even though we can omit this name, it is better to always use a name after the `function` keyword. This is because when an error occurs, the execution engine uses the name of a function when it prints the stack trace (if an error occurred) and so we can see exactly in what function there is an error.
Also, if we want to use a function expression in recursion, we need the name of the function (the one that comes after the function keyword) as well.
Example: anonymous function and function expression in JavaScript
let func = function (name , lastName){ console.log(`Hello ${name} ${lastName}`); } function caller(fnc){ fnc("John","Doe"); } caller(func);
Output:
Hello John Doe