[javascript] var functionName = function() {} vs function functionName() {}

.

  1. Availability (scope) of the function

The following works because function add() is scoped to the nearest block:

_x000D_
_x000D_
try {
  console.log("Success: ", add(1, 1));
} catch(e) {
  console.log("ERROR: " + e);
}

function add(a, b){
  return a + b;
}
_x000D_
_x000D_
_x000D_

The following does not work because the variable is called before a function value is assigned to the variable add.

_x000D_
_x000D_
try {
  console.log("Success: ", add(1, 1));
} catch(e) {
  console.log("ERROR: " + e);
}

var add=function(a, b){
  return a + b;
}
_x000D_
_x000D_
_x000D_

The above code is identical in functionality to the code below. Note that explicitly assigning add = undefined is superfluous because simply doing var add; is the exact same as var add=undefined.

_x000D_
_x000D_
var add = undefined;

try {
  console.log("Success: ", add(1, 1));
} catch(e) {
  console.log("ERROR: " + e);
}

add = function(a, b){
  return a + b;
}
_x000D_
_x000D_
_x000D_

The following does not work because var add= begins an expression and causes the following function add() to be an expression instead of a block. Named functions are only visible to themselves and their surrounding block. As function add() is an expression here, it has no surrounding block, so it is only visible to itself.

_x000D_
_x000D_
try {
  console.log("Success: ", add(1, 1));
} catch(e) {
  console.log("ERROR: " + e);
}

var add=function add(a, b){
  return a + b;
}
_x000D_
_x000D_
_x000D_

  1. (function).name

The name of a function function thefuncname(){} is thefuncname when it is declared this way.

_x000D_
_x000D_
function foobar(a, b){}

console.log(foobar.name);
_x000D_
_x000D_
_x000D_

_x000D_
_x000D_
var a = function foobar(){};

console.log(a.name);
_x000D_
_x000D_
_x000D_

Otherwise, if a function is declared as function(){}, the function.name is the first variable used to store the function.

_x000D_
_x000D_
var a = function(){};
var b = (function(){ return function(){} });

console.log(a.name);
console.log(b.name);
_x000D_
_x000D_
_x000D_

If there are no variables set to the function, then the functions name is the empty string ("").

_x000D_
_x000D_
console.log((function(){}).name === "");
_x000D_
_x000D_
_x000D_

Lastly, while the variable the function is assigned to initially sets the name, successive variables set to the function do not change the name.

_x000D_
_x000D_
var a = function(){};
var b = a;
var c = b;

console.log(a.name);
console.log(b.name);
console.log(c.name);
_x000D_
_x000D_
_x000D_

  1. Performance

In Google's V8 and Firefox's Spidermonkey there might be a few microsecond JIST compilation difference, but ultimately the result is the exact same. To prove this, let's examine the efficiency of JSPerf at microbenchmarks by comparing the speed of two blank code snippets. The JSPerf tests are found here. And, the jsben.ch testsare found here. As you can see, there is a noticable difference when there should be none. If you are really a performance freak like me, then it might be more worth your while trying to reduce the number of variables and functions in the scope and especially eliminating polymorphism (such as using the same variable to store two different types).

  1. Variable Mutability

When you use the var keyword to declare a variable, you can then reassign a different value to the variable like so.

_x000D_
_x000D_
(function(){
    "use strict";
    var foobar = function(){}; // initial value
    try {
        foobar = "Hello World!"; // new value
        console.log("[no error]");
    } catch(error) {
        console.log("ERROR: " + error.message);
    }
    console.log(foobar, window.foobar);
})();
_x000D_
_x000D_
_x000D_

However, when we use the const-statement, the variable reference becomes immutable. This means that we cannot assign a new value to the variable. Please note, however, that this does not make the contents of the variable immutable: if you do const arr = [], then you can still do arr[10] = "example". Only doing something like arr = "new value" or arr = [] would throw an error as seen below.

_x000D_
_x000D_
(function(){
    "use strict";
    const foobar = function(){}; // initial value
    try {
        foobar = "Hello World!"; // new value
        console.log("[no error]");
    } catch(error) {
        console.log("ERROR: " + error.message);
    }
    console.log(foobar, window.foobar);
})();
_x000D_
_x000D_
_x000D_

Interestingly, if we declare the variable as function funcName(){}, then the immutability of the variable is the same as declaring it with var.

_x000D_
_x000D_
(function(){
    "use strict";
    function foobar(){}; // initial value
    try {
        foobar = "Hello World!"; // new value
        console.log("[no error]");
    } catch(error) {
        console.log("ERROR: " + error.message);
    }
    console.log(foobar, window.foobar);
})();
_x000D_
_x000D_
_x000D_

" "

The "nearest block" is the nearest "function," (including asynchronous functions, generator functions, and asynchronous generator functions). However, interestingly, a function functionName() {} behaves like a var functionName = function() {} when in a non-closure block to items outside said closure. Observe.

  • Normal var add=function(){}

