JavaScript Function Expressions

JavaScript Function Expressions

Bello
·Jan 29, 2021·

4 min read

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

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 personName = myName;
console.log( personName() ); // Bob

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

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!!!


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.

 
Share this

Impressum

TechStack Media was launched in the year 2020 to make the learning of web technologies easier and more fun.

My name is Bello Osagie, I am the founder of TechStack, and my focus is to give in-depth, senior-level knowledge of the course through a step-by-step approach. You will learn HTML, CSS, JavaScript etc.

You can find my posts on Dev.to, Medium, Hashnode, Hackernoon, and Blogspot

The approach is to first start with the basics, then advance to more topics. Lots of practical examples are added to make learning more easier. TechStack Media also includes videos apart from content writing to make sure you understand all the concepts in a particular topic or course. Contents are frequently updated, so you do not miss out on the latest technology.

If you need a contact me on any of my social media or email:

For exclusive web technology tutorials, join my patron page.