JavaScript Data Types
Introduction
Data types are a fundamental concept in any programming language. They define the kind of values that can be stored and manipulated within a program. Understanding JavaScript's data types is essential for writing efficient and bug-free code.
JavaScript is a dynamically typed language, which means you don't need to explicitly declare the type of a variable before using it. The type is determined automatically when the program runs. This flexibility is both a strength and a potential source of confusion for beginners.
JavaScript Data Types Overview
JavaScript has two main categories of data types:
- Primitive Data Types - simple, immutable data values
- Reference Data Types - more complex data structures
Let's explore each of these in detail.
Primitive Data Types
JavaScript has 7 primitive data types:
1. Number
The Number type represents both integer and floating-point numbers.
// Integers
let age = 25;
let negativeNumber = -42;
// Floating-point numbers
let price = 19.99;
let pi = 3.14159;
// Special numeric values
let infinity = Infinity;
let negativeInfinity = -Infinity;
let notANumber = NaN; // Result of invalid calculations
console.log(age); // Output: 25
console.log(price); // Output: 19.99
console.log(1 / 0); // Output: Infinity
console.log('Hello' / 2); // Output: NaN
JavaScript numbers are stored in 64-bit format (IEEE-754 standard), which can sometimes lead to precision issues with decimal calculations:
console.log(0.1 + 0.2); // Output: 0.30000000000000004
console.log(0.1 + 0.2 === 0.3); // Output: false
2. String
Strings are sequences of characters used to represent text. They can be enclosed in single quotes ('), double quotes (") or backticks (`).
let firstName = 'John';
let lastName = "Doe";
let greeting = `Hello, ${firstName}!`; // Template literal
console.log(firstName); // Output: John
console.log(greeting); // Output: Hello, John!
// Strings have properties and methods
console.log(firstName.length); // Output: 4
console.log(firstName.toUpperCase()); // Output: JOHN
3. Boolean
The Boolean type has only two values: true and false. Booleans are commonly used for conditional logic.
let isLoggedIn = true;
let hasPermission = false;
console.log(isLoggedIn); // Output: true
// Comparison operations return boolean values
console.log(5 > 3); // Output: true
console.log(10 === '10'); // Output: false
4. Undefined
undefined represents a variable that has been declared but not assigned a value.
let username;
console.log(username); // Output: undefined
function test() {
// No explicit return statement
}
console.log(test()); // Output: undefined
5. Null
null is a special value that represents the intentional absence of any object value.
let user = null; // User doesn't exist yet
console.log(user); // Output: null
// Note: typeof null returns "object" which is a known JavaScript bug
console.log(typeof null); // Output: object
6. Symbol (ES6)
Symbol is a relatively new primitive type introduced in ES6. Symbols create unique identifiers.
const id1 = Symbol('id');
const id2 = Symbol('id');
console.log(id1 === id2); // Output: false
console.log(id1); // Output: Symbol(id)
// Common use case: unique property keys
const HIDDEN_PROPERTY = Symbol('hidden');
const obj = {
visible: 'This can be enumerated',
[HIDDEN_PROPERTY]: 'This is harder to access'
};
console.log(obj.visible); // Output: This can be enumerated
console.log(obj[HIDDEN_PROPERTY]); // Output: This is harder to access
7. BigInt (ES2020)
BigInt was added to handle integers larger than the Number type can safely handle.
const hugeNumber = 9007199254740991n; // The 'n' at the end makes it a BigInt
const anotherHugeNumber = BigInt('9007199254740991');
console.log(hugeNumber); // Output: 9007199254740991n
console.log(hugeNumber + 1n); // Output: 9007199254740992n
// Cannot mix BigInt and other types
// console.log(hugeNumber + 1); // TypeError: Cannot mix BigInt and other types
Reference Data Types
Reference data types are more complex and can store collections of data and more complex entities.
1. Object
Objects are collections of key-value pairs and are the foundation for many other JavaScript types.
let person = {
firstName: 'John',
lastName: 'Doe',
age: 30,
greet: function() {
return `Hello, my name is ${this.firstName}!`;
}
};
console.log(person.firstName); // Output: John
console.log(person['lastName']); // Output: Doe
console.log(person.greet()); // Output: Hello, my name is John!
// Objects can be nested
let company = {
name: 'Tech Corp',
employees: [
{ name: 'Alice', position: 'Developer' },
{ name: 'Bob', position: 'Designer' }
],
address: {
street: '123 Main St',
city: 'Tech City'
}
};
console.log(company.employees[0].name); // Output: Alice
console.log(company.address.city); // Output: Tech City
2. Array
Arrays are special types of objects used to store ordered collections of data.
let colors = ['red', 'green', 'blue'];
let mixed = [1, 'hello', true, { name: 'John' }];
console.log(colors.length); // Output: 3
console.log(colors[0]); // Output: red
// Arrays have many useful methods
colors.push('yellow'); // Add to the end
console.log(colors); // Output: ["red", "green", "blue", "yellow"]
colors.pop(); // Remove from the end
console.log(colors); // Output: ["red", "green", "blue"]
let sliced = colors.slice(1, 2);
console.log(sliced); // Output: ["green"]
let filtered = [1, 2, 3, 4, 5].filter(num => num > 2);
console.log(filtered); // Output: [3, 4, 5]
3. Function
Functions are objects that can be called to perform actions.
// Function declaration
function add(a, b) {
return a + b;
}
// Function expression
const multiply = function(a, b) {
return a * b;
};
// Arrow function (ES6)
const divide = (a, b) => a / b;
console.log(add(5, 3)); // Output: 8
console.log(multiply(5, 3)); // Output: 15
console.log(divide(6, 2)); // Output: 3
// Functions are objects
console.log(typeof add); // Output: function
console.log(add instanceof Object); // Output: true
4. Date
The Date object is used to work with dates and times.
const now = new Date();
console.log(now); // Output: Current date and time
const specificDate = new Date('2023-01-15T12:00:00Z');
console.log(specificDate); // Output: Sun Jan 15 2023 12:00:00 GMT+0000
console.log(specificDate.getFullYear()); // Output: 2023
console.log(specificDate.getMonth()); // Output: 0 (January)
console.log(specificDate.getDate()); // Output: 15
5. RegExp
RegExp objects are used for pattern matching in strings.
const emailPattern = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
console.log(emailPattern.test('[email protected]')); // Output: true
console.log(emailPattern.test('invalid-email')); // Output: false
const text = 'The quick brown fox jumps over the lazy dog.';
const wordPattern = /\b\w{5}\b/g; // Find all 5-letter words
console.log(text.match(wordPattern)); // Output: ["quick", "brown", "jumps"]
Type Checking
JavaScript provides several ways to check the type of a variable:
Using typeof Operator
The typeof operator returns a string indicating the type of the operand.
console.log(typeof 42); // Output: number
console.log(typeof 'hello'); // Output: string
console.log(typeof true); // Output: boolean
console.log(typeof undefined); // Output: undefined
console.log(typeof null); // Output: object (a known bug in JavaScript)
console.log(typeof {}); // Output: object
console.log(typeof []); // Output: object
console.log(typeof function() {}); // Output: function
Using instanceof Operator
The instanceof operator tests if an object is an instance of a specific constructor.
const arr = [1, 2, 3];
const obj = { a: 1 };
const func = function() {};
console.log(arr instanceof Array); // Output: true
console.log(obj instanceof Object); // Output: true
console.log(func instanceof Function); // Output: true
Type Conversion
JavaScript often automatically converts between types, which is known as type coercion. However, you can explicitly convert types as well:
String Conversion
// To string
let value = 42;
let strValue = String(value); // Explicit conversion
strValue = value + ''; // Implicit conversion
console.log(strValue); // Output: "42"
console.log(typeof strValue); // Output: string
console.log(String(true)); // Output: "true"
console.log(String(null)); // Output: "null"
console.log(String(undefined)); // Output: "undefined"
Numeric Conversion
// To number
let str = '123';
let num = Number(str); // Explicit conversion
num = +str; // Shorter way to convert to number
console.log(num); // Output: 123
console.log(typeof num); // Output: number
console.log(Number('42px')); // Output: NaN
console.log(Number(true)); // Output: 1
console.log(Number(false)); // Output: 0
console.log(Number(null)); // Output: 0
console.log(Number(undefined)); // Output: NaN
Boolean Conversion
// To boolean
let val = 1;
let boolVal = Boolean(val); // Explicit conversion
boolVal = !!val; // Shorter way to convert to boolean
console.log(boolVal); // Output: true
console.log(typeof boolVal); // Output: boolean
// Falsy values in JavaScript
console.log(Boolean(0)); // Output: false
console.log(Boolean('')); // Output: false
console.log(Boolean(null)); // Output: false
console.log(Boolean(undefined)); // Output: false
console.log(Boolean(NaN)); // Output: false
// All other values are truthy
console.log(Boolean('hello')); // Output: true
console.log(Boolean(42)); // Output: true
console.log(Boolean({ name: 'John' })); // Output: true
console.log(Boolean([])); // Output: true
Real-World Applications
Understanding data types is crucial for many common programming tasks. Here are some examples:
Form Validation
function validateForm(userInput) {
// Check if input is empty (string)
if (userInput.trim() === '') {
return 'Input cannot be empty';
}
// Convert string to number and check if it's valid
const age = Number(userInput);
if (isNaN(age)) {
return 'Please enter a valid number';
}
// Check if age is within a valid range (number comparison)
if (age < 18 || age > 120) {
return 'Age must be between 18 and 120';
}
// All validations passed
return true;
}
console.log(validateForm('')); // Output: Input cannot be empty
console.log(validateForm('abc')); // Output: Please enter a valid number
console.log(validateForm('15')); // Output: Age must be between 18 and 120
console.log(validateForm('30')); // Output: true
Data Processing
function processUserData(userData) {
// Ensure userData is an array
if (!Array.isArray(userData)) {
throw new TypeError('Expected an array of user objects');
}
// Process and transform data
const processedData = userData.map(user => {
// Ensure name is a string
const name = typeof user.name === 'string' ? user.name : 'Unknown';
// Convert age to number if it's not already
const age = typeof user.age === 'number' ? user.age : Number(user.age) || 0;
// Add a category based on age
let category;
if (age < 18) category = 'minor';
else if (age < 65) category = 'adult';
else category = 'senior';
// Return new user object
return {
name,
age,
category,
isActive: Boolean(user.isActive) // Convert to boolean
};
});
return processedData;
}
const users = [
{ name: 'Alice', age: '24', isActive: 1 },
{ name: 'Bob', age: 17, isActive: 0 },
{ name: 'Carol', age: '70', isActive: true }
];
console.log(processUserData(users));
/* Output:
[
{ name: 'Alice', age: 24, category: 'adult', isActive: true },
{ name: 'Bob', age: 17, category: 'minor', isActive: false },
{ name: 'Carol', age: 70, category: 'senior', isActive: true }
]
*/
API Data Handling
function handleAPIResponse(response) {
// Check for null or undefined
if (response === null || response === undefined) {
return { error: 'No data received' };
}
// If we received a string (could be JSON)
if (typeof response === 'string') {
try {
// Try to parse as JSON
return JSON.parse(response);
} catch (e) {
return { error: 'Invalid JSON format', data: response };
}
}
// If we already have an object
if (typeof response === 'object') {
// Check for array or object
if (Array.isArray(response)) {
return { type: 'collection', count: response.length, data: response };
} else {
return { type: 'single', data: response };
}
}
// Handle unexpected data type
return { error: `Unexpected data type: ${typeof response}`, data: response };
}
// Example usage:
console.log(handleAPIResponse(null)); // Output: { error: 'No data received' }
console.log(handleAPIResponse('{"name":"John","age":30}')); // Output: { name: 'John', age: 30 }
console.log(handleAPIResponse([1, 2, 3])); // Output: { type: 'collection', count: 3, data: [1, 2, 3] }
Summary
JavaScript has two main categories of data types:
- Primitive data types: Number, String, Boolean, Undefined, Null, Symbol, and BigInt
- Reference data types: Object, Array, Function, Date, RegExp, and more
Understanding these types is crucial for:
- Writing code that behaves as expected
- Proper data validation and manipulation
- Debugging type-related issues
- Optimizing performance
JavaScript is dynamically typed, which offers flexibility but requires careful attention to type conversion and comparison operations. The language provides methods to check types (typeof, instanceof) and convert between them (explicit conversion functions like String(), Number(), and Boolean()).
Further Exercises
-
Type Identification: Create a function that takes any value and returns its exact type (distinguishing between arrays, objects, null, etc.)
-
Type Conversion Challenge: Write a function that safely converts values between types according to a specified rule, handling edge cases gracefully.
-
Data Validation: Create a form validation library that validates different input types (email, phone, date, etc.) using appropriate type checking.
-
JSON Parsing: Build a function that safely parses JSON data and validates that certain properties exist and are of the expected types.
Additional Resources
- MDN Web Docs: JavaScript Data Types
- JavaScript Type Coercion Explained
- JavaScript Type Checking Best Practices (Consider TypeScript for larger projects)
- Common Problems with JavaScript Types (Especially with numbers)
If you spot any mistakes on this website, please let me know at [email protected]. I’d greatly appreciate your feedback! :)