JavaScript Function Expression and Function Constructor

JavaScript has three different ways to defining functions,

Anonymous function expression
Named function expression
JavaScript constructor expression

JavaScript functions defined via function expressions that can be either named or anonymous.

1. Function expression: var fun1 = function() {}

This way defining functions you can called after the defining this function expression.

This function expression is also called an anonymous function because it doesn't have a name.

This function expression derives using the function operator to create a function, and the result can be stored in a variable or object property.

Anonymous function, defined at run-time.

Syntax

JavaScript anonymous function declare by following syntax,

fun1();    // undefined!
....
var fun1 = function() { ... }  // anonymous function expression
....
fun1();     // called

Example

fun1();     // undefined! - Remove fun1(); statement and run again 

var fun1 = function() {
    document.writeln("Hello world!");
}  // anonymous function expression

fun1();     // called

Run it... »

2. Function expression: function fun2() {}

This way defining functions are hoisted, means they can accessed before they are declared.

This function expression is also called a named function.

This function expression specify "function" keyword to create a function. Later you can store it in a variable or object property.

This function is defined at parse-time, so it's available and can be called anywhere in that scope.

Syntax

JavaScript named function declare by following syntax,

fun2();         // called!
....
function fun2() { ... }  // named function expression
....
fun2();         // called

Example

fun2();         // called!
        
function fun2() {
    document.writeln("Hello world!");
}  // named function expression
    
fun2();         // called

Run it... »

3. JavaScript constructor: Function constructor

This way creates a constructor function is used with the new keyword. Actually new keyword to create an object.

Syntax

JavaScript constructor function declare by following syntax,

var constructorFunction = new constructorFunction();

Following things happen when a constructor is called,

new keyword to create a new object.
```
var foo = new Foo();
```
Assign the constructor property of the object
```
var foo = new Foo("Opal Kole");
```

Use this keyword within the function object to assign constructor property.

var Foo = function Foo(name) {
    this.name = name;
}
var foo = new Foo("Opal Kole");

Let's create a function within an object using this keyword.

var Foo = function Foo(name) {
    this.name = name;
    this.position = function() {
        document.writeln("Hi, I'm " + this.name + ", My discipline is Sales Account Manager.");
    }
}
var foo = new Foo("Opal Kole");

Constructor function assigned to a variable. Using this variable you can access functions.

var Foo = function Foo(name) {
    this.name = name;
    this.position = function() {
        document.writeln("Hi, I'm " + this.name + ", My discipline is Sales Account Manager.");
    }
}
var foo = new Foo("Opal Kole");
foo.position();

Run it... »

Add new methods to this object
In our example, we have to use prototype (prototype is type of inheritance) to extend new rename() method in existing object for changing a name.

Foo.prototype.rename = function(name) {
    this.name = name;
}

foo.rename("Max Miller");
foo.position();

Run it... »