DEV Community

kanaga vimala
kanaga vimala

Posted on

# Today I Learned: JavaScript - Global & Local Variables, DOM, and More!

JavaScript is the backbone of interactivity on the web. Whether you're toggling dark mode, validating forms, or fetching data from an API—JavaScript makes it all happen. Today, I dove into some foundational concepts that every developer should master early on: Global and Local Variables, the DOM, and a few other JavaScript essentials. Here's what I learned:

🧠 Global vs Local Variables in JavaScript

Understanding variable scope is critical to writing clean, bug-free JavaScript code.

🔹 Global Variables

  • Declared outside of any function.
  • Accessible anywhere in the code after declaration.
  • Stored in the window object in browsers. 
var siteName = "My Blog"; // Global variable

function showName() {
  console.log(siteName); // Accessible here
}
Enter fullscreen mode Exit fullscreen mode

⚠️ Caution: Overusing global variables can lead to naming conflicts and make debugging harder.

🔹 Local Variables

  • Declared inside a function or block (let, const).
  • Accessible only within that function or block. 
function greetUser() {
  let userName = "Alice"; // Local variable
  console.log("Hello, " + userName);
}
Enter fullscreen mode Exit fullscreen mode

Trying to access userName outside greetUser() would result in a ReferenceError.

🌐 The DOM (Document Object Model)

The DOM is your way of interacting with HTML using JavaScript. It represents the structure of your web page as a tree of objects.

Accessing Elements 

const title = document.getElementById("main-title");
const buttons = document.querySelectorAll(".btn");
Enter fullscreen mode Exit fullscreen mode

Modifying Content 

title.textContent = "Welcome to My Blog!";
Enter fullscreen mode Exit fullscreen mode

Adding Event Listeners 

document.querySelector("#toggle").addEventListener("click", function () {
  document.body.classList.toggle("dark-mode");
});
Enter fullscreen mode Exit fullscreen mode

DOM manipulation allows JavaScript to react to user input, update the UI dynamically, and make the page feel "alive."

✨ Other Cool Stuff I Learned

  • Functions can be declared or expressed as variables (function expressions).

  • Arrow functions offer a concise way to write anonymous functions:

  const add = (a, b) => a + b;
Enter fullscreen mode Exit fullscreen mode

  • Strict mode ("use strict";) helps catch common bugs early by enforcing cleaner code.

  • Using console.log() is a great way to debug, but tools like breakpoints in browser dev tools are even better.

🚀 Final Thoughts

Today’s dive into JavaScript reminded me that even basic concepts like variables and DOM access can open up a world of possibilities. Whether you're building a simple form or a full-fledged web app, mastering these foundations is a must.

Next up: working with APIs and async JavaScript!

Want to follow along with my journey? Drop a comment or share what you learned today!

Would you like this blog formatted for a specific platform (Medium, Dev.to, etc.), or do you want a custom image or infographic to go along with it?

Top comments (0)