What is the inline function in JavaScript ?

In JavaScript, inline function is a special type of anonymous function which is assigned to a variable, or in other words, an anonymous function with a name. JavaScript does not support the traditional concept of inline function like in C or C++. Thus anonymous function and inline function is practically the same. Unlike normal function, they are created at runtime.

Syntax:

  • Function:
    function func() {
        //Your Code Here
    }
    
  • Anonymous function:
    function() {
        //Your Code Here
    }
    
  • Inline function
    var func = function() { 
        //Your Code Here 
    };
    

Explanation:



Making an inline function is really simple. First, make an anonymous function(a function with no name), and then assign it to a variable.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible"
          content="ie=edge">
    
    <title>JS Functions</title>
    <!-- jQuery CDN -->
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
            crossorigin="anonymous">
    </script>
    
    <!-- End of CDN -->
    <style>
        button {
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            font-size: 16px;
            margin: 8px 2px;
            cursor: pointer;
            display: block;
            width: 270px;
        }
    </style>
</head>
  
<body>
  
    <h1 style="text-align:center;color:green;">GeeksforGeeks</h1>
    <p align="center">
        <button id="function">function</button>
        <button id="anonymous-function">anonymous function</button>
        <button id="inline-function">inline function</button>
    </p>
    <script type="text/javascript">
        //function
        function func() {
            alert("Hello I'm inside function");
        }
        $('#function').click(func);
  
        //anonymous function
        $('#anonymous-function').click(function() {
            alert("Hello I'm inside anonymous function");
        });
  
        //inline function
        var inline_func = function() {
            alert("Hello I'm inside inline function");
        };
        $('#inline-function').click(inline_func);
    </script>
</body>
  
</html>

chevron_right


Output:
output

Clicking on any of the above button will call the respective function and and an alert message will show up. Let’s say “inline function” button is clicked then the following alert message will pop up.

popupmsg



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.