JavaScript Basics: A Beginner's Guide for Absolute Newcomers

JavaScript runs in every browser on Earth and powers everything from an animated hamburger menu to full-blown applications like Gmail. When I started learning JS I spent two weeks lost in a Udemy course before realising I could just open Chrome's console and start typing. This guide is the version of that intro I wish I'd found first — the absolute basics, explained in the order you actually need them, with examples you can paste into your own browser right now.

1. Run JavaScript before you install anything

Open Chrome or Firefox, press F12, click the Console tab. That's a real, live JavaScript environment. Type 2 + 2 and press Enter. Congrats — you've run JavaScript.

2. Variables: let, const, var

const name = "Ada";   // can't be reassigned; use by default
let age = 30;          // use when the value will change
// avoid var in modern code — it has weird scoping rules

My rule of thumb: reach for const first. If the linter complains that you're reassigning it, change it to let. If you find yourself typing var, you probably copied 2012 Stack Overflow code.

3. Data types you'll use every day

• String — "hello" or 'hello' or `template ${literal}`
• Number — 42 (JS has no separate int/float)
• Boolean — true / false
• Array — [1, 2, 3] — ordered list
• Object — { name: "Ada", age: 30 } — key/value map
• null — intentionally empty
• undefined — hasn't been set yet

4. Template literals — string superpowers

const name = "Ada";
const age = 30;

// old way
const msg1 = "Hello, " + name + "! You are " + age + ".";

// modern way
const msg2 = `Hello, ${name}! You are ${age}.`;

5. Functions — two syntaxes, one concept

// Classic function
function greet(name) {
  return `Hello, ${name}!`;
}

// Arrow function — shorter, no own `this`
const greetArrow = (name) => `Hello, ${name}!`;

// Default parameters
const greetWithDefault = (name = "friend") => `Hi, ${name}!`;

6. Conditionals

if (age >= 18) {
  console.log("adult");
} else if (age >= 13) {
  console.log("teen");
} else {
  console.log("kid");
}

// Ternary — one-line if/else
const status = age >= 18 ? "adult" : "minor";

7. Loops

const fruits = ["apple", "pear", "kiwi"];

// for...of — cleanest way to loop an array
for (const fruit of fruits) console.log(fruit);

// forEach — array method
fruits.forEach((f, i) => console.log(i, f));

// map — transform each item
const upper = fruits.map(f => f.toUpperCase());

8. Arrays and objects — the essentials

const arr = [1, 2, 3];
arr.push(4);            // add at end
arr.length;             // 4
arr.filter(n => n > 1); // [2, 3, 4]

const user = { name: "Ada", age: 30 };
user.name;              // "Ada"
user.email = "a@x.com"; // add key
delete user.age;        // remove key

9. Equality — always use ===

1 == "1";    // true  (JS converts types)
1 === "1";   // false (strict — always what you want)

10. A real mini-app — click counter in 8 lines

<button id="b">Clicks: 0</button>
<script>
  const btn = document.getElementById("b");
  let count = 0;
  btn.addEventListener("click", () => {
    count += 1;
    btn.textContent = `Clicks: ${count}`;
  });
</script>

Save that as click.html, double-click to open in your browser, and you've just built your first interactive web app.