Variables and Data Types

Every program needs to store and manipulate data. In JavaScript, you do this with variables. This lesson covers how to declare variables and the different data types you will work with daily.

Declaring Variables

JavaScript has three keywords for declaring variables: var, let, and const.

var name = "Sabaoon"; // function-scoped, avoid in modern code
let age = 25;         // block-scoped, can be reassigned
const PI = 3.14159;   // block-scoped, cannot be reassigned

When to Use Each

Best practice: Default to const. Only use let when you know the value needs to change. Avoid var entirely in modern JavaScript.

Primitive Data Types

JavaScript has seven primitive types. The ones you will use most often are:

String

Strings represent text. You can create them with single quotes, double quotes, or backticks.

const greeting = "Hello";
const name = 'World';
const message = `${greeting}, ${name}!`; // template literal
console.log(message); // "Hello, World!"

Template literals (backticks) let you embed expressions with ${} and span multiple lines.

Number

JavaScript uses a single Number type for both integers and decimals.

const count = 42;
const price = 19.99;
const negative = -10;

console.log(typeof count); // "number"
console.log(0.1 + 0.2);   // 0.30000000000000004 (floating-point quirk)

Watch out for floating-point precision issues when working with money. Use integers (cents) or a library like decimal.js for financial calculations.

Boolean

Booleans are either true or false.

const isLoggedIn = true;
const hasAccess = false;

if (isLoggedIn) {
  console.log("Welcome back!");
}

Null and Undefined

These two types represent the absence of a value, but in different ways.

let user = null;      // explicitly set to "no value"
let score;            // undefined — declared but not assigned
console.log(user);    // null
console.log(score);   // undefined

Use null when you intentionally want to indicate "no value." undefined usually means a variable has not been assigned yet.

Type Checking with typeof

The typeof operator returns a string describing the type of a value.

console.log(typeof "hello");    // "string"
console.log(typeof 42);         // "number"
console.log(typeof true);       // "boolean"
console.log(typeof undefined);  // "undefined"
console.log(typeof null);       // "object" (historical bug)
console.log(typeof {});         // "object"
console.log(typeof []);         // "object"

Note that typeof null returns "object" — this is a well-known bug in JavaScript that will never be fixed for backward compatibility reasons.

Type Coercion

JavaScript automatically converts types in certain situations. This is called coercion.

// String coercion
console.log("5" + 3);   // "53" (number becomes string)
console.log("5" - 3);   // 2   (string becomes number)

// Boolean coercion
console.log(Boolean(""));        // false
console.log(Boolean("hello"));   // true
console.log(Boolean(0));         // false
console.log(Boolean(42));        // true

Falsy Values

These values all evaluate to false in a boolean context:

false, 0, -0, 0n, "", null, undefined, NaN

Everything else is truthy — including empty arrays [] and empty objects {}.

Strict vs Loose Equality

Always use strict equality (===) instead of loose equality (==).

console.log(5 == "5");   // true  (loose: coerces types)
console.log(5 === "5");  // false (strict: no coercion)

console.log(null == undefined);  // true
console.log(null === undefined); // false

Loose equality applies type coercion before comparing, which leads to surprising results. Strict equality checks both value and type.

Constants and Immutability

const prevents reassignment but does not make objects immutable.

const user = { name: "Sabaoon", age: 25 };
user.age = 26;        // allowed — mutating the object
// user = {};          // TypeError — cannot reassign

const colors = ["red", "green"];
colors.push("blue");  // allowed — mutating the array
// colors = [];        // TypeError — cannot reassign

If you need a truly immutable object, use Object.freeze().

const config = Object.freeze({
  apiUrl: "https://api.example.com",
  timeout: 5000,
});

config.timeout = 10000; // silently fails (or throws in strict mode)
console.log(config.timeout); // 5000

Practical Exercise

Create a small user profile using different data types:

const firstName = "Alex";
const lastName = "Johnson";
const age = 28;
const isSubscribed = true;
const favoriteColors = ["blue", "green", "purple"];
const address = null;

const profile = `
  Name: ${firstName} ${lastName}
  Age: ${age}
  Subscribed: ${isSubscribed ? "Yes" : "No"}
  Colors: ${favoriteColors.join(", ")}
  Address: ${address ?? "Not provided"}
`;

console.log(profile);

The nullish coalescing operator (??) returns the right side only when the left side is null or undefined — unlike || which also triggers on 0, "", and false.

Key Takeaways

• Use const by default, let when reassignment is needed, and avoid var.
• JavaScript has seven primitive types; the most common are string, number, boolean, null, and undefined.
• Always use === for comparisons to avoid type coercion surprises.
• Template literals with backticks make string interpolation clean and readable.
• const prevents reassignment but does not make objects or arrays immutable.