Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Explore the concept of JavaScript Function Scope and different types of JavaScript Functions
In JavaScript, various scopes allow us to access the functions and variables from different places in our code. We will learn about the function scope in this tutorial. Also, we will explore the different types of function expressions in JavaScript.
Function Scope
When we create a new function in JavaScript, it also creates the scope for that particular function. It means that whatever variables we declare inside the function or define the nested function inside it, we can only access it inside the function block.
If we try to access the variables defined inside the function block from outside the function, it gives a reference error.
Syntax
You can follow the syntax below to define the function and learn about the function scope.
function function_name(){
var variable = 10; // variable has a function scope.
}
let variable1 = variable;
// we can't access the variable here as it has a function scope.
In the above syntax, you can see that we can’t access the variable outside the function as the function block bounds it.
Example 1
In this example, we have created the sample function and defined the variables inside that which has a block scope. JavaScript raises the reference error if we try to access the variables defined inside the sample() function from outside of the function.
<html>
<body>
<h2>Function Scope in JavaScript</h2>
<div id="output"></div>
<script>
let output = document.getElementById("output");
// defining the function
function sample() {
// variables with function scope.
var website = "TutorialsPoint!";
var language = "JavaScript";
output.innerHTML +=
"You are learning the " +
language +
" programming language on " +
website +
" </br>";
}
sample();
// we can't access language and website variables here.
</script>
</body>
</html>
Example 2
We have defined the nested_function() inside the sample function in this example. We can’t call the nested_funciton() outside the sample() function as nested_function is in the scope of the sample function.
<html>
<body>
<h2>Function sSope in JavaScript</h2>
<div id="output"></div>
<script>
let output = document.getElementById("output");
function sample() {
// variables with function scope.
var num = 10;
function nested_function() {
// num variables also can be accessed here as nested_function() is
//inside the scope of sample function
var string = "JavaScript";
output.innerHTML +=
"The value of the num variable is " + num + "<br/>";
output.innerHTML +=
"The value of the string variable is " + string + "</br>";
}
// we can call the nested_function() inside the sample() function only
nested_function();
// we can't access the string variable here as the scope of
//nested_function bounds it
}
sample();
</script>
</body>
</html>
Different Types of Functions in JavaScript
According to the function definition and declaration, there are multiple types of functions, and we will learn them all one by one here.
Normal Function
The normal function is a function that all JavaScript developers generally use. We can define the regular function using the function name followed by the function keyword.
The regular function remains hoisted at the top of the current scope of the function. It means we can call the function before defining it, but it should be defined after execution.
Syntax
Follow this syntax to define the regular function.
function function_name(){
// function body
}
In the above syntax, we have used the function keyword to define the function. The ‘function_name’ is the function's name, and we can write the code for the function body inside the curly braces.
Function Expression
The function expression also works similarly to a normal function. Still, the difference is that it doesn’t have any name, and we need to store the function expression inside the variable. We can use the identifier to invoke the function in which we have stored it.
The JavaScript evaluates the function expression step-by-step. So, it is not hoisted at the top of the scope, so we can’t call it before the declaration.
Syntax
Follow this syntax to define the function expression.
var function_identifier = function () {
// function body
}
function_identifier();
In the above syntax, we have defined the function without its name using only the function keyword and stored it inside the function_identifier variable. Also, users can see how we have used the function_identifier to invoke the function expression.
Arrow Function
The arrow function was introduced in the ES6, the last main revision of JavaScript, in 2015. It is a shorter syntax to define the function without the function name. Also, it is called the expression and anonymous function as it doesn’t contain their identification.
Syntax
Follow this syntax to define the arrow function.
var function_identifier = (params) => {
// function body
}
function_identifier(arguments);
In the above syntax, we have stored the arrow function expression in the function_identifier. Also, we have passed the parameters inside the arrow function and arguments while calling the function using the function_identifier variable.
Closure Function
We can create nested functions in JavaScript and can get access to the parent function variables using the child function. As the child function contains the permission to access all variables defined in the parent function’s scope, we can say the child function to closure function.
Syntax
function parent() {
// variables of the parent
var child = () => {
// variables of child
// access variables of the parent
};
return child;
}
var child = parent();
child();
In the above syntax, we can access all variables of the parent function inside the child function, and the parent function returns the child function. So, we can indirectly call the child function from outside of the parent function, even if it is defined inside the parent function’s scope.
Constructor Function
Syntax
We can use the constructor function to create an object.
function constructor(property){
this.property = property
}
var string = new constructor("value");
In the above syntax, we created the object of the constructor function.
We have learned how the function scope for nested functions works via two examples in this tutorial. Also, we have learned about the different types of functions. Also, there are some other types of the functions, such as recursive or callback functions, which users can explore on the internet.
503 Views
