Data Types - JavaScript Tutorial

JavaScript Data Types

JavaScript has two categories of data types: primitives (simple, immutable values) and objects (complex, mutable collections).

Primitive Types

There are 7 primitive data types in JavaScript:

1. Number

Represents both integers and floating-point numbers.

const integer = 42;
const float = 3.14;
const negative = -10;
const scientific = 2.998e8; // 299,800,000

// Special numeric values
const infinity = Infinity;
const notANumber = NaN; // Result of invalid math operations

2. String

Represents text data enclosed in quotes.

const single = 'Hello';
const double = "World";
const template = `Hello ${single}`; // Template literal with interpolation

// String methods
const text = "JavaScript";
console.log(text.length);          // 10
console.log(text.toUpperCase());   // "JAVASCRIPT"
console.log(text.slice(0, 4));     // "Java"

3. Boolean

Represents logical true or false values.

const isActive = true;
const isLoggedIn = false;

// Boolean operations
console.log(true && false);  // false
console.log(true || false);  // true
console.log(!true);          // false

4. Undefined

A variable that has been declared but not assigned a value.

let notAssigned;
console.log(notAssigned);  // undefined

function noReturn() {}
console.log(noReturn());   // undefined

5. Null

Represents the intentional absence of any value.

let user = null;  // Explicitly "no value"
console.log(user); // null

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

6. Symbol

Unique and immutable identifier (advanced use case).

const sym1 = Symbol('description');
const sym2 = Symbol('description');
console.log(sym1 === sym2); // false (each symbol is unique)

7. BigInt

For integers larger than Number.MAX_SAFE_INTEGER.

const bigNumber = 1234567890123456789012345678901234567890n;
const anotherBig = BigInt("9007199254740991");
console.log(bigNumber + anotherBig);

Object Type

Objects are collections of key-value pairs and include:

// Plain objects
const person = {
  name: "Alice",
  age: 30,
  greet() {
    return `Hello, I'm ${this.name}`;
  }
};

// Arrays (special kind of object)
const numbers = [1, 2, 3, 4, 5];
const mixed = [1, "two", true, null];

// Functions (also objects!)
function sayHello() {
  return "Hello!";
}

// Dates, RegExp, Maps, Sets, etc.
const now = new Date();
const pattern = /hello/i;

Type Checking

Use the typeof operator to check types:

console.log(typeof 42);           // "number"
console.log(typeof "hello");      // "string"
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"
console.log(typeof function(){}); // "function"

// For arrays, use Array.isArray()
console.log(Array.isArray([]));   // true
console.log(Array.isArray({}));   // false

⚠️ Type Coercion

JavaScript automatically converts types in certain situations:

// Implicit coercion
console.log("5" + 3);      // "53" (number to string)
console.log("5" - 3);      // 2 (string to number)
console.log(true + 1);     // 2 (boolean to number)
console.log("5" == 5);     // true (loose equality converts types)
console.log("5" === 5);    // false (strict equality, no conversion)

// Explicit conversion
const str = String(123);   // "123"
const num = Number("456"); // 456
const bool = Boolean(0);   // false

✓ Best Practices

• Use === and !== for strict equality checks
• Use descriptive variable names that indicate the type (isActive, userName, itemCount)
• Use Array.isArray() to check for arrays
• Understand that typeof null returns "object" (it's a known quirk)
• Be careful with automatic type coercion—it can cause bugs