Characteristics of Function scope:
- Each function creates a new scope:
Let’s discuss with an example. Consider below code snippet where we have declared function by name ‘A’ which creates a scope(‘Scope A’) and then we declare another function by name ‘B’ inside ‘function A’ which in turn would create another scope(‘Scope B’)
If you declare any variable outside of ‘function A’, we could say that variable is in global scope as that variable is not enclosed within any function.
2. All declarations are ‘Hoisted’
In the below code snippet – first line, which declares variable by name ‘a’ , is considered as a declaration statement whereas the second line, which assigns a value of 5 to the variable ‘a’ is an execution statement.
The primary difference between declaration statements and execution statements is that in declaration statements no evaluation is done whereas in execution statements, evaluation or calculation is done.
In the above code snippet, first 3 lines correspond to a function declaration whereas the last line is execution of the declared function.
When a function is at the right side of an statement, the statement becomes function expression. Function expression is also considered as an execution statement and hence would not be hoisted. Below is an example of function expression, which would not be hoisted.
Consider the below code snippet using which we discuss about hoisting.
First line is a declaration of ‘function A’. As this declaration statement is already in global scope, there is no need to be moved anywhere. As ‘console.log’ statement in second line is not a declaration statement, there is no need to move this statement too. Statement in third line contains both declaration and execution parts – it declares a variable (declaration) and it initialises the variable(execution) with value 5. So, hoisting moves only the declarative part of this statement to the top. Third line is a ‘console.log’ statement which is an execution statement and hence hoisting would not do anything.Line 7 is a function call, an execution statement and hence hoisting would not do anything to this statement too.
After hoisting, the code would look like below
The main difference between the code before hoisting and after hoisting is that the statement ‘var a = 5’ is split into two statements as declarative and execution statements. Declarative statement is moved to the top whereas execution statement stayed at where it was.
3. Duplicate declarations are ignored
Unlike C#, duplicate variable declarations in function scope are ignored. Below code snippet will not throw any error and would print 5.
What would get printed if the below code is executed?
It would print 6, as the above code is transformed something like below