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.






Comments

Post a Comment

Popular posts from this blog

Mastering JavaScript Output: Communicating with Users

-
JavaScript Output JavaScript output refers to the process of displaying or printing information to the user. It allows developers to communicate and present data in a variety of ways, such as through the browser console, alert boxes, or by manipulating the HTML content of a webpage. Displaying Output in the Browser Console The browser console is a built-in developer tool that allows you to log information, debug code, and view error messages. You can use the `console.log()` method to display output in the console. Here's an example: console. log ( "Hello, world!" ) ; The above code will print "Hello, world!" to the console. Alert Boxes Alert boxes are often used to display important messages or to prompt the user for input. You can use the `alert()` function to create an alert box. Here's an example: alert ( "Hello, world!" ) ; When the above code is executed, it will display an alert box with the message "Hello, world!". innerHTML JavaSc...
Read more

What is JIT compiler? Is JavaScript compiled or interpreted or both?

-
What is JIT compiler? A Just-In-Time (JIT) compiler is a type of compiler that dynamically converts programming code into machine code at runtime, just before the code is executed. Unlike traditional compilers that convert the entire program ahead of time, a JIT compiler optimizes and compiles code on-the-fly, as it is needed. The primary advantage of a JIT compiler is that it can make the execution of code significantly faster compared to an interpreter. It achieves this by analyzing the code at runtime, identifying hotspots (frequently executed portions of code), and applying various optimization techniques to generate highly efficient machine code specific to the underlying hardware. JIT compilers are commonly used in programming languages such as Java and JavaScript, where the execution speed of the code is crucial. So is JavaScript Compiled or Interpreted? JavaScript is generally considered an interpreted language . Traditionally, JavaScript code is executed by an interpreter, wh...
Read more

'for in' Loop

-
Introduction to JavaScript 'for in' Loop The `for in` loop is a type of loop in JavaScript that is used to iterate over the properties of an object. It is often used when you need to loop through the keys or properties of an object and perform some action on each one. Unlike other loops like `for` and `while`, the `for in` loop is specifically designed to work with objects. Syntax The syntax for the `for in` loop is as follows: for   ( variable  in  object )   {    // code to be executed } The `variable` represents a temporary variable that will hold the key of each property in the object. The `object` is the object that you want to iterate over. Example Let's take a look at an example to understand how the `for in` loop works: const  person  =   {   name :   'John' ,   age :   30 ,   gender :   'male' } ;   for ...
Read more