JavaScript Basics: The Concepts Every Beginner Actually Needs

JavaScript has a huge ecosystem around it, which makes it easy to feel behind before you've written a single line. Almost none of that ecosystem matters until a small set of core concepts is solid. This covers exactly that set — enough to read most beginner code and start writing your own.

1. Variables: let, const, and var

Variables store values you'll use later. In modern JavaScript, you'll use two keywords:

let age = 25;       // can be reassigned later
const name = "Amit"; // cannot be reassigned

Default to const unless you know the value needs to change — it prevents a whole category of bugs where a value gets accidentally overwritten somewhere else in the code. You'll still see var in older code; avoid it in anything new, since it behaves inconsistently with scope.

2. Data Types You'll Actually Use

• String — text, wrapped in quotes: "hello"
• Number — no separate type for integers vs decimals: 42, 3.14
• Boolean — true or false
• Array — an ordered list: [1, 2, 3]
• Object — key-value pairs: { name: "Amit", age: 25 }

3. Functions

A function is a reusable block of code. You'll see two common styles:

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

const greet = (name) => {
  return "Hello, " + name;
};

The second form, an arrow function, is the more common style in modern code. Both do the same thing here — the difference matters more in specific situations (like handling this inside objects) that you won't run into as a beginner.

4. Conditionals and Loops

Conditionals decide which code runs:

if (age >= 18) {
  console.log("Adult");
} else {
  console.log("Minor");
}

Loops repeat code. The one you'll reach for most as a beginner is for...of, for stepping through an array:

const fruits = ["apple", "banana", "mango"];
for (const fruit of fruits) {
  console.log(fruit);
}

5. Arrays and Objects, Together

Most real data is a list of objects — think of a list of users, products, or posts. This combination is what you'll actually work with constantly:

const users = [
  { name: "Amit", age: 25 },
  { name: "Priya", age: 30 },
];

for (const user of users) {
  console.log(user.name + " is " + user.age);
}

6. Events: Making a Page Respond

Events are what connect your JavaScript to something a user actually does — a click, a keypress, a form submit:

const button = document.querySelector("#myButton");
button.addEventListener("click", () => {
  console.log("Button was clicked!");
});

This single pattern — select an element, listen for an event, run a function — covers the majority of beginner interactivity: buttons, forms, toggles, and menus.

Where Beginners Usually Get Stuck

• Confusing = and === — a single = assigns a value; === compares two values. Using the wrong one is one of the most common beginner bugs.
• Forgetting that arrays and objects are indexed differently — arrays use numbers (fruits[0]), objects use keys (user.name).
• Not checking the browser console — most errors are readable there and point straight to the problem line; skipping it makes debugging far harder than it needs to be.

These six ideas — variables, data types, functions, conditionals/loops, arrays and objects together, and events — cover the large majority of beginner JavaScript. Everything past this point is building on the same foundation, not replacing it.