Can you explain the distinction between the declarations of these two functions?

Explanation:

const myFunction1 = function() {
  let executed = false;
  return function() {
    if (!executed) {
      executed = true;
      document.getElementById("demo").innerHTML = "Ab"
    }
  };
};

myFunction1();

Example 2:

const myFunction2 = (function() {
  let executed = false;
  return function() {
    if (!executed) {
      executed = true;
      document.getElementById("demo").innerHTML = "Ab"
    }
  };
})();

myFunction2();

What makes the second version work, while the first one doesn't? Explore the main difference in how these two are structured and called.

Answer №1

Version 2 presents the outcome of an IIFE, whereas Version 1 follows the same pattern without executing the expression. If needed, you can call it by myF()(),

function myF() {
  var executed = false;
  return function() {
    if (!executed) {
      executed = true;
      document.getElementById("demo").innerHTML = "Ab"
    }
  };
};

myF()();
<div id="demo">
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide to efficiently populating a self-referential Mongoose model

My goal is to populate data across multiple levels using the fields from an Article model: comments: [ { type: Schema.Types.ObjectId, ref: "Comment" } ] and also from ...

"Clicking on AppBar MenuItem functions properly on desktop, but it does not work on mobile devices in Material UI using

Within my reactjs application that employs Material UI, I have a Appbar containing a dropdown menu positioned in the top right corner. On desktop, the onClick function for each MenuItem works as expected. However, on mobile devices, the function does not t ...

Puppeteer: Simulating WebSocket Connections

How can I simulate WebSocket communication in Puppeteer? I'm currently testing my web application without a real backend and have been able to mock Ajax calls using the on request handler. However, I now need to test how my application responds to Web ...

What is the best way to invoke a controller method using jQuery within a cshtml file?

I am working on a project where I need to add user information to the database by calling a function in my controller class. The user's information is entered through a form created in a .cshtml file that interacts with an external JavaScript file. Is ...

I'm curious about how to utilize module.exports in this particular manner

I'm currently trying to wrap my head around how module.exports works with a variable in the context of a model view controller project. The explanation in the book doesn't quite click for me when it comes to this particular usage. var express = ...

Using Vue.js, send information from an Ajax request to a Laravel controller for processing

As someone new to development, I have a little confusion with handling data from a multi-step form in an AJAX request on my controller. While I've been able to successfully collect all form inputs at once, I'm struggling to use the data from $req ...

What is the best way to incorporate objHoles into every individual object?

I need to assign specific attributes to each player in a game. Each player should have different sets of holes, with each hole having its own win, lose, push, and points values ranging from 0-20. Is there a simple way to accomplish this task? As a beginn ...

Adding an element to the second-to-last position in a list

In the context of a HTML unordered list <ul id = "master_key_list"> <li id="master_key_23" class="available_element">Fix the Peanut Butter</li> <li id="master_key_24" class="available_element">Focus on Price Sensitivity</li& ...

Best Practices for Implementing AJAX Requests in jQuery

It's perplexing how similar they seem, making me unsure when to use the $.ajax() method versus the $.get() or $.post() methods in jQuery AJAX. I find myself leaning towards using $.post(), as the complexity of $.ajax() often leaves me baffled. ...

The functionality of the onclick button input is not functioning properly in the Google

Here is some JavaScript code: function doClick() { alert("clicked"); } Now, take a look at this HTML code: <div > <table border="2" cellspacing="0" cellpadding="0" class="TextFG" style="font-family:Arial; font-size:10pt;"> <tr> <t ...

Challenges with asynchronous problems related to importing models utilizing promises in conjunction with the three.js

I'm currently struggling to resolve a promise in my script. The promise needs to be resolved when a function containing 3D file imports finishes importing, but I'm unsure how to make this happen. Is there a way to receive a signal or data from t ...

Mantine UI: Elevate Your Component Library Experience

I am in the process of creating a Component library for internal company projects, which will be packaged as an npm package. To kick things off, I am starting with Mantine and plan to incorporate customization using tailwind CSS. As a test, I have created ...

Tips for extracting the value of <a> tag from a specific column using JavaScript

<td class="left"> <a href="#"> 123ABC </a> </td> Is there a way to extract the value "123ABC" from the < a > tag inside the < td > element of a < table >? ...

Complaints about jQuery filtering

After reading the $.grep() documentation, I expected the code snippet below to display 2. Surprisingly, it's displaying 0,1,2 instead. You can view the outcome on this fiddle. Am I missing something here? var arr = [0, 1, 2]; $.grep( arr, function(n ...

Incorporating a local JSON file into a JavaScript script element

Currently, I am utilizing AnyChart to create a Choropleth Map showcasing the number of users per country. In the template provided by AnyChart, the code below is used to specify the URL from which the data should be fetched: anychart.onDocumentReady(func ...

Ways to stop users from inputting incorrect characters into an input field

I need help with restricting user input in a text field to only allow letters, numbers, and dashes (-). For alphanumerics only - "The alphanumeric character set includes numbers from 0 to 9 and letters from A to Z. In the Perl programming language, the un ...

Adding additional rows to an Array Object in JavaScript based on a certain condition

I am faced with a scenario where I have an array object structured as follows [ { id: 123, startdate: '2022-06-05', enddate: '2023-04-05' },{ id: 123, startdate: '2021-06-05', enddate: '2021-04-05' } ] The task at h ...

How can I enlarge the arrow of the React Tooltip component?

I've extensively reviewed the official documentation, but I couldn't find a way to adjust the size of the arrow in the React tooltip. <span className="icon margin-10-right txtSize20 txtBlue icon_profile-menu icon-tool" data-tip={`&l ...

What is the best way to choose a date and time in a custom format within my React application?

I'm currently developing the front-end of my application using React. I am looking for a way to capture the date and time in the specific format shown in this image. Any suggestions or solutions would be greatly appreciated! ...

Using Angular JS to Implement Multi-filtering for Lists

Having trouble with the filter function in Angular JS when trying to filter a list using different links. I've been struggling to get it right even after trying some examples. Can anyone provide guidance on how to correctly filter the list? HTML < ...