JavaScript Array Methods Cheat Sheet

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;
}

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 }
];

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

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

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);
}

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);
}

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);
}

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);
}

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:

const names = users.map(user => user.name);


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:

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

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

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

3. reduce() - Aggregate Data

Reduces array to a single value:

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

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:

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

const inactiveIndex = users.findIndex(user => !user.active);

5. some() and every()

Boolean tests on arrays:

const hasActiveUsers = users.some(user => user.active);

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!