Is this a functional declaration, expression, and object?

Question

I'm learning JavaScript and am trying to learn the proper terms for what I am doing. There are so many ways to create a function.

I have created 3 examples that do the same thing, but the functions are created in completely different ways.

My questions are:

• Are any one of these methods better than the other?

• Why would I choose to do one way or another?

• What is the last "object" method called?

• What advice would you have to make this example better?

//EXAMPLE 1
// is this called function declaration?
function add( a, b ) {
 return a + b;
}

function subtract( a, b ) {
 return a - b;
}

function compute( a, b ) {
 var sum = add( a, b );
 var difference = subtract( a, b );
 var total = sum + difference;

 return total;
}

compute( 2, 3 ); //returns 4



//EXAMPLE 2
// is this called function expressions?
var add = function ( a, b ) {
 return a + b;
};

var subtract = function ( a, b ) {
 return a - b;
};

var compute = function ( a, b ) {
 var sum = add( a, b );
 var difference = subtract( a, b );
 var total = sum + difference;

 return total;
};

compute( 2, 3 ); //returns 4




//EXAMPLE 3
// what is this method called?
var calculator = {
 add: function ( a, b ) {
  return a + b;
 },
 subtract: function ( a, b ) {
  return a - b;
 },
 compute: function ( a, b ) {
  var sum = this.add( a, b );
  var difference = this.subtract( a, b );
  var total = sum + difference;

  return total;
 }
}

calculator.compute( 2, 3 ); //returns 4

Answer 1

is this called function declaration?

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

Yes.

is this called function expressions?

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

Yes. Notice that only the function(…){…} part is the function expression, the rest is a normal assignment (variable declaration with initialiser, to be pedantic).

what is this method called?

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

Again, it's a function expression. Used as a property value in an object literal here, to define a method.

Are any one of these methods better than the other?

Function declarations are preferred over assigning function expressions to variables (there are slight differences). You should use expressions only where you need them as an expression (e.g. in IIFEs, conditional assignments, property assignments, property definitions, return statements etc).

Answer 2

Function declaration:

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

A function declaration is defined at parse time for a certain script block. It can be called anywhere in the block without producing an error:

(function() {
    add(3,3)    //The function block has already been parsed, add() is available
    function add(a,b) { return a+b; }
})();

Function expressions:

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

Function expressions assign a variable to an anonymous function. These are evaluated at run time and cannot be called before being declared.

(function() {
    add(3,3)    //Error: add() has not yet been defined.
    var add = function(a,b) { return a+b; }
})();

Object Methods:

Methods, are functions that are a property of an object.

var obj = {
    propert1: 'property1 value',
    add: function(a,b) {
       return a+b;
    }
};

These may be called via obj.add(3,3), however not prior to declaring the object via an object literal or assignment of a method to a property.

Is there a preffered way?

Declaring functions via a function declaration offers flexibility. It may however lead to unexpected results, For example(raised functions):

(function returnVal() {
    function getSomething() {
        return 'foo';
    }
    return getSomething();

    function getSomething() {
        return 'bar';
    }
})();  //returns 'bar'

The return of the function may appear unexpected, however functions are raised during parse-time, and getSomething() is overridden.

Rewriting the code using a function expression produces the desired result

(function returnVal() {
    var getSomething = function() {
        return 'foo';
    }
    return getSomething();

    getSomething = function() {
        return 'bar';
    }
})(); //returns 'foo'

Object methods on the other hand act much like function expressions however they are accessible under the object's name.

var obj = {};
obj.foo = function() { /*code*/ }
obj.bar = function() { /*code*/ }

They act similarly to function expressions, however this groups code under the ownership of obj. For clarity you may wish to choose this.