In JavaScript, local variables are variables that are declared within a function and are only accessible inside that function. Here are the basics you need to know:
🔹 Declaring Local Variables
You declare a local variable using let, const, or var inside a function:
function greet() {
let name = "Alice"; // local variable
console.log("Hello, " + name);
}
greet(); // Works fine
console.log(name); // Error: name is not defined
🔹 Key Characteristics
| Feature | Description |
|---|---|
| Scope | Only accessible within the function where it's declared. |
| Lifetime | Exists only during the execution of the function. |
| Not global | Cannot be accessed outside the function. |
| Can use let/const/var |
let and const (ES6+) are block-scoped, var is function-scoped. |
🔹 let vs var in local scope
function example() {
if (true) {
let a = 10; // block-scoped
var b = 20; // function-scoped
}
// console.log(a); // Error: a is not defined
console.log(b); // Outputs: 20
}
🔹 Example Use Case
```java script
function calculate Area(width, height) {
let area = width * height; // local variable
return area;
}
console.log(calculate Area(5, 10)); // 50
// console.log(area); // Error: area is not defined
---
If you want, I can also explain **global vs local variables** or how **block scope** works with `let` and `const`.
### 🌍 Global Variables in JavaScript
A **global variable** is a variable that is declared **outside of any function or block** and is **accessible from anywhere** in your JavaScript code.
---
### 🔹 Declaring Global Variables
```java script
let global Var = "I'm global!";
function show Global Var() {
console.log(global Var); // Can access global variable
}
show Global Var(); // Outputs: I'm global!
console.log(global Var); // Also works outside the function
🔹 How to Declare Global Variables
| Keyword | Scope | Example |
|---|---|---|
var |
Global if declared outside any function | var x = 10; |
let / const |
Also global if declared at the top level (outside any block or function) | let y = 20; |
🔹 Implicit Global Variables (Not Recommended)
If you assign a value to a variable without declaring it with var, let, or const, it becomes global by default (in non-strict mode).
function createGlobal() {
undeclared Var = "I'm global too!"; // No let/var/const = becomes global
}
createGlobal();
console.log(undeclaredVar); // Works, but bad practice!
Use "use strict"; to avoid accidental globals.
🔹 Best Practices
- Use
letorconstto avoid polluting the global scope. - Avoid creating global variables unless necessary.
- Encapsulate code in functions or modules to keep variables local.
🔹 Example of Global vs Local
let message = "Global message";
function display() {
let message = "Local message";
console.log(message); // Outputs: Local message
}
display();
console.log(message); // Outputs: Global message
Let me know if you want an example in a browser or how to use global variables across files.
DOM in JavaScript — Basics Explained
DOM stands for Document Object Model. It’s a programming interface for HTML and XML documents. With the DOM, JavaScript can interact with and manipulate web pages dynamically.
What is the DOM?
When a web page is loaded, the browser turns the HTML into a DOM tree — a structured representation of the document as nodes and objects.
Example DOM structure for:
<html>
<body>
<h1>Hello</h1>
<p>Welcome to the page!</p>
</body>
</html>
The DOM turns this into a tree of elements:
Document
└── html
└── body
├── h1
└── p
Basic DOM Manipulation in JavaScript
1. Accessing Elements
let heading = document.getElementById("main-heading");
let paragraphs = document.getElementsByTagName("p");
let buttons = document.getElementsByClassName("btn");
let firstDiv = document.querySelector("div");
2. Changing Content
let heading = document.getElementById("main-heading");
heading.textContent = "New Heading Text";
3. Changing Styles
heading.style.color = "blue";
heading.style.fontSize = "24px";
4. Adding/Removing Elements
let newPara = document.createElement("p");
newPara.textContent = "This is a new paragraph.";
document.body.appendChild(newPara);
newPara.remove(); // Removes it from the page
5. Handling Events
let btn = document.getElementById("myBtn");
btn.addEventListener("click", function() {
alert("Button clicked!");
});
Common DOM Methods
| Method | Description |
|---|---|
getElementById() |
Selects one element by ID |
getElementsByClassName() |
Selects multiple elements by class |
querySelector() |
Selects the first matching element |
querySelectorAll() |
Selects all matching elements |
createElement() |
Creates a new HTML element |
appendChild() |
Adds a child element |
removeChild() |
Removes a child element |
Top comments (0)