🔹 What is a Local Variable in JavaScript?
A local variable is one that is declared inside a function or block and is only accessible within that function or block.
✅ Declaring a Local Variable
You can declare a local variable using let, const, or var inside a function or block:
Using let or const (block-scoped, preferred):
```java script
function example() {
let local Variable = 'Hello';
const another Local = 42;
console.log(local Variable); // Hello
console.log(another Local); // 42
}
example();
console.log(local Variable); // ❌ Error: local Variable is not defined
#### Using `var` (function-scoped):
```java script
function example Var() {
var local Var = 'I am local';
console.log(local Var); // I am local
}
example Var();
console.log(local Var); // ❌ Error: local Var is not defined
⚠️ let vs var
-
letandconsthave block scope. -
varhas function scope (not block-level), so it behaves differently in loops or conditionals.
Example with a block:
```java script
{
let block Scoped = 'inside block';
console.log(block Scoped); // inside block
}
console.log(block Scoped); // ❌ Error: block Scoped is not defined
### 🌐 Global Variables in JavaScript
A **global variable** is a variable that is accessible from anywhere in your JavaScript code — in all functions and blocks.
---
### ✅ Declaring a Global Variable
There are several ways to create global variables:
#### 1. **Declared outside any function**
```java script
let global Var = 'I am global';
function test() {
console.log(global Var); // Accessible here
}
test();
console.log(global Var); // Accessible here too
2. Without let, const, or var (not recommended!)
```java script
function create Global() {
accidental Global = 'Oops, I am global!';
}
create Global();
console.log(accidental Global); // Works, but this is bad practice
⚠️ This creates a property on the global object (`window` in browsers, `global` in Node.js).
---
### 📦 Accessing Global Variables
In a **browser**, global variables are attached to the `window` object:
```java script
var a = 10;
console.log(window.a); // 10
In Node.js, they are not attached to global unless you assign them explicitly:
```java script
global.my Var = 'Hello from Node!';
console.log(global.my Var); // Hello from Node!
---
### 🔒 Best Practices
* Use `const` or `let` to avoid polluting the global namespace.
* Avoid using undeclared variables — use `"use strict";` to catch mistakes.
* Use global variables sparingly; they can lead to hard-to-maintain code due to name conflicts or unexpected side effects.
### 🌐 What is the DOM in JavaScript?
The **DOM (Document Object Model)** is a programming interface provided by the browser that allows JavaScript to **interact with and manipulate HTML and CSS**. It represents the structure of a webpage as a **tree of objects**.
---
### 🏗️ Basic DOM Structure
Given this HTML:
```html
<!DOCTYPE html>
<html>
<head><title>My Page</title></head>
<body>
<h1 id="title">Hello World</h1>
<p class="description">This is a paragraph.</p>
</body>
</html>
The DOM will represent it like this:
Document
└── html
├── head
└── body
├── h1#title
└── p.description
🛠️ Accessing DOM Elements in JavaScript
```java script
// Access by ID
const heading = document.getElementById('title');
// Access by class
const paragraph = document.query Selector('.description');
// Access all elements with a class
const all Paragraphs = document.query SelectorAll('.description');
---
### ✏️ Changing Content or Style
```javascript
heading.text Content = 'New Title'; // Change text
paragraph.style.color = 'blue'; // Change style
➕ Creating and Adding Elements
const newDiv = document.create Element('div');
newDiv.textContent = 'I am new!';
document.body.appendChild(newDiv);
❌ Removing Elements
paragraph.remove();
🧩 DOM Events
You can respond to user actions like clicks or key presses:
heading.addEventListener('click', function() {
alert('Heading was clicked!');
});
Top comments (0)