_x000D_
_x000D_
try {
  // typeof will simply return "undefined" if the variable does not exist
  if (typeof add !== "undefined") {
    add(1, 1); // just to prove it
    console.log("Not a block");
  }else if(add===undefined){ // this throws an exception if add doesn't exist
    console.log('Behaves like var add=function(a,b){return a+b}');
  }
} catch(e) {
  console.log("Is a block");
}
var add=function(a, b){return a + b}
_x000D_
_x000D_
_x000D_

  • Normal function add(){}

_x000D_
_x000D_
try {
  // typeof will simply return "undefined" if the variable does not exist
  if (typeof add !== "undefined") {
    add(1, 1); // just to prove it
    console.log("Not a block");
  }else if(add===undefined){ // this throws an exception if add doesn't exist
    console.log('Behaves like var add=function(a,b){return a+b}')
  }
} catch(e) {
  console.log("Is a block");
}
function add(a, b){
  return a + b;
}
_x000D_
_x000D_
_x000D_

  • Function

_x000D_
_x000D_
try {
  // typeof will simply return "undefined" if the variable does not exist
  if (typeof add !== "undefined") {
    add(1, 1); // just to prove it
    console.log("Not a block");
  }else if(add===undefined){ // this throws an exception if add doesn't exist
    console.log('Behaves like var add=function(a,b){return a+b}')
  }
} catch(e) {
  console.log("Is a block");
}
(function () {
    function add(a, b){
      return a + b;
    }
})();
_x000D_
_x000D_
_x000D_

  • Statement (such as if, else, for, while, try/catch/finally, switch, do/while, with)

_x000D_
_x000D_
try {
  // typeof will simply return "undefined" if the variable does not exist
  if (typeof add !== "undefined") {
    add(1, 1); // just to prove it
    console.log("Not a block");
  }else if(add===undefined){ // this throws an exception if add doesn't exist
    console.log('Behaves like var add=function(a,b){return a+b}')
  }
} catch(e) {
  console.log("Is a block");
}
{
    function add(a, b){
      return a + b;
    }
}
_x000D_
_x000D_
_x000D_

  • Arrow Function with var add=function()

_x000D_
_x000D_
try {
  // typeof will simply return "undefined" if the variable does not exist
  if (typeof add !== "undefined") {
    add(1, 1); // just to prove it
    console.log("Not a block");
  }else if(add===undefined){ // this throws an exception if add doesn't exist
    console.log('Behaves like var add=function(a,b){return a+b}')
  }
} catch(e) {
  console.log("Is a block");
}
(() => {
    var add=function(a, b){
      return a + b;
    }
})();
_x000D_
_x000D_
_x000D_

  • Arrow Function With function add()

_x000D_
_x000D_
try {
  // typeof will simply return "undefined" if the variable does not exist
  if (typeof add !== "undefined") {
    add(1, 1); // just to prove it
    console.log("Not a block");
  }else if(add===undefined){ // this throws an exception if add doesn't exist
    console.log('Behaves like var add=function(a,b){return a+b}')
  }
} catch(e) {
  console.log("Is a block");
}
(() => {
    function add(a, b){
      return a + b;
    }
})();
_x000D_
_x000D_
_x000D_

Examples related to javascript

need to add a class to an element How to make a variable accessible outside a function? Hide Signs that Meteor.js was Used How to create a showdown.js markdown extension Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Summing radio input values How to execute an action before close metro app WinJS javascript, for loop defines a dynamic variable name Getting all files in directory with ajax

Examples related to function

$http.get(...).success is not a function Function to calculate R2 (R-squared) in R How to Call a Function inside a Render in React/Jsx How does Python return multiple values from a function? Default optional parameter in Swift function How to have multiple conditions for one if statement in python Uncaught TypeError: .indexOf is not a function Proper use of const for defining functions in JavaScript Run php function on button click includes() not working in all browsers

Examples related to syntax

What is the 'open' keyword in Swift? Check if returned value is not null and if so assign it, in one line, with one method call Inline for loop What does %>% function mean in R? R - " missing value where TRUE/FALSE needed " Printing variables in Python 3.4 How to replace multiple patterns at once with sed? What's the meaning of "=>" (an arrow formed from equals & greater than) in JavaScript? How can I fix MySQL error #1064? What do >> and << mean in Python?

Examples related to idioms

String concatenation with Groovy Check whether a variable is a string in Ruby How to implement the factory method pattern in C++ correctly How can I loop through a C++ map of maps? Get the key corresponding to the minimum value within a dictionary How do I reverse an int array in Java? When to use std::size_t? Are one-line 'if'/'for'-statements good Python style? What is the pythonic way to detect the last element in a 'for' loop? Python: most idiomatic way to convert None to empty string?