JavaScript Basics — Variables, Types & Operators

Storing information with variables

A variable is a named container for a value. In modern JavaScript, you create variables with let or const. Use const when the value should never be reassigned after it's set, and let when you expect the value to change later. Reaching for const first is a good habit, since it prevents accidental changes and makes your code easier to reason about. A variable name should describe what it holds, like userName or totalPrice, rather than a vague name like x, because clear names make code far easier to read later, including for you.

1const siteName = "Trailhead Coffee";2let cupsSold = 0;34cupsSold = cupsSold + 1;5console.log(siteName, cupsSold);

Every value in JavaScript has a type. The most common types you'll use constantly are strings for text, wrapped in quotes like "hello", numbers for numeric values like 42 or 3.14, and booleans, which are either true or false and represent yes-or-no facts. There's also a special value, undefined, meaning a variable exists but hasn't been given a value yet. Knowing a value's type matters because operations behave differently depending on type: adding two numbers produces a sum, but adding two strings joins them together, a process called concatenation. JavaScript will also sometimes convert one type to another automatically, called type coercion; combining a string and a number with + always converts the number to a string first, which is convenient for building messages but can also cause bugs if you expect a number and get text instead.

• String — text, written in quotes, like "Hello, world!"
• Number — numeric values, like 7 or 19.99, no quotes needed
• Boolean — true or false, used for yes-or-no logic
• undefined — a variable that has been declared but has no value yet
• Array — an ordered list of values, written with square brackets

1const price = 4.5;2const quantity = 3;3const total = price * quantity;45const greeting = "Order total: $" + total;6console.log(greeting);78console.log(typeof price);9console.log(typeof greeting);

Operators for math and comparison

Arithmetic operators work as you'd expect: + for addition, - for subtraction, * for multiplication, and / for division. The modulo operator, %, returns the remainder of a division, which is useful for checking things like whether a number is even. Comparison operators produce a boolean result. === checks whether two values are strictly equal, and !== checks whether they are not equal. Always prefer === over the older == operator, because === avoids surprising automatic type conversions. Comparison operators like >, <, >=, and <= compare numbers directly and also return booleans, which become essential in the next chapter when you use them to make decisions.

1const stock = 5;2const isSoldOut = stock === 0;3const isLowStock = stock <= 5 && stock > 0;4const isEven = stock % 2 === 0;56console.log(isSoldOut, isLowStock, isEven);

Arrays store ordered lists of values, written with square brackets, like ["HTML", "CSS", "JavaScript"]. You can read an item by its position, called its index, starting at 0, so skills[0] is the first item. The .length property tells you how many items are in an array, and .push() adds a new item to the end. Arrays and the types above are the raw materials for almost every JavaScript program you'll write, including the loops and conditionals in the next chapter.

1const skills = ["HTML", "CSS", "JavaScript"];23console.log(skills[0]);4console.log(skills.length);56skills.push("Flexbox");7console.log(skills);

Connecting JavaScript to the page

You can also connect JavaScript to the HTML you already know how to write. The document.querySelector function finds an element on the page using a CSS selector, the very same selectors you learned in the CSS chapters, whether that's a tag name, a class starting with a dot, or an id starting with a hash. Once you have a reference to an element, you can read or change its content using properties like textContent, and you can add or remove CSS classes on it using classList.add() and classList.remove(), which is the standard way to toggle a visual state, like showing an element as active or highlighted. This is the bridge between the static pages you've built so far and pages that can update themselves.

1const heading = document.querySelector("h1");2console.log(heading.textContent);34heading.textContent = "Welcome back!";5heading.classList.add("highlighted");