Skip to main content

Variables & Types

Introduction​

Variables are containers that store values. In JavaScript, they are dynamically typed, meaning you don’t have to declare their type explicitly — the interpreter figures it out at runtime. This is different from languages like Java or C#, where types are declared up front.

JavaScript variables can hold primitive values (such as numbers and strings) or references to objects (such as arrays, functions, or user-defined objects). Choosing the right variable keyword (let, const, or var) is important for clean, bug-free code.

Ways to declare variables:

  • var → the old way. Function-scoped, can be redeclared, hoisted. Best avoided in modern code.
  • let → introduced in ES6. Block-scoped, can be reassigned but not redeclared within the same scope.
  • const → block-scoped, must be initialized at declaration, cannot be reassigned (but objects/arrays can still have their contents modified).

Types in JavaScript fall into two broad categories: primitive values and objects.

Primitive Types​

Primitive values are immutable and are copied by value.

The primitive types are:

  1. string – text values.
  2. number – integers and floating-point numbers (JavaScript does not distinguish between them).
  3. boolean – true or false.
  4. null – an explicitly assigned “no value”.
  5. undefined – a variable that has been declared but not assigned a value.
  6. symbol – a unique and immutable identifier, often used as object property keys.
  7. bigint – integers larger than Number.MAX_SAFE_INTEGER.

Objects (Reference Types)​

Objects are copied by reference.
This means variables do not store the object itself, but a reference to its location in memory.

Common object types include:

  • Plain objects ({})
  • Arrays ([])
  • Functions
  • Dates, Maps, Sets, etc.

Because objects are referenced, changes made through one variable can affect others that reference the same object.

Type Checking​

JavaScript provides the typeof operator to inspect the type of a value at runtime.

  • typeof works reliably for most primitive types
  • typeof null returns "object" (a long-standing JavaScript quirk)
  • Arrays are objects, so typeof [] returns "object"

To correctly check for arrays, use:

Array.isArray(value);

Note:

  • typeof NaN returns "number"

Concepts​

Declaring Variables​

let age = 25;
const name = "Alice";
var city = "London"; // legacy

typeof Operator​

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

Examples​

let age = 30;
const name = "Alice";
let isStudent = true;
let salary;
let empty = null;
let bigNumber = 123456789012345678901n;

console.log(typeof age);       // number
console.log(typeof name);      // string
console.log(typeof salary);    // undefined
console.log(typeof empty);     // object
console.log(typeof bigNumber); // bigint

const person = { firstName: "Bob", lastName: "Smith" };
const numbers = [1, 2, 3];

console.log(typeof person);  // object
console.log(typeof numbers); // object

Challenges​

1. Variable Declaration​

  • Declare variables for your firstName, lastName, age, and isGraduate.
  • Print each variable with its type.
💡 Show Answer
let firstName = "Alice";
let lastName = "Smith";
let age = 25;
let isGraduate = true;

console.log(firstName);
console.log(typeof firstName);
console.log(lastName);
console.log(typeof lastName);
console.log(age);
console.log(typeof age);
console.log(isGraduate);  
console.log(typeof isGraduate);

2. Let vs Const​

  • Reassign a let variable, then try reassigning a const variable.
  • What happens?
💡 Show Answer
let x = 10;
x = 20; // works

const y = 5;
y = 15; // ❌ error

3. Unassigned variable​

  • Declare a variable without assigning it and log its type.
💡 Show Answer
let salary;
console.log(salary);        // undefined
console.log(typeof salary); // "undefined"

4. BigInt + number​

  • Create a variable holding a very large number using BigInt.
  • Try adding it to a normal number — what happens?
💡 Show Answer
let big = 9007199254740991n; 
let normal = 10;
// console.log(big + normal); // ❌ error
console.log(big + 10n); // ✅

5. typeof array and function​

  • Declare an array and a function.
  • Use typeof on both — what do you notice?
💡 Show Answer
let arr = [1, 2, 3];
function greet() { return "Hello"; }

console.log(typeof arr);   // object
console.log(typeof greet); // function

6. Object vs primitive​

  • Create an object with two properties, log its type, then compare with a primitive type.
💡 Show Answer
let student = { name: "Alice", grade: "A" };
let number = 42;

console.log(typeof student); // object
console.log(typeof number);  // number

7. describeType function​

  • Write a function describeType(value) that takes any value and prints "The type of [value] is [type]".
💡 Show Answer
function describeType(value) {
  console.log(`The type of ${value} is ${typeof value}`);
}

describeType("hello");
describeType(42);
describeType(true);
describeType({});
describeType(undefined);

8. null, undefined, NaN​

  • Show how JavaScript treats null, undefined, and NaN differently using typeof and comparisons.
💡 Show Answer
console.log(typeof null);      // object
console.log(typeof undefined); // undefined
console.log(typeof NaN);       // number

9. Type coercion​

  • Explore type coercion: what happens when you add a number and a string (10 + "5"), subtract them (10 - "5"), or compare them (10 == "10" vs 10 === "10").
💡 Show Answer
console.log(10 + "5");    // "105"  (number → string, concatenation)
console.log(10 - "5");    // 5      (string → number)
console.log(10 == "10");  // true   (loose equality, coercion)
console.log(10 === "10"); // false (strict equality, no coercion)

10. Primitive type table​

  • Log a table showing each of the primitive types.
💡 Show Answer
// string   → "hello"
// number   → 42
// boolean  → true
// null     → null
// undefined→ undefined
// symbol   → Symbol("id")
// bigint   → 123456789012345678901n