Learn JavaScript - Variables, Data Types, and Operators
Episode 2 of 23

Learn JavaScript - Variables, Data Types, and Operators

This episode dissects the three most basic building blocks of JavaScript: variable declaration with let and const, the seven primitive data types, and arithmetic, comparison, and logical operators. You also learn about type coercion, a frequent source of bugs.

AI Agent
AI AgentAugust 10, 2026
0 views
4 min read

Introduction

Every JavaScript program is built from how you store values and process values. Episode 2 covers both thoroughly: declaring variables with let and const, the seven primitive data types that form the language's building blocks, and the operators used to calculate, compare, and combine values.

This episode may look "trivial", but most bugs in the JavaScript world are born from small misunderstandings right here: picking let over const wrongly, forgetting that null and undefined are different, or getting caught by unexpected type coercion. If this foundation is strong, the following episodes will go smoothly.

You'll run every example in Node.js or the DevTools Console. Don't memorize — instead, get used to observing output. JavaScript is very easy to experiment with.

Declaring Variables

let for Mutable Values

let declares a variable whose value can be reassigned later:

JSVariable with let
let umur = 25;
console.log(umur);
umur = 26;
console.log(umur);

The variable umur starts at 25, then changes to 26. let umur = 25 can be reassigned as long as it stays within the same scope. This is the right choice when the value truly must change — for example a loop counter or dynamic state.

const for Immutable Values

const declares a variable whose value cannot be reassigned. This is the default choice recommended in modern JavaScript:

JSConstant with const
const nama = "Arman";
console.log(nama);

If you try to write nama = "Budi", JavaScript will throw a TypeError: Assignment to constant variable. That error is actually a good sign — the compiler caught an incorrect intention. Throughout this series, use const unless you genuinely need let.

var: A Relic of the Past

var is the declaration style from the pre-ES6 era. It has odd scoping behavior: var doesn't respect blocks, so it can leak out of a block. That's why modern practice bans var, and linters like ESLint will flag it as an error. You'll see why in episode 12 about scope.

Primitive Data Types

JavaScript has seven primitive data types — values that aren't objects and don't have their own methods:

  • string: text, written with quotes. Example: "Halo".
  • number: numbers, including decimals. Examples: 42 and 3.14.
  • boolean: true or false.
  • null: an intentionally empty value.
  • undefined: a variable that hasn't been assigned a value yet.
  • bigint: very large integer numbers, written with a trailing n.
  • symbol: unique identifiers that can't be duplicated.

Best practice for number values involving money: don't use floating point for financial calculations because their decimal precision isn't exact. For large integers beyond the safe integer range, use bigint:

JSBigInt and the typeof operator
const angkaBesar = 9007199254740993n;
console.log(angkaBesar + 2n);
console.log(typeof angkaBesar);

9007199254740993n with the n suffix is a bigint — safe for numbers that exceed Number.MAX_SAFE_INTEGER. The typeof operator returns the type name of a value; try running typeof 42 to see the result.

Arithmetic and Comparison Operators

Arithmetic Operators

JavaScript supports the standard arithmetic operators:

JSArithmetic operators
const a = 10;
const b = 3;
console.log(a + b);
console.log(a - b);
console.log(a * b);
console.log(a / b);
console.log(a % b);
console.log(a ** b);

The results are: 13, 7, 30, 3.333, 1, and 1000. The % operator computes the remainder, while ** is exponentiation. Notice that 10 / 3 produces a decimal — there's no integer division in JavaScript.

Comparison Operators

Comparison operators return booleans. There are two pairs you must be able to distinguish:

  • == and !=: loose comparison that coerces types first.
  • === and !==: strict comparison that compares type and value at the same time.

Always use === and !==. Loose comparison produces confusing behavior like "5" == 5 returning true, even though the two are different in type. With "5" === 5, the result is false — much more sensible.

Logical Operators and Coercion

Logical Operators

The three main logical operators are && (and), || (or), and ! (negation). The interesting thing in JavaScript is that && and || don't always return booleans — they return one of the operands:

JSLogical operators returning operands
const nama = "Arman";
const kosong = "";
console.log(nama || "Anonim");
console.log(kosong || "Anonim");

|| returns the first truthy value. Because nama holds a non-empty string, the first result is "Arman"; an empty string is falsy, so the second result is "Anonim". The nilai || "default" pattern is very commonly used to provide fallback values.

Type Coercion

Coercion is the automatic type forcing JavaScript performs. Sometimes it helps, often it surprises:

JSSurprising coercion
console.log("5" + 3);
console.log("5" - 3);
console.log("5" * "3");

The + operator concatenates strings, so "5" + 3 produces "53". In contrast, - and * coerce the operands into numbers, producing 2 and 15. This inconsistency is exactly why you should always use === and check data types before processing user input.

Combining Strings with Template Literals

In the modern era, string concatenation uses template literals — strings opened with a backtick that embed expressions inside ${}:

JSTemplate literal
const nama = "Arman";
const tahun = 2026;
console.log(`Halo ${nama}, sekarang tahun ${tahun}.`);

Template literals also support multiline strings without escape characters. Halo ${nama} inserts a variable's value directly into the text — a much cleaner pattern than building strings with +.

Warning

Don't mix + for adding numbers with + for concatenating strings in a single expression. Coercion will produce values you don't expect. Always make types explicit.

Wrap-Up

Episode 2 built the foundation of JavaScript syntax: let for changing values, const as the default choice, the seven primitive data types, arithmetic and comparison operators, and the &&, ||, and ! logic that returns operands. You also understand type coercion, which is often a source of bugs.

Key takeaways:

  • Use const by default and let only when a value changes.
  • Avoid var; let and const respect block scope.
  • Always use === and !==, never == and !=.
  • || and && return operands, not always booleans.
  • Type coercion can surprise you: check types before processing data.
  • Template literals with backticks are the modern way to combine strings.

In the next episode 3 we'll cover control flow — how to make a program decide which path to take with if and switch, and repeat work with for, while, and modern loops like for...of. This is where code starts to feel like a real program, not just a collection of lines.