Using a functional approach can be very handy to the programmer due to the fact that it not only helps in keeping code structure simple and easy to edit but also increases code reusability. If you were writing a set of algorithms in which you need to use the same steps in another part of your code, instead of writing it again you can just invoke the function by putting the algorithm inside the function.
function is used followed by the name of the function. A function declaration also allows hoisting which allows the programmer to call the function before defining it. Lets us understand it with an example, below you see how the function is defined and called.
In the above example, you can see a simple function with the name ShowMessage, when invoked using (), prints in the console, “Hello World!”.
Function Expression is used to define the named or anonymous function. A function with a name is referred to as the anonymous function. Function Expression does not allow hoisting. Lets us understand it with an example,
Parameters and Arguments
When defining a function we can also pass some data inside the function to get the desired value. Data passed through function is known as parameters or arguments and generally, they are used interchangeably, though they are very similar, there is an important difference between them.
- Parameters are the values listed in the function definition.
- Arguments are the value passed down the function when called.
Returning or Non-Returning
Arrow function or ‘fat arrow functions’, is one of the most popular features that came with the ES6 update. In a normal function, this keyword is used to abound different values according to the context but with the arrow function, this is lexically bound.
Also read, Why You Can Benefit From Learning To Code
Here, We wrote a program with a global variable and two functions, as you see we are using the same global variable in the global scope and in the function scope and then invoking the function (remember we can call these function before initializing them due to hoisting as they are function declaration), we are trying to understand how the functions behave in this scenario, When we run this piece of code, we would get,
10 100 1
Now let us analyze what is happening inside the Global Execution Context, as you know global execution context would have two components, the Memory component (variable environment), and the Code component, before executing any single line of code, the memory will be allocated in the first phase.
The memory will be allocated to var x with the value undefined and functions a and b will point to function code,
And now, let us see Call Stack, where this whole execution context is pushed, and code execution started, from line 1, var x will be initialized with value 1, then it goes to the next line where function a() is invoked.
Another execution context is created with two-component and again goes through two-phase and pushed into the call stack, x’s memory will be allocated with the value undefined, and call stack will push it to line number 7, and x will get value 10, as it is a whole another execution environment, so even we have a same variable name, it will be treated as whole another new variable.
If you like my article please share it with your friends and family, and bookmark our website to get exciting articles like these ?.