Open In App

Underscore.js _.once() Function

Improve
Improve
Like Article
Like
Save
Share
Report

Underscore.js _.once function is used in conditions where we want a particular function to be executed only a single time. Even though we execute or call this function multiple times then also it will have no effect. The original function’s values will only be returned each time it is called. It is mostly used for the initialize() functions which are used to assign only the initial values to the variables.

Syntax:

_.once(function);

Parameters:

It takes only one argument, i.e., the function that needs to be called only a single time.

Return value:

It returns the original call’s value each time the function is iteratively or repeatedly called.

Performing addition function with the _.once() function:

The function that is passed to the _.once() function adds 10 to the variable 10 which originally has a 10 value. Then the _.once() function is assigned to another function ‘startFunc()’. Then the first time the ‘startFunc()’ is called the value of ‘a’ is incremented by 10 and becomes 20. So the output of first-time calling is 20. Then the next time when ‘startFunc()’ is called the value of ‘a’ is again supposed to be incremented by 10 but this does not happen. This is because the ‘startFunc()’ has a function ‘_.once()’ in its definition which prevents it from being executed more than one time. So, the output of the second and third calls will be the same as the first, i.e., 20. On the first line, the value of ‘a’ is printed before calling the ‘startFunc()’ hence the output is 10.

Example: This example shows the performance of the addition function with the _.once() function.

HTML




<html>
 
<head>
    <script src=
    </script>
</head>
 
<body>
    <script type="text/javascript">
        let a = 10;
 
        function add() {
            a += 10;
        }
        let startFunc = _.once(add);
        console.log(a);
        startFunc();
        console.log(a);
        startFunc();
        console.log(a);
        startFunc();
        console.log(a);
    </script>
</body>
 
</html>


Output: It will be shown in the console.

10
20
20
20

Performing multiplication operation with the _.once() function:

The function that is passed to the _.once() function multiplies by 10 the variable ‘a’ which has value 10 originally. Then the _.once() function is assigned to another function ‘startFunc()’. The first time the ‘startFunc()’ is called the value of ‘a’ is multiplied by 10 and becomes 100. So the output of first time calling is 100. Then the next time when ‘startFunc()’ is called the value of ‘a’ is again supposed to be again multiplied by 10 but this does not happen. This is because the ‘startFunc()’ has a function ‘_.once()’ in its definition which prevents it from being executed more than one times. So, the output of the second and third calls will be the same as first, i.e., 100. On the first line, the value of ‘a’ is getting printed before calling the ‘startFunc()’ hence the output is 10.

Example: This example shows the performing multiplication operation with the _.once() function.

HTML




<html>
 
<head>
    <script src=
    </script>
</head>
 
<body>
    <script type="text/javascript">
        let a = 10;
 
        function add() {
            a *= 10;
        }
        let startFunc = _.once(add);
        console.log(a);
        startFunc();
        console.log(a);
        startFunc();
        console.log(a);
        startFunc();
        console.log(a);
    </script>
</body>
 
</html>


Output:

Passing strings to the _.once() function:

The function that is passed to the _.once() function appends the original string of the variable ‘a’ with the other string. The _.once() function is assigned to another function ‘startFunc()’. The first time the ‘startFunc()’ is called the value of ‘a’ is appended by ” appended” string and hence becomes “xyz appended”. So the output of first time calling is “xyz appended”. Then the next time when ‘startFunc()’ is called the value of ‘a’ is again supposed to be again appended but this does not happen. This is because the ‘startFunc()’ has a function ‘_.once()’ in its definition which prevents it from being executed more than one times. So, the output of the second and third calls will be the same as first, i.e., “xyz appended”. On the first line, the value of ‘a’ is getting printed before calling the ‘startFunc()’ hence the output is “xyz”.

Example: This example shows the passing strings to the _.once() function.

HTML




<html>
 
<head>
    <script src=
    </script>
</head>
 
<body>
    <script type="text/javascript">
        let a = 'xyz';
 
        function add() {
            a += " appended ";
        }
        let startFunc = _.once(add);
        console.log(a);
        startFunc();
        console.log(a);
        startFunc();
        console.log(a);
        startFunc();
        console.log(a);
    </script>
</body>
 
</html>


Output:

Passing both number and string to the _.once() function:

Here we perform _.once() function on a function which both appends the string to a variable ‘a’ whose original value is “xyz” and also adds 10 to a variable ‘b’ whose original value is 5. On the first line the original values of both the variables ‘a’ and ‘b’ will be displayed. After that when we first time call the ‘startFunc()’ the ‘a’ variable is appended by ” appended” string and the ‘b’ variable’s value is incremented by 10. So, ‘a’ becomes “xyz appended” and ‘b’ becomes 15. Now each time the ‘startFunc()’ is used the values of ‘a’ and ‘b’ will remain same as we have use _.once() function in the definition of ‘startFunc()’.

Example: This example shows the passing both numers and string to the _.once() function.

HTML




<html>
 
<head>
    <script src=
    </script>
</head>
 
<body>
    <script type="text/javascript">
        let a = 'xyz',
            b = 5;
 
        function add() {
            a += " appended ";
            b += 10;
        }
        let startFunc = _.once(add);
        console.log(a, b);
        startFunc();
        console.log(a, b);
        startFunc();
        console.log(a, b);
        startFunc();
        console.log(a, b);
    </script>
</body>
 
</html>


Output:

NOTE:

These commands will not work in Google console or in firefox as for these additional files need to be added which they didn’t have added. So, add the given links to your HTML file and then run them.The links are as follows:

<script type="text/javascript" src = 
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js">
</script>


Last Updated : 14 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads