Variables, Constants, and Data Types

In JavaScript, variables are containers used to store data values. Before manipulating data, you need to understand how to store it and what types of data are available.

1. Declaring Variables: var, let, and const

JavaScript has three keywords to declare variables: var, let, and const.

A. Block Scope vs. Function Scope

• Block Scope: A block is defined by curly braces {}. Variables declared with let and const inside a block cannot be accessed outside it.
• Function Scope: var is scoped to the nearest function. It ignores block boundaries (like if statements or for loops).

if (true) {
  var x = 10;
  let y = 20;
}
console.log(x); // 10 (var ignores block scope!)
console.log(y); // ReferenceError: y is not defined

B. Why You Should Avoid var

var can cause subtle bugs due to hoisting and redeclaration. Modern JS best practices dictate using:

• const by default for variables that won't change values.
• let only when you need to reassign the variable.

2. JavaScript Data Types

JavaScript is a dynamically typed language. This means you do not declare a variable's type; instead, the type is automatically determined by the value assigned to it, and can change over time:

let data = "Hello"; // String
data = 42;          // Now it's a Number

JS data types are split into two categories: Primitive Types and Reference Types (Objects).

Primitive Types (Stored by Value)

Primitive values are immutable and compared directly by value.

1. Number: Represents both integers and decimals. Also includes Infinity, -Infinity, and NaN (Not-a-Number).

let age = 30;
let price = 19.99;

1. String: Sequence of characters wrapped in single, double quotes, or backticks (template literals).

let name = "Alice";
let greeting = `Hello, ${name}`; // Template literal

1. Boolean: Represents logical values: true or false.
2. Undefined: Assigned to declared variables that have not been initialized.

let job; // Value is undefined

1. Null: Intentional absence of any object value.

let car = null;

1. BigInt: Represents integers larger than 2^53 - 1.

let hugeNumber = 9007199254740991n;

1. Symbol: Unique and immutable identifier (used mostly for object properties).

Reference Types (Stored by Reference)

Reference types are mutable, stored in the heap, and accessed/compared by pointer reference.

1. Object: Key-value pairs.

let user = { name: "Alice", age: 25 };

1. Array: Ordered list of values.

let colors = ["red", "green", "blue"];

1. Function: Callable blocks of code.

3. Detecting Types: The typeof Operator

You can check the data type of a variable using typeof:

console.log(typeof 42);           // "number"
console.log(typeof "text");       // "string"
console.log(typeof true);         // "boolean"
console.log(typeof undefined);    // "undefined"
console.log(typeof null);         // "object" (This is a well-known historical JS bug!)
console.log(typeof {age: 10});    // "object"
console.log(typeof [1, 2]);       // "object"
console.log(typeof function(){}); // "function"

In the next guide, we will learn about operators and expressions in JavaScript.