Declaring a JavaScript function inside a variable?

Question

I am reading this tutorial: http://nathansjslessons.appspot.com/

There are lessons inside that say:

// A simple function that adds one var plusOne = function (x) { return x + 1; }; 

I'm used to seeing features like this:

 function myFunction() { return x + 1; }; 

What is the difference between the first and second?

Answer 1

Read this post written by @ CMS . He remarkably explains the difference between FunctionDeclaration and FunctionExpression . To quote written:

Functions can be declared in different ways, compare the following :

1- A function defined using the Function constructor assigned to a variable:

  var multiply = new Function("x", "y", "return x * y;"); 

2- Declaring a function function called multiply:

  function multiply(x, y) { return x * y; } 

3- Function expression assigned to a variable:

  var multiply = function (x, y) { return x * y; }; 

4- The named function expression func_name assigned to the variable multiply:

  var multiply = function func_name(x, y) { return x * y; }; 

Simply put, the following code can be either FunctionDeclaration or FunctionExpression depending on the context:

 function foo() {} 

The above value is FunctionDeclaration .

 0, function foo() {} 

The above value is FunctionExpression . The difference between the two is explained in more detail in @CMS in the above answer.

Regarding your question:

 // A simple function that adds one var plusOne = function (x) { // a function expression is assigned to a variable return x + 1; }; function myFunction() { // a simple function declaration return x + 1; }; 

Answer 2

The only difference is the first function:

  var plusOne = function (x) {
     return x + 1;
 };

defined at runtime, while another function:

  function myFunction () {
     return x + 1;
 };

defined during parsing for the script block.

Answer 3

in the end. there is no difference between 2. Just the difference in the declaration.

Answer 4

They do almost the same thing, but there are differences and reasons for both. The first expression of a function because it is assigned to a variable. Also, unrelated to a function expression, it is an anonymous function because it does not have a function name. The second is a function declaration, because it is not part of another expression and is the "source element (not a nested statement in a script or body function) of a script function". (I don’t know how to explain the source element, so I copied this from Mozilla docs). It also has the function name myFunction. In addition, this function can also be used before a function declaration, in contrast to functions defined by a function expression.

The following example of using a function expression will not work:

 plusOne(1); var plusOne = function (x) { return x + 1; }; 

Instead, the following expression is used:

 plusOne(1); function plusOne(x) { return x + 1; }; 

---

Also, seeing how the topic of the link in which you saw this function declaration is a closure, I will continue to explain why you can use a function expression and an anonymous function. Sometimes a function simply does not need a name and can simply be anonymous, because no one will have to call it by name. A function expression can be used for something that you may have learned about is called closure. Closing is when a function includes variables for use inside it at a later time, not allowing any external area to cover it. They are a little difficult to explain, and it can also be difficult to understand without missing a few examples a few times and try it yourself.

Assuming you have enough basic javascript knowledge (for loops, creating and adding dom and onclick elements), take, for example, the following code, which looks like the problem I encountered before I found myself closing. Read it without first running the code, and try to figure out what happens when you press each / div button.

 function addButtons() { for (var i=0; i<3; i++) { button = document.createElement("div"); button.innerHTML = "Button " + i; button.onclick = function () { alert(i); }; document.body.appendChild(button); } } addButtons(); 

You can expect button 1 to warn “1”, button 2 to “2” and button 3 to “3”. However, what happens is that all buttons will warn you "3". This is due to the fact that onclick is not executed until the variable i already grows to 3.

Now read the next bit of code. This may seem a bit confusing at first.

 function addButtons() { for (var i=0; i<3; i++) { var button = document.createElement("div"); button.innerHTML = "Button " + i; button.onclick = function (j) { return function () { alert(j); } }(i); document.body.appendChild(button); } } addButtons(); 

If you run it, you will see that each button warns that you probably expected them to come first. Button 1 will warn "1", button 2 will warn "2", and button 3 will warn "3". Thus, onlick returns a closure that refers to j, which is set with i during the for loop. The variable j is stored in closure, unlike i, which changes in each cycle. And, of course, you can still name the functions used in closing if you want, but there is no reason.

I'm not sure I explained it perfectly, but I hope that this is at least an introduction to something new and useful! There is also much more information about the features you can find on the Mozilla Developer Network .

Answer 5

 var plusOne = function (x) { return x + 1; }; 

is a variable operator whose initializer is an expression of a function, whereas

 function plusTwo(x) { return x + 2; } 

- function declaration.

To understand the difference between the two, you need to understand how the variables are initialized:

Firstly, JavaScript variables have a functional area (which is different from most other popular programming languages, where variables are block-based), and the variable declaration occurs before the code is evaluated.

This means that it does not matter where the variable operator is located inside the body of the function: conceptually, it is the same as if there was an announcement located at the top right.

However, the variables will be pre-initialized to undefined , and the actual value will only be assigned when the variable operator is encountered during code execution.

This is not true for function declarations: function declarations are evaluated during the declaration binding, that is, before the general code is executed.

In particular, this means that calling the declared function in a sentence preceding the declaration is perfectly valid, i.e. this will work fine:

 alert(plusTwo(42)); function plusTwo(x) { return x + 2; }; 

then

 alert(plusOne(42)); var plusOne = function (x) { return x + 1; }; 

will fail because it is conceptually equivalent

 var plusOne = undefined; alert(plusOne(42)); plusOne = function (x) { return x + 1; };