Simplifying function expressions and the function statement in JavaScript

Read full article on the Infragistics blog

In JavaScript, a function can be created in three possible ways:

  1. Function as an expression
  2. Function as a statement
  3. Arrow functions

In this post, we will learn about function expressions and the function statement.

Consider the following code:

When you create a function as shown above, it is called a function declaration or statement. You can rewrite the code above to add a function in different ways, as shown below:

The function created above is called a function expression – in this case, an anonymous function expression. A named function expression can be created as below:

The name of the function expression can only be used inside a function body, which is helpful in recursion. A function expression can either be a:

  1. Named function expression
  2. Anonymous function expression

The third method of creating a function is by using the Arrow function, which was introduced in ECMAScript 6. You can learn more about Arrow functions here.

Read full article on the Infragistics blog

Simplifying function expressions and the function statement

Read full article on the Infragistics blog

In JavaScript, a function can be created in three possible ways:

  1. Function as an expression
  2. Function as a statement
  3. Arrow functions

In this post, we will learn about function expressions and the function statement.

Consider the following code:

When you create a function as shown above, it is called a function declaration or statement. You can rewrite the code above to add a function in different ways, as shown below:

The function created above is called a function expression – in this case, an anonymous function expression. A named function expression can be created as below:

The name of the function expression can only be used inside a function body, which is helpful in recursion. A function expression can either be a:

  1. Named function expression
  2. Anonymous function expression

The third method of creating a function is by using the Arrow function, which was introduced in ECMAScript 6. You can learn more about Arrow functions here.

Some important points about naming functions are as follows:

  1. A function statement cannot be created without a name
  2. A function expression can be created without a name, meaning you’re able to create an anonymous function

Read full article on the Infragistics blog

Simplifying function hoisting in JavaScript

To understand function hoisting, let us start by considering the code listed below:

image

In any other programming language, the output here would be a reference error. However, in JavaScript you will get undefined as the output. Why? Because JavaScript hoists variables at the top of the execution context. An execution context could be the function in which a variable is declared, or a JavaScript file in which a variable is declared. So, let us rewrite the above code snippet using a function:

image

Here, the variable “foo” is hoisted at the top of function abc execution context; which means you can access foo before it is declared. To put it simply, whenever you declare a variable, the JavaScript interpreter breaks it into two statements:

  1. Declaration of variable
  2. Assignment

The declaration of a variable goes at the top of the execution context, and assignment happens where the variable is created. So the above code snippet is broken into two statements as shown in the image below:

The variable foo is hoisted at the top of the execution context of function abc, hence when you use it before its declaration, you get “undefined” as the output.

Keep in mind that a variable declared using the let statement does not get hoisted to the top of the execution context.

Now that you understand how variables are hoisted in JavaScript, let’s explore function hoisting in JavaScript. In JavaScript a function can be created in two ways:

Read full article on the Infragistics blog

JavaScript Functions is a Statement or Expression?

Answer of above question is JavaScript functions can be used either as statement or expression. JavaScript functions can be treated in different ways. They can be

  • Expression
  • Passed as value
  • Returned as value
  • Statement

Functions in JavaScript can be Expression or Statement. Problem is in both flavour they look exactly same.

So a function statement is

clip_image001

This can be also written as below. Here we are assigning function as expression to a variable.

clip_image002

Function statement are always hoisted to the scope it is defined. So you do not need to define a function before using it. Consider following example,

clip_image003

In above function statement, we are using function before it is defined. You will get expected result.

Now let us make function as expression,

clip_image004

Above lines of code will throw you exception that funct1() is undefined. So function as expression does not get hoist to its scope.

clip_image006

JavaScript function can be used in if statement as well,

clip_image007

You will get following output,

clip_image008

If you change return of function to 0 then if statement would not get executed,

clip_image009

Apart from this JavaScript function can be treated as value as well. JavaScript functions act as Value. They can

  • JavaScript function can be assigned to a variable
  • JavaScript function can set as property of an Object
  • JavaScript function can be passed as argument to other function
  • JavaScript function can be returned from function etc…

You can assign function as Object property. This can be done as following,

clip_image001[6]

You see that above we assigned a JavaScript function as Object’s Property. You can use JavaScript function as argument of another function. This can be done as below,

clip_image002[6]

So we learnt in this post that a JavaScript function can be used either as statement and expression. I hope you find this post useful. Thanks for reading.