JavaScript Tutorial
JavaScript is dynamically typed: variable types can change at runtime. This enables flexibility but requires careful validation. Dynamic typing means variables don't have fixed types - they can hold any value at any time, and their type is determined by the value they contain.
Why this matters
Understanding dynamic typing helps you choose validation, testing, and API contracts to avoid runtime errors. It's fundamental to writing robust JavaScript code and deciding when to use TypeScript or other type checking solutions.
Dynamic typing means variable types are determined at runtime, not compile time. Variables can hold different types of values during execution.
No type declarations are required - you can assign any value to any variable. The type is associated with the value, not the variable.
Type checking happens during execution, which can lead to runtime errors if types don't match expectations.
Contrast with static typing (TypeScript) where types are checked before execution.
Rapid prototyping: Write code quickly without type declarations or interfaces.
Flexible APIs: Functions can accept various types, making them more versatile.
Concise code: Less boilerplate compared to statically typed languages.
Easy refactoring: Change data structures without updating type annotations.
Duck typing: Objects are compatible based on their properties/methods, not their type.
Runtime adaptability: Code can handle unexpected data formats gracefully.
Runtime errors: Type mismatches discovered only when code executes.
Harder debugging: Type-related bugs may not be caught by static analysis.
Poor IDE support: Less autocomplete and refactoring assistance.
API fragility: Functions may break silently when input types change.
Maintenance burden: Large codebases become harder to understand and modify.
Performance overhead: Some optimizations require static type information.
Type coercion: JavaScript automatically converts types in operations (+, ==, etc.).
Duck typing: Check for properties/methods rather than types (if it walks like a duck...).
Type guards: Runtime checks to narrow types within conditional blocks.
Default parameters: Provide fallbacks for undefined or incorrect types.
Polymorphic functions: Functions that work with multiple types.
Type assertions: Explicitly telling the system about a value's type.
Explicit type checks: Use typeof, instanceof, Array.isArray() for validation.
Property existence: Check if required properties exist on objects.
Value validation: Verify values match expected formats or ranges.
Schema validation: Use libraries like Joi or Yup for complex validation.
Contract testing: Define and test API contracts between modules.
Runtime assertions: Throw errors when types don't match expectations.
Input validation: Check function parameters before processing.
Graceful degradation: Handle unexpected types without crashing.
Default values: Provide sensible defaults for missing or invalid data.
Error boundaries: Catch and handle type-related errors appropriately.
Logging and monitoring: Track type mismatches in production.
Unit testing: Test with various input types to ensure robustness.
Large codebases: Static types help maintainability and catch errors early.
Team development: Type annotations serve as documentation and contracts.
Complex data structures: Interfaces help define and validate object shapes.
Performance-critical code: Static types enable better optimizations.
API development: Types ensure consistent interfaces for consumers.
Long-term maintenance: Static types reduce regression bugs.
Gradual adoption: Add TypeScript to existing JavaScript projects incrementally.
Type assertions: Use 'as' keyword to tell TypeScript about dynamic types.
Any types: Start with permissive types and gradually add specificity.
Interface extraction: Define types based on runtime usage patterns.
Type guards: Create functions that narrow types at runtime.
Generic constraints: Use TypeScript generics for flexible yet type-safe code.
Validate inputs: Always check function parameters and external data.
Use strict equality: Prefer === over == to avoid type coercion surprises.
Document expectations: Comment functions with expected parameter types.
Test thoroughly: Cover edge cases and unexpected input types.
Consider TypeScript: For larger projects, static typing pays dividends.
Use linters: Tools like ESLint can catch some type-related issues.
Monitor errors: Track runtime type errors in production environments.
Keep functions small: Smaller functions are easier to type and test.
let value = 42;
console.log(typeof value); // 'number'
value = 'Hello World';
console.log(typeof value); // 'string'
value = { name: 'JavaScript' };
console.log(typeof value); // 'object'
value = () => console.log('Function!');
console.log(typeof value); // 'function'A single variable can hold different types throughout its lifetime.
function processUser(user) {
// Duck typing: if it has name and email, treat it as a user
if (user && typeof user.name === 'string' && typeof user.email === 'string') {
return `Hello ${user.name}, your email is ${user.email}`;
}
throw new Error('Invalid user object');
}
// Works with plain objects
console.log(processUser({ name: 'John', email: 'john@example.com' }));
// Also works with classes
class User {
constructor(name, email) {
this.name = name;
this.email = email;
}
}
console.log(processUser(new User('Jane', 'jane@example.com')));Duck typing focuses on capabilities rather than inheritance.
function isStringArray(value) {
return Array.isArray(value) && value.every(item => typeof item === 'string');
}
function processStringArray(arr) {
if (isStringArray(arr)) {
// TypeScript would know arr is string[] here
return arr.map(str => str.toUpperCase());
}
throw new Error('Expected array of strings');
}
console.log(processStringArray(['a', 'b', 'c'])); // ['A', 'B', 'C']
// processStringArray([1, 2, 3]); // ErrorType guards narrow types within conditional blocks.
function calculateTotal(items, taxRate = 0.08) {
// Validate inputs
if (!Array.isArray(items)) {
throw new Error('items must be an array');
}
if (typeof taxRate !== 'number' || taxRate < 0 || taxRate > 1) {
throw new Error('taxRate must be a number between 0 and 1');
}
return items
.filter(item => typeof item.price === 'number' && item.price > 0)
.reduce((total, item) => total + item.price, 0) * (1 + taxRate);
}
const items = [
{ name: 'Widget', price: 10 },
{ name: 'Gadget', price: 20 },
{ name: 'Invalid', price: 'not a number' }
];
console.log(calculateTotal(items)); // 30.6 (with 8% tax)Validate inputs and provide defaults to handle dynamic types safely.
function formatValue(value) {
switch (typeof value) {
case 'string':
return `"${value}"`;
case 'number':
return value.toFixed(2);
case 'boolean':
return value ? 'true' : 'false';
case 'object':
if (value === null) return 'null';
if (Array.isArray(value)) return `[${value.length} items]`;
return `{${Object.keys(value).length} properties}`;
default:
return String(value);
}
}
console.log(formatValue('hello')); // "hello"
console.log(formatValue(42)); // "42.00"
console.log(formatValue([1, 2, 3])); // "[3 items]"
console.log(formatValue({ a: 1, b: 2 })); // "{2 properties}"Functions can handle multiple types by checking types at runtime.
function assertIsUser(obj) {
if (typeof obj !== 'object' || obj === null) {
throw new Error('Expected object');
}
if (typeof obj.id !== 'number') {
throw new Error('id must be a number');
}
if (typeof obj.name !== 'string') {
throw new Error('name must be a string');
}
if (typeof obj.email !== 'string') {
throw new Error('email must be a string');
}
return obj; // TypeScript would know this is User
}
const user = assertIsUser({
id: 1,
name: 'John Doe',
email: 'john@example.com'
});
console.log(`User: ${user.name}`);Runtime assertions ensure objects match expected structure.
function validateUser(user) {
const schema = {
id: 'number',
name: 'string',
email: 'string',
age: 'number?'
};
for (const [key, typeSpec] of Object.entries(schema)) {
const required = !typeSpec.endsWith('?');
const expectedType = typeSpec.replace('?', '');
if (required && !(key in user)) {
throw new Error(`Missing required field: ${key}`);
}
if (key in user) {
const actualType = typeof user[key];
if (actualType !== expectedType) {
throw new Error(`Field ${key} must be ${expectedType}, got ${actualType}`);
}
}
}
return true;
}
const validUser = { id: 1, name: 'John', email: 'john@test.com', age: 30 };
console.log(validateUser(validUser)); // trueSchema validation ensures data conforms to expected structure.
class ApiClient {
async getUser(id) {
if (typeof id !== 'number' || id <= 0) {
throw new Error('ID must be a positive number');
}
const response = await fetch(`/api/users/${id}`);
const data = await response.json();
// Validate response structure
if (typeof data !== 'object' || data === null) {
throw new Error('Invalid response format');
}
if (typeof data.id !== 'number' || typeof data.name !== 'string') {
throw new Error('Invalid user data structure');
}
return data;
}
}
const api = new ApiClient();
// api.getUser('123'); // Error: ID must be number
// api.getUser(-1); // Error: ID must be positiveAPI clients should validate both inputs and responses.
Always validate inputs before using them in operations.
Use strict equality to avoid unexpected type coercion.
Check for null and undefined explicitly in dynamic code.
Break down functions and validate inputs at each step.
Validate external data before processing.
Wrap dynamic operations in try-catch blocks.
Not necessarily — it's powerful for flexibility, but add validation for reliability.
For large projects, teams, or when you need compile-time guarantees.
Validate responses and use schema validation libraries.
Slightly, due to runtime checks, but usually not performance-critical.
Use TypeScript, which compiles to JavaScript with type checking.
Test with various input types and edge cases thoroughly.
Checking capabilities rather than types — 'if it quacks like a duck...'.
Gradually add TypeScript, starting with type assertions.