Confused about javascript function expression

Question

I just started to learn about javascript etc, and I get a project from my friend to take a look at it, and what I saw there is that they are using javascript functions all the time as a function expression, like this:

var a = function(Id) {
    //Do something here
}

I could say like ok, they'r working like that and I'm gonna work like that also like robot, even if I don't understand why is that like that..

So I'm wondering what is this acctually, (in that code I posted above) is that function called "a" which is expecting 1 argument called "Id" in our case so I could call it on click of some button for example, or maybe this var a is acctually variable which is called "a" but it might be called as a function and acctually it is a javascript function?

This is little bit confusing me here, and I saw in this project that almost all javascrit functions are used like this, but is this a right approach or they should use named functions expression so it might look like this:

var a = function myFunction(Id) {
    //Do something here
}

So what is this now ? I created function called myFunction which is expecting 1 argument called "Id" and it could be called on click by myFunction and also by calling "a" varible ? (if it is variable, or it is also function name or whatever)..

Thanks guys Cheers

Answer 1

The key to understanding this is that, in JavaScript, functions are data, just like any other. So, if you are ok understanding this:

var x = 10;

If you were to try to get the value of x, you'd get 10:

console.log(x);

Then, understanding this isn't that much of a stretch:

var x = function(){
   // do something
}

if you were to try to get the value here, you'd get the actual text of the function:

console.log(x); // function(){ // do something }

Since this last version retrieves a function, you could then invoke the function by simply appending () to the returned value, like this:

x(); // This would invoke the function stored in x

The alternative approach is with a "function declaration" which looks like this:

function x(){
  // Do something
}

Here, there is no variable storing the function...x is the function and to invoke it, you'd do it directly:

x();

However, in JavaScript, all declarations are "hoisted" to the top of their enclosing scope, so this:

var x = function(){};

would cause the declaration of x to be hoisted, but not the value of x, while this:

function x(){ ...};

would cause the entire declaration to be hoisted.

The difference is that a declaration would allow you to invoke the function in code the precedes the actual declaration (since hoisting would cause the function to be read first) and with an expression, if you tried this, you would get an error stating that x is not a function.

Here's an example of this:

// Print the return value from runing the function who's name is "x".
// This will succeed even though we haven't even declared the function x yet becuase all 
// declarations are hoisted to the top of their enclosing scope;
console.log(x());


// Print the return value from runing the function stored in the variable called "y":
// This will fail with an error stating that y is not a function because only the variable
// declaration (var y) is hoisted to the top of the enclosing scope, but not the value assigned to it.
console.log(y());


// This is a function "declaration" for a function who's name is "x"
function x(){
  return "hello from function declaration x";
}

// This is a function expression being assigned as the data for a variable
var y = function(){
  return "hello from function expression y";
}

Both are useful and often interchangeable, but hoisting causes differences in how (and when) you can call the function.