DEV Community

loading...
Cover image for JavaScript Function Expressions

JavaScript Function Expressions

bello profile image Bello Updated on ・3 min read


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
};
Enter fullscreen mode Exit fullscreen mode

See the example below:

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

greeting(); // Hello!
Enter fullscreen mode Exit fullscreen mode

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!
Enter fullscreen mode Exit fullscreen mode

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!
Enter fullscreen mode Exit fullscreen mode

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!
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

See the example below:

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

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("...");
}();
Enter fullscreen mode Exit fullscreen mode


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
};
Enter fullscreen mode Exit fullscreen mode

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

Syntax:

variable = para => {
    // statements
};

variable = (para) => {
    // statements
};
Enter fullscreen mode Exit fullscreen mode

Both syntaxes above are the same.

Arrow function with no parameter needs parentheses.

variable = () => {
    // statements
};
Enter fullscreen mode Exit fullscreen mode

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

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

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!
Enter fullscreen mode Exit fullscreen mode

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!
Enter fullscreen mode Exit fullscreen mode

Limitations of arrow functions

Check out the limitation of arrow functions on MDN


Happy Coding!!!


Buy me a Coffee

TechStack | 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.

Discussion (0)

pic
Editor guide