JavaScript Variables and Data Types

ADVERTISEMENT

What Are Variables in JavaScript?

Variables are like containers that store values. You can use them to store data and refer to it later.

let greeting = "Hello, World!";

Here, greeting is the variable name and "Hello, World!" is the value stored in it.

Variable Naming Rules

JavaScript has simple rules for naming variables:

  • Must begin with a letter, $, or _
  • Can include numbers after the first character
  • Cannot start with a number
  • Cannot contain spaces or special characters
  • Cannot be a reserved keyword (let, if, return, etc.)
let userName = "Alice";   // ✅ Valid
let $price = 99;          // ✅ Valid
let _score = 100;         // ✅ Valid
let 1name = "John";       // ❌ Invalid
let user name = "Tom";    // ❌ Invalid

Tip: Use camelCase for variable names (like totalAmount, userScore) — it’s the standard style in JavaScript.

var vs let vs const

JavaScript gives you three ways to declare variables. Use them wisely depending on the situation:

var (Old Style – Avoid)

  • Function-scoped
  • Can be re-declared and reassigned
  • Gets hoisted (declared at the top internally)
var name = "Alice";
var name = "Bob";  // Allowed

Avoid var in modern JavaScript—it can create confusing bugs due to hoisting and re-declaration.

let (Modern and Flexible)

  • Block-scoped (only exists inside { })
  • Can be reassigned, but not re-declared in the same block
let city = "Delhi";
city = "Mumbai";         // ✅ Okay
let city = "Chennai";    // ❌ Error in same block

const (Constant)

  • Block-scoped
  • Cannot be reassigned or re-declared
const PI = 3.14159;
PI = 3.14; // ❌ Error

Note: const only prevents reassignment, not mutation. You can still change object properties.

const user = { name: "Alice" };
user.name = "Bob";  // ✅ Allowed

user = { name: "Charlie" }; // ❌ Error

JavaScript Data Types

JavaScript values are divided into two broad categories: Primitive Types and Object Types.

Primitive Types (Immutable)

These hold single, simple values:

  • String → "Hello"
  • Number → 42, 3.14
  • Boolean → true, false
  • undefined → declared but not assigned
  • null → intentionally empty
  • Symbol → unique identifier (used rarely)
  • BigInt → very large integers (12345678901234567890n)
let age = 25;
let name = "John";
let isLoggedIn = true;
let x;
let y = null;

Object Types (Complex & Mutable)

Used for collections of data or more complex values:

  • Object → { name: "Alice" }
  • Array → [1, 2, 3]
  • Function → function() {}
let person = { name: "Alice", age: 30 };
let colors = ["red", "green", "blue"];

Important Note:
Primitive types are immutable (cannot be changed), while object types are mutable (can be modified).

typeof Operator Explained

Use the typeof operator to check the type of any value:

typeof "Hello"       // "string"
typeof 100           // "number"
typeof true          // "boolean"
typeof undefined     // "undefined"
typeof null          // "object" (this is a known quirk)
typeof [1, 2, 3]     // "object"
typeof { a: 1 }      // "object"
typeof function(){}  // "function"

Note:
typeof null returns "object"—this is a long-standing bug in JavaScript. Just remember that null is still a primitive.

A Quick Note on Hoisting

JavaScript hoists variable declarations to the top of their scope.

With var:

console.log(a); // undefined
var a = 5;

With let or const:

console.log(b); // ReferenceError
let b = 10;

Recommendation: Use let and const to avoid hoisting issues and write safer code.

Summary

  • Use let for variables that may change.
  • Use const for fixed values.
  • Avoid var unless working with older code.
  • Understand primitive vs object types.
  • Use typeof to check the type of a value.
  • Be aware of hoisting and scoping rules to avoid unexpected errors.

ADVERTISEMENT