Variables (let/const), types, and operators

The idea

JavaScript is the programming language of the browser. Every interactive thing you've clicked on a website, from a "like" button to a shopping cart total, is JavaScript reacting to you. It also runs on servers, but this track focuses on the browser, without frameworks.

Like every language, JavaScript starts with variables: names that hold values so you can use them later. If you've done the Python track, a lot of this will feel familiar. Pay attention to the differences though, because JavaScript has a few traps that Python doesn't.

const and let

An online shop has to remember things while the page is open: the shop's name, how many items are in the cart, the total so far. Some of those never change (the shop's name) and some change all the time (the cart count). JavaScript has a keyword for each kind:

const shopName = "Toko Kita";
let cartCount = 0;

cartCount = cartCount + 1;
console.log(shopName, cartCount);

Toko Kita 1

• const makes a variable that can never be reassigned. Use it by default.
• let makes a variable you can reassign later. Use it only when the value really changes, like a counter.
• console.log() prints values, like Python's print(). On this site its output appears in the Console tab. In a real browser, it appears in the developer tools (press F12).
• Statements end with a semicolon ;. JavaScript can often guess where they go, but writing them yourself avoids surprises.

Try reassigning a const and see what happens:

const vat = 0.11;
vat = 0.12;

TypeError: Assignment to constant variable.

That error is a feature. When you read code that says const, you know the value never changes, which makes the code much easier to reason about.

Naming

JavaScript names use camelCase: start lowercase, then capitalise each new word, as in cartCount, totalPrice and isLoggedIn. Names are case-sensitive, so total and Total are two different variables. Pick names that say what the value means: priceWithTax beats p2 every time.

The basic types

Every value has a type. These are the ones you'll use every day:

const name = "Ayu";          // string: text, in quotes
const price = 95000;          // number: whole or decimal, there's only one number type
const inStock = true;         // boolean: true or false
let discount = null;          // null: "deliberately empty"
let coupon;                   // undefined: "no value assigned yet"

console.log(typeof name, typeof price, typeof inStock);

string number boolean

• Strings can use "double", 'single' or `backtick` quotes. Backticks are special and get their own module later.
• Numbers cover both 3 and 3.5. Unlike Python, there's no separate integer type.
• Booleans are true and false, in lowercase (Python uses True and False).
• null and undefined both mean "nothing", with a subtle difference: null is something you set on purpose, undefined is what JavaScript gives you when nothing was set.
• typeof tells you a value's type as a string.

Operators

Shops do a lot of arithmetic: price times quantity, splitting a bill, working out discounts. The maths operators work just as you'd expect from Python or a calculator:

const price = 95000;
const qty = 3;
console.log(price * qty);      // 285000
console.log(10 / 4);           // 2.5
console.log(10 % 4);           // 2, the remainder
console.log(2 ** 3);           // 8, "to the power of"

There's also a shorthand for updating a variable: count += 1 means count = count + 1, and count++ adds one as well. The same shorthand exists for the other operators: -=, *= and /=.

The + trap

+ does two jobs. With numbers it adds, but if either side is a string, it glues them together as text:

console.log(2 + 3);        // 5
console.log("2" + 3);      // "23"
console.log("Total: " + 5 + 5);   // "Total: 55"

The last one surprises everyone. JavaScript works left to right: "Total: " + 5 makes the string "Total: 5", then adding 5 to a string glues again. Use brackets to do the maths first: "Total: " + (5 + 5).

This matters because values from web pages, like what a user typed into a box, always arrive as strings. Convert them first:

const typed = "3";              // pretend this came from an input box
const quantity = Number(typed); // now it's the number 3
console.log(quantity + 2);      // 5
console.log(Number("abc"));     // NaN, "Not a Number"

NaN is what you get when a conversion fails. It's technically of type number, which is confusing but worth knowing.

Comparing values: always ===

To compare values, use === (equal) and !== (not equal). They compare both the value and the type:

console.log(5 === 5);     // true
console.log(5 === "5");   // false: a number isn't a string
console.log(5 !== 3);     // true
console.log(7 > 3, 7 <= 3);  // true false

JavaScript also has == and !=, which quietly convert types before comparing. 5 == "5" is true, and so is 0 == "". Those conversions cause real bugs, so the professional habit is simple: always use === and !==.

You can combine comparisons with && (and), || (or) and ! (not):

const age = 25;
const hasTicket = true;
console.log(age >= 18 && hasTicket);   // true
console.log(!hasTicket);               // false

Why this matters for clean code

const by default, clear camelCase names, strict === comparisons and explicit Number() conversions all do the same thing: they make your code say exactly what it means. When someone reads const, they know the value won't change. When they read ===, they know no hidden conversion is happening. Fewer surprises means fewer bugs.

Recap

• const for values that never get reassigned (the default), let for values that change. Avoid var.
• Basic types: string, number, boolean, null and undefined. Check one with typeof.
• + adds numbers but glues strings. Convert input with Number() first.
• Compare with === and !==, never ==.
• console.log() prints values so you can see what your code is doing.