Primitive Types
Primitive Types
JavaScript has 7 primitive types:
String
let name = 'John'; // Single quotes
let greeting = "Hello"; // Double quotes
let template = `Hi ${name}`; // Template literals
console.log(typeof name); // "string"
Number
let age = 25; // Integer
let price = 19.99; // Float
let infinity = Infinity;
let notANumber = NaN;
console.log(typeof age); // "number"
BigInt
let big = 9007199254740991n; // n suffix
let big2 = BigInt(9007199254740991); // Constructor
console.log(typeof big); // "bigint"
Boolean
let isActive = true;
let isDeleted = false;
console.log(typeof isActive); // "boolean"
Undefined
let x; // undefined
let y = undefined;
console.log(typeof x); // "undefined"
Null
let empty = null;
console.log(typeof empty); // "object" (known bug)
Symbol
let sym1 = Symbol('description');
let sym2 = Symbol('description');
console.log(sym1 === sym2); // false
console.log(typeof sym1); // "symbol"
Characteristics of Primitives
- Immutable (cannot be changed)
- Compared by value
- Stored on the stack
Objects
Objects
Object Literals
let person = {
name: 'John',
age: 30,
greet: function() {
return `Hi, I'm ${this.name}`;
}
};
console.log(typeof person); // "object"
Arrays (Special Objects)
let numbers = [1, 2, 3, 4, 5];
console.log(typeof numbers); // "object"
console.log(Array.isArray(numbers)); // true
Functions (Special Objects)
function greet() {
return 'Hello';
}
console.log(typeof greet); // "function"
console.log(typeof {}); // "object"
Reference Types
// Primitives: copied by value
let a = 5;
let b = a;
b = 10;
console.log(a); // 5 (unchanged)
// Objects: copied by reference
let obj1 = { name: 'John' };
let obj2 = obj1;
obj2.name = 'Jane';
console.log(obj1.name); // "Jane" (changed!)
Null vs Undefined
| Feature | undefined | null |
|---|---|---|
| Meaning | Unassigned | Intentional empty |
| Type | undefined | object (bug) |
| Default | Yes | No |
| Comparison | == null (true) | == null (true) |
Typeof Operator
Typeof Operator
Basic Usage
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" (bug)
console.log(typeof {}); // "object"
console.log(typeof []); // "object"
console.log(typeof function(){}); // "function"
console.log(typeof Symbol('')); // "symbol"
console.log(typeof 10n); // "bigint"
typeof with Variables
let x = 10;
console.log(typeof x); // "number"
x = 'Hello';
console.log(typeof x); // "string"
x = null;
console.log(typeof x); // "object" (known bug)
Checking for Undefined
let y;
// All ways to check for undefined
console.log(y === undefined); // true
console.log(typeof y === 'undefined'); // true
console.log(!y); // true (also true for null, 0, false, '')
Type Checking Function
function getType(value) {
if (value === null) return 'null';
if (Array.isArray(value)) return 'array';
return typeof value;
}
console.log(getType(null)); // "null"
console.log(getType([1,2,3])); // "array"
console.log(getType('hello')); // "string"
Common Gotchas
// typeof null is 'object' (historical bug)
console.log(typeof null); // "object"
// typeof array is 'object'
console.log(typeof []); // "object"
// Use Array.isArray() for arrays
console.log(Array.isArray([])); // true
Practice Problems
Create a reusable React component implementing Data Types. Include proper state management and accessibility.
Solution
// Production-ready component with:
// - Proper TypeScript types
// - Accessibility (ARIA)
// - Error boundaries
// - Loading states
// - Memoization where neededWrite unit and integration tests for Data Types using React Testing Library.
Solution
// Test coverage:
// 1. Rendering tests
// 2. Interaction tests
// 3. Edge case tests
// 4. Accessibility testsOptimize Data Types for performance. Consider memoization, code splitting, and bundle size.
Solution
// Optimization techniques:
// 1. React.memo / useMemo / useCallback
// 2. Code splitting with lazy()
// 3. Virtual scrolling for lists
// 4. Image lazy loading
// 5. Bundle analysisQuiz
1. What are the primitive data types in JavaScript?
2. What does typeof null return?
3. How do you correctly check for an array?
4. What is the difference between undefined and null?
5. What is the result of: typeof [1, 2, 3]?
Flashcards
Question
What are the 7 primitive types?
Click to reveal answer
Answer
String, Number, BigInt, Boolean, Undefined, Null, Symbol
Question
What is the difference between primitives and objects?
Click to reveal answer
Answer
Primitives are immutable and compared by value. Objects are mutable and compared by reference.
Question
What does typeof null return?
Click to reveal answer
Answer
"object" - this is a known historical bug in JavaScript.
Question
How do you check if something is an array?
Click to reveal answer
Answer
Use Array.isArray(value) - it's the most reliable method.
Question
What is the difference between == and ===?
Click to reveal answer
Answer
== compares values with type coercion. === compares values and types without coercion.
Revision Notes
Key Takeaways
- 1.JavaScript has 7 primitive types
- 2.Primitives are immutable, objects are mutable
- 3.typeof null returns 'object' (historical bug)
- 4.Use Array.isArray() to check for arrays
- 5.Objects are compared by reference, primitives by value
Interview Tips
- •List all primitive types
- •Explain the typeof null bug
- •Know the difference between primitives and objects
- •Understand reference vs value comparison
Cheat Sheet
Data Types Cheat Sheet
Primitives
'Hello' // string
42 // number
9007199254740991n // bigint
true // boolean
undefined // undefined
null // null
Symbol('') // symbol
Objects
{} // object
[] // array (object)
function(){} // function (object)
Type Checking
typeof 'Hello' // "string"
typeof null // "object" (bug)
Array.isArray([]) // true
Reference vs Value
// Primitives: copied by value
let a = 5; let b = a; b = 10; // a is still 5
// Objects: copied by reference
let x = {a: 1}; let y = x; y.a = 2; // x.a is now 2