I Learned Today: 🧠Understanding Local and Global Variables, DOM Using JavaScript, Linking External JavaScript to HTML.

When you're coding in JavaScript, variables are everywhere. But where and how you declare them determines whether they're local or global—and this can make or break your application.

Let’s break it down.

🌍 What is a Global Variable?

A global variable is a variable declared outside of any function or block. It is accessible from anywhere in your code.
📌 Example:

let globalMessage = "Hello, world!";

function greet() {
    console.log(globalMessage); // Accessible here
}

greet();
console.log(globalMessage); // Also accessible here

In the example above, globalMessage is declared outside the greet() function, so it’s available globally.
⚠️ Why Global Variables Can Be Risky:

They can be accidentally overwritten.
They persist throughout the program, consuming memory.
In large codebases, they can cause naming conflicts.

🔒 What is a Local Variable?

A local variable is declared inside a function or block and can only be accessed from within that function or block.
📌 Example:

function greet() {
    let localMessage = "Hi!";
    console.log(localMessage); // Works
}

greet();
console.log(localMessage); // ❌ Error: localMessage is not defined

The variable localMessage is local to the greet() function, so trying to access it outside throws an error.
🆚 Global vs Local: A Quick Comparison
Feature Global Variable Local Variable
Scope Entire script (or window) Only within the block/function
Accessibility Anywhere in the code Limited to function/block
Risk of Conflict High Low
💡 A Note on var, let, and const

var is function-scoped.

let and const are block-scoped.

Example:

function testScope() {
    if (true) {
        var x = 10;
        let y = 20;
        const z = 30;
    }
    console.log(x); // ✅ var: accessible
    console.log(y); // ❌ let: not accessible
    console.log(z); // ❌ const: not accessible
}

🧠 Best Practices

Avoid global variables unless absolutely necessary.
Use let and const instead of var to reduce bugs.
Always declare variables with a clear scope in mind.

2.📖DOM manipulation using JavaScript

The DOM (Document Object Model) is your gateway to making web pages interactive with JavaScript. It’s how you can read, update, add, or delete HTML elements dynamically.

Let’s dive into the essentials of DOM manipulation using JavaScript.

📖 What is the DOM?

When a web page loads, the browser creates a DOM — a tree-like structure of all elements in the page.

For example, this HTML:

<body>
  <h1>Hello</h1>
  <p id="intro">Welcome to the page!</p>
</body>

Becomes this DOM tree:


document
 └── html
      └── body
           ├── h1
           └── p#intro

JavaScript can access and manipulate any of these elements using the DOM API.

🛠️ Accessing DOM Elements

You can select elements using different methods:
1.getElementById

let intro = document.getElementById("intro");

2.getElementsByClassName

let items = document.getElementsByClassName("item");

3.getElementsByTagName

let paragraphs = document.getElementsByTagName("p");

4.querySelector (CSS-style selector)

let heading = document.querySelector("h1"); // First h1
let introText = document.querySelector("#intro");

5.querySelectorAll

let allParagraphs = document.querySelectorAll("p");

✅ 3. Link an External JavaScript File

This is the best practice because it keeps your HTML clean and separates content from logic.

🧩 Example:

index.html

<!DOCTYPE html>
<html>
<head>
  <title>My Web Page</title>
</head>
<body>
  <h1>Hello World!</h1>

  <!-- Link to external JavaScript file -->
  <script src="script.js"></script>
</body>
</html>

script.js

console.log("JavaScript file is linked!");

🔁 Make sure the JavaScript file (script.js) is in the same folder, or adjust the path accordingly.

DEV Community

I Learned Today: 🧠Understanding Local and Global Variables, DOM Using JavaScript, Linking External JavaScript to HTML.

Top comments (0)