JavaScript Function Expressions
Tags: javascript, codenewbie, tutorial, webdev
Published: 2021-01-29 22:29:51

{% youtube biCDv3poBk4 %}

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

```js
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.

```js
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:

```js
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:

```js
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.

```js
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:

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

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

See the example below:

```js
(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:

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

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

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

---
<a href="https://www.whogohost.com/host/aff.php?aff=7390&page=hosting" target="_blank"><img src="https://www.whogohost.com/images/affiliates/unlimited-hosting-728-x-90.png" /></a>

---

### 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:

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

See the example below:

```js
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.

```js
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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)

---

**Happy Coding!!!**

---
[![Buy me a Coffee](https://res.cloudinary.com/bizstak/image/upload/v1610317510/ko-fi-trans_fr3su4.png)](https://www.buymeacoffee.com/techstackmedia)

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

<a href="https://www.bluehost.com/track/belloosagienoah/" target="_blank"> <img border="0" src="https://bluehost-cdn.com/media/partner/images/belloosagienoah/430x288/430x288PW.png"></a>