In JavaScript, scope refers to the context in which variables and functions are declared, defined, and accessible. It determines the visibility and lifetime of these identifiers. Understanding scope is crucial for writing well-structured and bug-free JavaScript code. JavaScript has two main types of scope: local (function) scope and global scope.
-
Local (Function) Scope:
- Variables declared within a function are said to have local scope. These variables are accessible only within the function where they are defined.
- Local scope is created every time a function is called. This means that variables with the same name can exist in different function calls without interfering with each other.
function myFunction() { var localVar = 5; // localVar has local scope console.log(localVar); // Accessible within the function } myFunction(); console.log(localVar); // Throws an error - localVar is not defined
- Variables declared without the
var,let, orconstkeyword inside a function become global variables, which are accessible throughout the entire script. This should be avoided to prevent polluting the global scope.
function createGlobalVariable() { globalVar = "I'm a global variable"; // Avoid creating global variables like this } createGlobalVariable(); console.log(globalVar); // Accessible globally
-
Global Scope:
- Variables declared outside of any function or block have global scope. They are accessible from anywhere in the script.
var globalVariable = 10; // globalVariable has global scope function myFunction() { console.log(globalVariable); // Accessible within the function } myFunction(); console.log(globalVariable); // Accessible globally
-
Block Scope (ES6):
- Introduced in ECMAScript 6 (ES6), the
letandconstkeywords create block-scoped variables, meaning they are only accessible within the block in which they are defined.
if (true) { let blockScopedVar = 42; // blockScopedVar has block scope } console.log(blockScopedVar); // Throws an error - blockScopedVar is not defined
- Introduced in ECMAScript 6 (ES6), the
-
Nested Scope:
- Functions can be nested within other functions, creating nested or lexical scope. Inner functions can access variables from their parent functions, but the reverse is not true.
function outer() { var outerVar = "I'm in outer scope"; function inner() { console.log(outerVar); // Accessible due to nested scope } inner(); } outer();
-
Scope Chain:
- JavaScript uses a mechanism called the "scope chain" to resolve variable references. When a variable is accessed, the interpreter first looks in the current scope. If the variable is not found, it continues searching in the outer (enclosing) scope, and so on until it reaches the global scope.
var globalVar = "I'm global"; function outer() { var outerVar = "I'm in outer scope"; function inner() { console.log(globalVar); // Accessible via scope chain console.log(outerVar); // Accessible via scope chain } inner(); } outer();
Understanding the scope in JavaScript is crucial for writing clean and bug-free code. Properly managing the scope of variables and functions helps avoid naming conflicts, enhances code organization, and ensures that your code behaves as expected.
let number = 5;
console.log(number);Output
5
function addNumbers (n1, n2) {
let result = n1 + n2;
console.log(result);
}
addNumbers(4, 9);Output
13
function addNumbers (n1, n2) {
let result = n1 + n2;
console.log(result);
}
addNumbers(4, 9);
console.log(result);Output
ReferenceError: Can't find variable: result
function addNumbers (n1, n2) {
let result = n1 + n2;
console.log(result);
}
addNumbers(4, 9);
let result = 123;
console.log(result);Output
13
123
let result;
function addNumbers (n1, n2) {
result = n1 + n2;
}
addNumbers(4, 9);
console.log(result);Output
13
let message = "hello";
function greet() {
message = "How are you?"
}
// before the function call
console.log(message);
greet();
//after the function call
console.log(message);Output
hello
How are you?
const addNumbers = (n1, n2) => {
let result = n1 + n2;
console.log(result);
if (result > 10) {
let result1 = "Positive";
console.log(result1)
}
}
addNumbers(4, 9);Output
13
Positive
const addNumbers = (n1, n2) => {
let result = n1 + n2;
console.log(result);
if (result > 10) {
let result1 = "Positive";
console.log(result1)
}
console.log(result1);
}
addNumbers(4, 9);Output
13
Positive
ReferenceError: Can't find variable: result1
Q. What is the output of the program?
let a = 88;
function checkValue() {
let a = 77;
a = a - 57;
}
checkValue();
console.log(a);- 88
- 77
- 20
- 31
Answer: 1