Hello guest, welcome to Friendosphere, the community can't wait for your contribution.

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

+2 votes
asked Dec 21, 2016 in JavaScript by DanielTheGeek Q & A Ninja (1,310 points)
reshown Dec 21, 2016 by DanielTheGeek
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?

2 Answers

+3 votes
answered Dec 22, 2016 by haykinz Q & A Ninja (960 points)
selected Dec 23, 2016 by DanielTheGeek
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;


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.

+2 votes
answered Jan 4, 2017 by noordean Q & A Ninja (610 points)
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
commented Jan 5, 2017 by DanielTheGeek Q & A Ninja (1,310 points)
@noordean, thanks for your contribution.
Welcome to FriendoSphere, the friendly Q & A community.

10 questions

10 answers


2,924 users