Performing an unnamed dual role in the act of declaring it

4

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

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

My question (because I could not make it work) is how I can perform a double function in the same statement, something like this (in my understanding):

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

Is there something like this? basically I want this function to execute after the first but that this second consumes the same effort as the DOM ...

    
asked by anonymous 28.08.2015 / 04:52

4 answers

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 only visible within it, so 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 execute these 2 anonymous functions by keeping a matching variable is to encapulate the two into a third anonymous function.

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

But the only utility of this type of construct is to pollute the code and honestly see no other utility for IIFE (expression of function with immediate execution) other than to 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>
    
28.08.2015 / 13:37
4

You can execute the anonymous function directly by adding the two parentheses () at the end of each function. They will run 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');
  }()
);
    
28.08.2015 / 11:28
1

If you want to run a function just when loading the page, just remove the function code and leave it free 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!

    
28.08.2015 / 07:42
-3

A page can not be safely manipulated until the document is "ready."

link

$( document ).ready(function() {
    //SEU CÓDIGO AQUI
});
    
28.08.2015 / 04:59