Function Expressions in JavaScript

What are Function-Expressions?

A Function-Expression is a function that is assigned to a variable or a property of an object. It can be named or anonymous. It is a function that is created at runtime and can be passed as an argument to another function.

//example of a named Function-Expression
let square = function(num) {
    return num * num;
};
//example of an anonymous Function-Expression
let add = function(a, b) {
    return a + b;
};

How are Function-Expressions used?

Function-Expressions are commonly used for following purposes:

1. To create and assign a function to a variable or property of an object.

2. To create a closure, i.e., functions within functions that can access the outer functions' variables.

3. To pass a function as an argument to another function.

4. To return a function from another function.

//example of a Function-Expression used to create a closure
function outerFunction(x) {
    function innerFunction(y) {
        return x + y;
    }
    return innerFunction;
}
let add = outerFunction(5);
console.log(add(2)); //output: 7

How are Function-Expressions different from Function-Declarations?

Function-Expressions differ from Function-Declarations in the way they are defined and used. Function-Expressions are defined as a part of an expression, whereas Function-Declarations are defined as standalone statements. There is only one real difference which is how they operate in something called hoisting. Function-Expressions are created at runtime, whereas Function-Declarations are hoisted and can be used before they are declared.

//example of Function-Declaration
function square(num) {
    return num * num;
}
//example of Function-Expression
let square = function(num) {
    return num * num;
};

How to pass a Function-Expression as an argument?

Function-Expressions can be passed as arguments to other functions. When we pass a function as an argument, we are not invoking the function. The function is invoked later when it is assigned to a variable or property of an object or called as a callback function.

//example of passing a Function-Expression as an argument
let sum = function(a, b) {
    return a + b;
};
function myFunction(fn) {
    return fn(2, 3);
}
 
console.log(myFunction(sum)); //output: 5

How to return a Function-Expression from another function?

Function-Expressions can also be returned from another function. When a function returns a Function-Expression, we can call the returned function later when needed.

//example of returning a Function-Expression from another function
function greeting(type) {
    if (type === 'formal') {
        return function(name) {
            return 'Hello, ' + name + '. May I help you?';
        };
    } else if (type === 'informal') {
        return function(name) {
            return 'Hi, ' + name + '! What\'s up?';
        };
    }
}
let formalGreeting = greeting('formal');
let informalGreeting = greeting('informal');
console.log(formalGreeting('John')); //output: 'Hello, John. May I help you?'
console.log(informalGreeting('Jane')); //output: 'Hi, Jane! What's up?'

Key Takeaways

• Function expressions are functions assigned to variables or object properties. They can be named or anonymous. Created at runtime, they can be passed as arguments or returned from functions.
• They are used for creating closures, passing functions, and dynamic runtime behavior.
• Function expressions are defined as part of expressions, while declarations are standalone statements.
• Function expressions are created at runtime, declarations are hoisted.
• Declarations can be used before they're defined due to hoisting, function expressions can't.
• Functions can be passed as arguments without invoking them. They're invoked when assigned to a variable or property or used as a callback.
• A function can return a function expression. The returned function can be called later as needed.