function expressions and arrow functions javascript

Function Expressions and Arrow Functions In Javascript

In this post i will demonstrate what the function expression is, how to create and call it and also i will show another shorthand type of it which is the arrow functions.

 

 

Function Expressions

A function expression in javascript is the same as anonymous function or function with no name except that the function expression has a name:

 anonymous function

 

function expression gives the ability to give the function a name like this:

The function expression name is optional and is used only locally inside the function body for example if you want to write a recursive function using function expressions then you must supply the function name. function name can’t be used in the outer scope, instead to call the function you use the variable that you assign the function to like that:

 

Let’s see a simple example to demonstrate the function expression, in this example i build a hierarchical list such as a navigation bar so consider we have this array:

Now we need to write a function to loop over this array and build an html nested unordered list, so we use the function expression:

As shown above i write a function expression inside the object “menu_builder” and give it a name of “tree” to reference it recursively inside the function body.

 

Overall code

 

Function expression name vs Anonymous function name

If you want to get the name of the of the function expression you can use the “name” property on the variable that variable expression is assigned to like this example:

In contrast with the anonymous functions which returns “anonymous” as the name.



Function expression hoisting

Function expressions not hoisted in other means you can not call a function expression before the actual expression declaration:

click here to learn more about javascript hoisting.

 

Function expressions can be in a shorthand form using arrow functions, this feature is supported in EcmaScript 2015, let’s see it in the next section.

 

Arrow Functions

Arrow function is an alternative short form to the function expression we just saw and in it’s basic use takes this form:

Can also take parameters:

If the function body is just one line the parentheses can be  omitted:

The above expression equivalent to

If there is only one parameter it can take this form

Arrow function also supports rest spread operator

With default values

 

Let’s see some examples using the arrow functions

Function without parameters

Function with one parameter

Or can be written also like this:

In case the function body in one statement then there is no need to parentheses:

previous example can be written also like this:

 

The most common uses of arrow function is to use it as a callback to another function like this consider this classic example when listening to button click:

This example uses the anonymous function we just described above and can be written in short form using arrow functions like this:

Or like this:



More examples on arrow functions:

 

Share this: