JavaScript Fundamentals: Variables, Functions, and the DOM in Plain English

JavaScript gets a bad reputation for being quirky and confusing, but almost all of that confusion comes from advanced edge cases you will not touch for months. The core ideas - variables, functions, and the DOM - are genuinely simple once someone explains them without jargon.

Variables: let, const, and why var is basically retired

Modern JavaScript gives you two ways to store a value: let for values that will change, and const for values that will not. You will occasionally see an older keyword, var, in tutorials and legacy code - ignore it. It has confusing scoping rules that let and const were specifically created to fix.

let score = 0;
score = score + 10; // fine, score can change

const siteName = "UpgradeTechSkills";
siteName = "Something else"; // error - const cannot be reassigned

Functions: the verbs of your program

A function is just a named, reusable block of instructions. If variables are the nouns of your program, functions are the verbs - the actions your code actually performs.

function greet(name) {
  return "Hello, " + name + "!";
}

console.log(greet("Riya")); // Hello, Riya!

You will also see the shorter arrow function syntax everywhere in modern code - it does the same thing, just written differently:

const greet = (name) => "Hello, " + name + "!";

The DOM: how JavaScript talks to a web page

The DOM (Document Object Model) is just the browser's in-memory representation of your HTML - and JavaScript can read and change it. This is how a button click ends up updating text on the page without a full reload.

<button id="likeButton">Like</button>
<p id="likeCount">0 likes</p>

<script>
  let count = 0;
  document.getElementById("likeButton").addEventListener("click", () => {
    count = count + 1;
    document.getElementById("likeCount").textContent = count + " likes";
  });
</script>

That is the entire mental model: JavaScript finds an element, listens for something to happen, and updates the page in response. Everything else - React, Vue, frameworks in general - is built on top of that same idea, just with more structure.

Where to go next

Get comfortable with variables, functions, and basic DOM manipulation like the example above before jumping into a framework. Frameworks solve problems you will not really feel until you have built a few things the plain way first.