Scopes
In JavaScript, scope refers to the current context of execution, which determines the accessibility of variables. There are mainly three types of scope:
- Global Scope:
Variables declared outside any function or block have global scope.
They can be accessed from anywhere in the code.
var globalVar = "I'm a global variable";
function showGlobalVar() {
console.log(globalVar); // Accessible
}
showGlobalVar(); // Logs: I'm a global variable
- Function Scope:
Variables declared within a function are in the function scope.
They can only be accessed within that function.
function myFunction() {
var functionVar = "I'm a function variable";
console.log(functionVar); // Accessible
}
myFunction(); // Logs: I'm a function variable
console.log(functionVar); // Error: functionVar is not defined
- Block Scope:
Introduced in ES6 with let and const.
Variables declared within a block (inside {}) have block scope.
They can only be accessed within that block.
if (true) {
let blockVar = "I'm a block variable";
console.log(blockVar); // Accessible
}
console.log(blockVar); // Error: blockVar is not defined
// ------------------------------------
Variable in global scope can access function scope but in global scope we can't call variable in function scope.
const age = 26;
const name = 'Khojiakbar';
function info(age) {
// name = 'Muhammad'
age = 33
console.log(`My name is ${name} and I am ${age} years old`);
}
info()
console.log(`My name is ${name} and I am ${age} years old`);
Key Points:
Global Scope: Variables are accessible throughout the code.
Function Scope: Variables are accessible only within the function they are declared.
Block Scope: Variables are accessible only within the block they are declared (using let or const).
var globalVar = "global";
function myFunction() {
var functionVar = "function";
if (true) {
let blockVar = "block";
console.log(globalVar); // Accessible
console.log(functionVar); // Accessible
console.log(blockVar); // Accessible
}
console.log(globalVar); // Accessible
console.log(functionVar); // Accessible
console.log(blockVar); // Error: blockVar is not defined
}
myFunction();
console.log(globalVar); // Accessible
console.log(functionVar); // Error: functionVar is not defined
console.log(blockVar); // Error: blockVar is not defined
Loops
1. for Loop
A for loop is ideal when you know how many times you want to execute a block of code.
Basic Structure:
for (let i = 0; i < 5; i++) {
console.log(i); // Outputs: 0, 1, 2, 3, 4
}
- Initialisation: let i = 0 sets the counter i to 0.
- Condition: i < 5 runs the loop as long as i is less than 5.
- Increment: i++ increases i by 1 after each loop iteration.
2. while Loop
A while loop is used when you don't know in advance how many times you need to run the code. The loop continues as long as a condition is true.
let i = 0;
while (i < 5) {
console.log(i); // Outputs: 0, 1, 2, 3, 4
i++; // Increment the counter
}
Condition: i < 5 keeps the loop running as long as i is less than 5.
Increment: i++ inside the loop increases i by 1 each time the loop runs.
3. do...while Loop
A do...while loop is similar to a while loop, but it guarantees that the code block executes at least once before checking the condition.
let i = 0;
do {
console.log(i); // Outputs: 0, 1, 2, 3, 4
i++; // Increment the counter
} while (i < 5);
First execution: The code block runs and outputs 0.
Condition: i < 5 is checked after the first execution and keeps the loop running as long as i is less than 5.
4. for...in Loop
A for...in loop is used to iterate over the properties of an object. It loops through all the enumerable properties of an object.
const person = {name: "John", age: 30, city: "New York"};
for (let key in person) {
console.log(key + ": " + person[key]); // Outputs: name: John, age: 30, city: New York
}
key: Each property name (name, age, city) is assigned to key in each loop iteration.
person[key]: Accesses the value of each property.
5. for...of Loop
A for...of loop is used to iterate over the values of an iterable object, such as an array, string, map, set, etc.
const fruits = ["apple", "banana", "cherry"];
for (let fruit of fruits) {
console.log(fruit); // Outputs: apple, banana, cherry
}
- fruit: Each value from the fruits array is assigned to fruit in each loop iteration.
Summary with Practical Examples:
Iterating Over Arrays:
const numbers = [1, 2, 3, 4, 5];
for (let i = 0; i < numbers.length; i++) {
console.log(numbers[i]); // Outputs: 1, 2, 3, 4, 5
}
Iterating Over Object Properties:
const car = {make: "Toyota", model: "Corolla", year: 2020};
for (let key in car) {
console.log(`${key}: ${car[key]}`); // Outputs: make: Toyota, model: Corolla, year: 2020
}
Handling Dynamic Conditions:
let count = 0;
while (count < 3) {
console.log(count); // Outputs: 0, 1, 2
count++;
}
Ensuring Code Runs At Least Once:
let index = 0;
do {
console.log(index); // Outputs: 0, 1, 2
index++;
} while (index < 3);
Iterating Over Values of Iterable Objects:
const fruits = ["apple", "banana", "cherry"];
for (let fruit of fruits) {
console.log(fruit); // Outputs: apple, banana, cherry
}
break Statement
The break statement is used to exit a loop immediately, regardless of the loop's condition. When break is encountered, the loop stops, and control is passed to the statement following the loop.
for (let i = 0; i < 10; i++) {
if (i === 5) {
break; // Exit the loop when i equals 5
}
console.log(i); // Outputs: 0, 1, 2, 3, 4
}
continue Statement
The continue statement skips the rest of the code inside the current iteration of the loop and jumps to the next iteration. It does not terminate the loop but skips to the next iteration.
for (let i = 0; i < 10; i++) {
if (i % 2 === 0) {
continue; // Skip the rest of the loop iteration if i is even
}
console.log(i); // Outputs: 1, 3, 5, 7, 9
}
Top comments (1)
🚀