Functions that are assigned as values to the variables are called function expressions. If you haven't read about functions in javascript yet, I would recommend you to read this before continuing any further. Now, let's try to understand function expressions with the help of an example.

var counter = 0
var incrementCounterAndPrint = function () {
  counter++;
  console.log("Incremented Counter", counter);
}
incrementCounterAndPrint()

When the JS engine encounters this code, at first it creates a global execution context and initiates the creation phase. During the creation phase, it will go through all the declaration statements and place them in the memory. In this case, variables, counter and incrementCounterAndPrint will be stored in the memory with a default value, undefined assigned to it.

As there are no more declaration statements, it will move to the second phase, which is the execution phase. The execution phase is the phase in which the code is executed line by line. In this case, at first, counter will be assigned to a value 0 and incrementCounterAndPrint will be assigned with the entire function as the value. When the JS engine encounters the statement incrementCounterAndPrint(), it will first check the memory whether this particular variable is present or not. As it is present, it will fetch the value from the memory and execute it. On executing the function, the function incrementCounterAndPrint will be pushed to the call stack and a new function execution context is created. As soon as the execution context is created, it will initiate the creation phase. As there are no declaration statements as such, it will move to the second phase called the execution phase. In this phase, at first, the JS engine will execute the statement counter++. While executing, it will check whether the variable is present in the local memory, as its not present, it will move to the global execution context and check it's memory. As soon as it finds the variable, it will execute the operation and move to the next line. On executing the statement console.log('Incremented Counter', counter), it will print the value 1 to the console.

Now, the obvious question is whether function expressions are hoisted? Well, let's check this by tweaking the above code.

var counter = 0
incrementCounterAndPrint() // TypeError: incrementCounterAndPrint is not a function
var incrementCounterAndPrint = function () {
  counter++;
  console.log("Incremented Counter", counter);
}

When the JS engine runs the above code it will throw a type error. Can you tell me why this happens? Well, if we try to observe the code, we can see that function is being assigned as a value to the variable incrementCounterAndPrint. In the creation phase as per the hoisting feature, all the variable declarations will be moved to the top leaving the values assigned to it behind. In this case, incrementCounterAndPrint will be moved to the top leaving the function code-behind, and will be set with a value undefined by default as it was declared using var. When the JS engine encountering the statement incrementCounterAndPrint() will first check the memory for the variable. As it's present, it will fetch the value that is stored which is undefined. Since undefined is not a function type, it will throw a type error. This brings us to the conclusion that function expressions are not hoisted. Function expressions have their scope. Function expressions generally are anonymous but we could also have it named, which helps a lot in debugging.

So what about arrow functions ???. Well, I will be soon covering that in detail in my next blog, hold tight. Till then, if you feel this article was useful, please do show your love and share this with your fellow beings via your social media who could make maximum use of this. Always feel free to connect with me on twitter, linkedIn or email.

Until we meet again, The Mallu Dev signing off 👋 Cheers 🥂