JavaScript Array Methods Cheat Sheet

JavaScript arrays come with powerful built-in methods that make data manipulation elegant and efficient. This guide covers the most essential array methods with interactive examples.

The Sample Data

Let’s work with this sample dataset throughout our examples:

const users = [
  { id: 1, name: 'Alice', age: 25, active: true, salary: 50000 },
  { id: 2, name: 'Bob', age: 30, active: false, salary: 60000 },
  { id: 3, name: 'Charlie', age: 35, active: true, salary: 70000 },
  { id: 4, name: 'Diana', age: 28, active: true, salary: 55000 },
  { id: 5, name: 'Eve', age: 32, active: false, salary: 65000 }
];

Interactive Demo

<div class="array-methods-demo">
  <h3>Array Methods Interactive Demo</h3>
  
  <div class="controls">
    <button onclick="demonstrateMap()">Map Example</button>
    <button onclick="demonstrateFilter()">Filter Example</button>
    <button onclick="demonstrateReduce()">Reduce Example</button>
    <button onclick="demonstrateFind()">Find Example</button>
    <button onclick="demonstrateSome()">Some/Every Example</button>
  </div>
  
  <div class="results">
    <h4>Original Data:</h4>
    <pre id="original-data"></pre>
    
    <h4>Result:</h4>
    <pre id="result"></pre>
    
    <h4>Code Used:</h4>
    <pre id="code-used"></pre>
  </div>
</div>

.array-methods-demo {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.array-methods-demo h3 {
  color: #2c3e50;
  text-align: center;
  margin-bottom: 20px;
}

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 30px;
}

.controls button {
  background: #3498db;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.3s ease;
}

.controls button:hover {
  background: #2980b9;
}

.results {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.results h4 {
  color: #34495e;
  margin-top: 20px;
  margin-bottom: 10px;
}

.results h4:first-child {
  margin-top: 0;
}

pre {
  background: #2c3e50;
  color: #ecf0f1;
  padding: 15px;
  border-radius: 5px;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.4;
}

#result {
  background: #27ae60;
}

#code-used {
  background: #8e44ad;
}

// Sample data
const users = [
  { id: 1, name: 'Alice', age: 25, active: true, salary: 50000 },
  { id: 2, name: 'Bob', age: 30, active: false, salary: 60000 },
  { id: 3, name: 'Charlie', age: 35, active: true, salary: 70000 },
  { id: 4, name: 'Diana', age: 28, active: true, salary: 55000 },
  { id: 5, name: 'Eve', age: 32, active: false, salary: 65000 }
];

// Display original data on load
document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('original-data').textContent = JSON.stringify(users, null, 2);
});

// Helper function to display results
function displayResult(result, code) {
  document.getElementById('result').textContent = JSON.stringify(result, null, 2);
  document.getElementById('code-used').textContent = code;
}

// Map example - transform data
function demonstrateMap() {
  const result = users.map(user => ({
    name: user.name,
    ageGroup: user.age < 30 ? 'Young' : 'Experienced'
  }));
  
  const code = `users.map(user => ({
  name: user.name,
  ageGroup: user.age < 30 ? 'Young' : 'Experienced'
}))`;
  
  displayResult(result, code);
}

// Filter example - select specific items
function demonstrateFilter() {
  const result = users.filter(user => user.active && user.age > 25);
  
  const code = `users.filter(user => user.active && user.age > 25)`;
  
  displayResult(result, code);
}

// Reduce example - aggregate data
function demonstrateReduce() {
  const result = {
    totalSalary: users.reduce((sum, user) => sum + user.salary, 0),
    averageAge: users.reduce((sum, user) => sum + user.age, 0) / users.length,
    activeCount: users.reduce((count, user) => user.active ? count + 1 : count, 0)
  };
  
  const code = `{
  totalSalary: users.reduce((sum, user) => sum + user.salary, 0),
  averageAge: users.reduce((sum, user) => sum + user.age, 0) / users.length,
  activeCount: users.reduce((count, user) => user.active ? count + 1 : count, 0)
}`;
  
  displayResult(result, code);
}

// Find example - locate specific item
function demonstrateFind() {
  const result = {
    foundUser: users.find(user => user.name === 'Charlie'),
    foundIndex: users.findIndex(user => user.salary > 65000),
    includes: users.some(user => user.name === 'Alice')
  };
  
  const code = `{
  foundUser: users.find(user => user.name === 'Charlie'),
  foundIndex: users.findIndex(user => user.salary > 65000),
  includes: users.some(user => user.name === 'Alice')
}`;
  
  displayResult(result, code);
}

// Some/Every example - boolean checks
function demonstrateSome() {
  const result = {
    someActive: users.some(user => user.active),
    allAdults: users.every(user => user.age >= 18),
    someHighEarners: users.some(user => user.salary > 65000),
    allHighEarners: users.every(user => user.salary > 65000)
  };
  
  const code = `{
  someActive: users.some(user => user.active),
  allAdults: users.every(user => user.age >= 18),
  someHighEarners: users.some(user => user.salary > 65000),
  allHighEarners: users.every(user => user.salary > 65000)
}`;
  
  displayResult(result, code);
}

Essential Array Methods

1. map() - Transform Elements

Creates a new array by transforming each element:

// Extract names
const names = users.map(user => user.name);
// ['Alice', 'Bob', 'Charlie', 'Diana', 'Eve']

// Calculate annual salary
const annualSalaries = users.map(user => ({
  name: user.name,
  annual: user.salary * 12
}));

2. filter() - Select Elements

Creates a new array with elements that pass a test:

// Active users only
const activeUsers = users.filter(user => user.active);

// Users over 30
const experiencedUsers = users.filter(user => user.age > 30);

// High earners
const highEarners = users.filter(user => user.salary >= 60000);

3. reduce() - Aggregate Data

Reduces array to a single value:

// Total salary
const totalSalary = users.reduce((sum, user) => sum + user.salary, 0);

// Group by active status
const groupedUsers = users.reduce((groups, user) => {
  const key = user.active ? 'active' : 'inactive';
  groups[key] = groups[key] || [];
  groups[key].push(user);
  return groups;
}, {});

4. find() and findIndex()

Locate specific elements:

// Find user by name
const alice = users.find(user => user.name === 'Alice');

// Find index of first inactive user
const inactiveIndex = users.findIndex(user => !user.active);

5. some() and every()

Boolean tests on arrays:

// Check if any user is active
const hasActiveUsers = users.some(user => user.active);

// Check if all users are adults
const allAdults = users.every(user => user.age >= 18);

Method Chaining

Combine methods for powerful data processing:

const result = users
  .filter(user => user.active)           // Get active users
  .map(user => ({ ...user, bonus: user.salary * 0.1 })) // Add bonus
  .sort((a, b) => b.salary - a.salary)   // Sort by salary desc
  .slice(0, 3);                          // Take top 3

Performance Tips

1. Use appropriate methods: find() stops at first match, filter() checks all
2. Chain efficiently: Filter before map to reduce iterations
3. Consider for loops: For simple operations on large arrays
4. Avoid nested array methods: Can impact performance significantly

Browser Support

Most array methods are well-supported:

• map(), filter(), reduce(): ES5 (IE9+)
• find(), findIndex(): ES6 (IE12+)
• includes(): ES7 (IE14+)

Conclusion

Mastering these array methods will make your JavaScript code more readable, maintainable, and functional. Practice chaining them together for powerful data transformations!