JavaScript Function Expressions

A function expression is another way of creating a function.

The syntax is quite different from the function declaration seen in the previous article.

There are two ways of creating function expressions:

1. Anonymous function
2. Arrow Function

Anonymous function

An anonymous function is a function without a function name but assigned to a variable.

Syntax:

variable = function() {
    // statements
};

See the example below:

const greeting = function() {
    console.log('Hello!');
};

greeting(); // Hello!

Function expressions allow features like default parameters, returned value, etc. Function expression does not allow hoisting like function constructors.

const myName = function(name='Bob') {
    return name;
};

myName(); // "Bob"

const name = myName;
console.log( name() ); // Bob

const greeting = function() {
    return `Hello ${name()}!`;
};

console.log( greeting() ); // Hello Bob!

Named function expression

A function expression is created by assigning the function definition function(...) and function body { } to a variable.

See the example below:

const funcVar = function() {
  // statements in function body
  console.log('Hello World');
}

funcVar(); // Hello World!

There's a function name that is not visible to the outside of the function.

In the example below, the random function name func doesn't make the function declarative, it's still an expression. It only allows the function to reference itself internally.

See the example below:

const funcVar = function func() {
  // statements in function body
  console.log('Hello World!');
}

funcVar(); // Hello World!

The named function of a function expression (func) can't be used as a calling function.

funcVar(); // Hello World!
func(); // ReferenceError: func is not defined

Self-invoking Functions

An anonymous function can self-call itself. That is a called function without a calling function. It is also called immediately-invoked function expressions (IIFE).

Parentheses after the function will self-call it automatically.

See the Syntax below:

// without parameters
(function() {
    // statements
})();

// with parameters
(function(para1, ...paraN) {
    // statements
})(arg1, ....argN);

See the example below:

(function (name) {
  console.log(`Hello ${name}!`);
})('Bello'); // Hello Bello!

The function above is an anonymous self-invoking function.

There are other syntaxes of creating an IIFE.

See below:

(function() {
  console.log("...");
}());

!function() {
  console.log("...");
}();

+function() {
  console.log("...");
}();

Arrow Function

It is an arrow function because it uses an arrow (fat arrow =>) in the expression. It is a more structured function.

See the difference in syntax of an anonymous and arrow function below:

Syntaxes:

// anonymous function
variable = function(para1, ...paraN) {
    // statements
};

// arrow function
variable = (para1, ...paraN) => {
    // statements
};

Arrow function with one parameter does not need parentheses (optional).

Syntax:

variable = para => {
    // statements
};

variable = (para) => {
    // statements
};

Both syntaxes above are the same.

Arrow function with no parameter needs parentheses.

variable = () => {
    // statements
};

For function with two or more parameters, the syntax is:

const functionName = (para1, para2, ...paraN) => {
    // statements
};

See the example below:

const myName = (name='Bob') => {
    return name;
};

myName(); // "Bob"

const name = myName;
console.log( name() ); // Bob

const greeting = () => {
    return `Hello ${name()}!`;
};

console.log( greeting() ); // Hello Bob!

If a calling function like myName() is not needed in the global scope, we can call it only in a local scope.

const myName = (name='Bob') => {
    return name;
};

// myName(); global calling function

const greeting = () => {
    const name = myName;
    return `Hello ${name()}!`;
};

console.log( greeting() ); // Hello Bob!

Limitations of arrow functions

Check out the limitation of arrow functions on MDN

Happy Coding!!!

TechStack Media | Bluehost

• Get a website with a free domain name for 1st year and a free SSL certificate.
• 1-click WordPress install and 24/7 support.
• Starting at $3.95/month.
• 30-Day Money-Back Guarantee.