0

For the below 2 functions, I do not understand Function B is not run immediately like Function A when the script is read.

Instead I have to call it startTick(); after the function B.

//Function A
(function () {
    console.log("startTick");
    clockSection.textContent = getTime();

})();


//Function B 
var startTick = function () {
    console.log("startTick");
    clockSection.textContent = getTime();

};
Akash Sharma
  • 93
  • 1
  • 10
  • `()` after a function reference calls the function. You have that in the first example but not the second. What did you think the `()` do in the first example? – Felix Kling Nov 03 '17 at 17:26

4 Answers4

2

First you declare a function: (function(){}) and then you call it (function (){})(). Note the parenthesis after the function declaration in your function A. It's callint it. The function B wasn't called, just declared.

Jerônimo Nunes
  • 89
  • 3
  • In Function B when the variable startTick is being assigned the anonymous function your saying it does not go inside the block until you explicitly call it? – Akash Sharma Nov 03 '17 at 17:30
  • @AkashSharma: Yes, a function is not executed until is called. *Declaring* a function and *calling* a function are two separate processes. I recommend to read http://eloquentjavascript.net/03_functions.html . – Felix Kling Nov 03 '17 at 17:35
0

Your first function executes immediately (IIFE) because of the final (). The second has to be called: startTick() (Function expression) because you are just assigning a function to a variable and not executing it.

IIFE - Immediately Invoked Function Expressions - are usually used as a way to encapsulate a module or a set of code. It creates a closure that is used as a namespace.

Function expressions are usually used instead of a named function but have no real purpose. It's a matter of style.

ktilcu
  • 2,478
  • 1
  • 14
  • 13
0
function func_name(){...}

This is a function declaration. You define what the function does by this syntax. But it doesn't automatically run right after the declaration.

Whenever you want to run the function you usually invoke the function by

func_name()

after you declared the function somewhere else.

So to answer your question:

Function A: Inside the very first pair parenthesis is the declaration of your function. Then the second pair of parenthesis is where you actually calling the function.

Function B: This is just a declaration, which doesn't run itself automatically. So if you want to run it, invoke it by func_name()

Hopefully, this is clear to you.

Yuxiang Chen
  • 45
  • 7
0

The first one is not just an anonymous function, it's an "Immediately invoked function expression" (or IIFE for short).

The function itself is just what's inside the parenthesis and it won't execute by itself, you called it by defining it inside those parenthesis and then calling it through the () at the end of the expression, so in way, you still had to use () just like you did for the second one, it's just that, had you not done that, since it's nameless and not stored in a variable, constant or let, you would've had no way of referring to it later to execute it.

The second one is actually still an anonymous function, you just assigned it to a var instead of enclosing it in parenthesis and calling it right away.

A named function looks like this:

function startTick(){
    ...
}

Notice it's not assigned to a var or anything, rather, the name was defined after the function keyword. One important difference is that you can call named functions in your code before the line where they are defined (more about that here: var functionName = function() {} vs function functionName() {}. More about functions in general here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions )

Lyserg Zeroz
  • 156
  • 6