Performing dual function not named in the declaration act of the same

Asked

Viewed 129 times

4

I am "joking" with Javascript and came across a question. I understand that when my HTML page is loaded, if I want to already execute a function without having to declare it, I just have to define this direct function, like this:

(function(){console.log('foo');})();

My doubt (because I couldn’t make it work) is how I can perform a dual function in the same statement, something like this (in my view):

(
  function(){
    var b = 'hello world!';
    console.log('bar');
  },
  function(b){
    console.log('foo ' + 'b'); //o "b" declarado anteriormente na 1ª função
  }
)();

Is there such a thing? I basically want such a function to perform after the first but, that the second consumes the same effort of the DOM...

javascript

3 answers

4

You can perform the Anonimas function directly by adding the two parentheses ( ) at the end of each function. They will be executed in a queue process. Follow the jsfiddle and the example below.

(
  function(){
    var b = 'hello world!';
    console.log('bar');
  }(),
  function(b){
    console.log('foo ' + 'b');
  }()
);

2


Even if it were possible to perform these functions in this way in batch, there would still be a problem, a variable declared within a view is visible only within it, then in this case the variable b would not be available for the second function.

(
  function(){
    var b = 'hello world!';
    console.log('bar');
  },
  function(b){
    console.log('foo ' + 'b'); //o "b" declarado anteriormente na 1ª função
  }
)();

In this case, the only way to perform these 2 functions with a compatible variable is to encapsulate the two in a third anonymous function.

(function() {
  var b;
  (function(){
    b = 'hello world!';    
  })();
  (function(){
    alert('foo ' + b);
  })();
})();

but the only utility of this type of construction is to pollute the code and honestly I see no other utility for IIFE (function expression with immediate execution) that is not encapsulate a variable in a closure and allow it to be accessed only through methods.

var contador = (function () {
  var indice = 0;

  return {
    get: function () { return indice; },
    set: function (value) { indice = value; },
    incrementar: function () { return ++indice; },
  }
})();

var log = document.getElementById("log");
log.innerHTML += "<div>indice: " + contador.get() + "</div>";
log.innerHTML += "<div>indice: " + contador.set(3) + "</div>";
log.innerHTML += "<div>indice: " + contador.get() + "</div>";
log.innerHTML += "<div>indice: " + contador.incrementar() + "</div>";
log.innerHTML += "<div>indice: " + contador.indice + "</div>";
<div id="log">
</div>

  • Man, fantastic this... I’m studying these IIFE, detail that just had seen this in some codes on the internet, not even name I knew... Now I’m gonna dig in hehe, thank you!

  • 1

    @Leandroluk, as I said, I see little use in IIFE, I prefer to define a "Class", if I need some property calculated or read-only, use Object.defineProperty, and to define the methods use "Class". prototype.

  • Yes in certain aspects fully agree, my problem is that in my case I am constituting a plugin for Chrome that will handle a site already created, and I am testing methods of not declaring elements just reconfigure the site as I want, rsrs

  • 1

    You can create a handleEvent as the second example of this LINK. In this case handleEvent will function as a closure for your plug-in (isolating it) and allow you to organize your code.

1

If you want to perform a function right at the page load, just remove the code from the function and let it loose in the script. How:

var b = 'hello world!';
console.log('bar');
console.log('foo ' + 'b');

Or if you really need a function, simply invoke it as:

function foofoo(){
    var b = 'hello world!';
    console.log('bar');
    return b;
}
function foobar(bar){
    console.log('foo ' + 'b'); 
}
bar = foofoo();
foobar(bar);

Ready!

  • My question is about performing undeclared functions expensive...

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.