• Register
Hello guest, welcome to Friendosphere, the community can't wait for your contribution.
Welcome to FriendoSphere, the friendly Q & A community.

10 questions

10 answers

10 comments

2,662 users

JavaScript function declaration syntax: var fn = function() {} vs function fn() {}

+2 votes
93 views
I've recently started maintaining someone else's JavaScript code. I'm fixing bugs, adding features and also trying to tidy up the code and make it more consistent. The previous developer uses two ways of
declaring functions and I can't work out if there is a reason behind it or not.

The two ways are:

var functionOne = function() {
// Some code
};

function functionTwo() {
// Some code
}

What are the reasons for using these two
different methods and what are the pros and cons of each? Is there anything that can be done with one method that can't be done with the other?
asked Dec 21, 2016 in JavaScript by DanielTheGeek Q & A Ninja (1,310 points)
reshown Dec 21, 2016 by DanielTheGeek

2 Answers

+3 votes
 
Best answer

Thought of a better way to explain to you and i found this from MDN

Method definition syntax

Starting with ECMAScript 6, you are able to define own methods in a shorter syntax, similar to the getters and setters. See method definitions for more information.

var obj = {
  foo() {},
  bar() {}
};

Function constructor vs. function declaration vs. function expressionEDIT

Compare the following:

A function defined with the Function constructor assigned to the variable multiply:

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

function expression of an anonymous function assigned to the variable multiply:

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

function expression of a function named func_name assigned to the variable multiply:

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

Differences

All do approximately the same thing, with a few subtle differences:

There is a distinction between the function name and the variable the function is assigned to. The function name cannot be changed, while the variable the function is assigned to can be reassigned. The function name can be used only within the function's body. Attempting to use it outside the function's body results in an error (or undefined if the function name was previously declared via a var statement). For example:

var y = function x() {};
alert(x); // throws an error

The function name also appears when the function is serialized via Function's toString method.

On the other hand, the variable the function is assigned to is limited only by its scope, which is guaranteed to include the scope where the function is declared in.

As the 4th example shows, the function name can be different from the variable the function is assigned to. They have no relation to each other. A function declaration also creates a variable with the same name as the function name. Thus, unlike those defined by function expressions, functions defined by function declarations can be accessed by their name in the scope they were defined in.

answered Dec 22, 2016 by haykinz Q & A Ninja (960 points)
selected Dec 23, 2016 by DanielTheGeek
+2 votes
One thing I know about it is:

functionOne can't be called just from anywhere in the script even though it's in global context. It must be called after the function's declaration and not before. It's just like calling a variable that's not been declared....that's undefined.

functionOne(); //undefined

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


functionTwo on the other hand can be called from any where, even before its declaration.

functionTwo(); //works fine

function functionTwo(){
//do something
}
answered Jan 4 by noordean Q & A Ninja (610 points)
@noordean, thanks for your contribution.
...