The Complete Guide to Array Search Methods in JavaScript and jQuery

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Introduction

Purpose of This Article

• Understand the differences between major JavaScript methods used for array searching.
• Learn the specific usage of each method through code examples.
• Select appropriate methods depending on the scenario.

Target Audience

• Beginners who have just started using JavaScript.
• Intermediate users who want to deepen their understanding of array searching and data processing.
• Web developers looking for practical code examples.

Knowledge and Skills You Will Gain

• The basics and applications of JavaScript array search methods (indexOf(), includes(), find(), findIndex()).
• How to use jQuery’s inArray() method and its caveats.
• Performance comparisons and practical usage scenarios.

Next Article

2. Basic Array Search Methods in JavaScript

2-1. The indexOf() Method

array.indexOf(value, fromIndex)

• value: The value to search for.
• fromIndex: Optional. Start position of the search (default is 0).

const fruits = ['apple', 'banana', 'orange'];

console.log(fruits.indexOf('banana')); // Output: 1
console.log(fruits.indexOf('grape'));  // Output: -1

• indexOf() compares values using strict equality (===). Values of different types do not match.
• Not suitable for comparing objects or arrays themselves.

2-2. The includes() Method

array.includes(value, fromIndex)

const colors = ['red', 'green', 'blue'];

console.log(colors.includes('green'));  // Output: true
console.log(colors.includes('yellow')); // Output: false

• includes() was introduced in ES6 (2015), so older browsers may not support it.

2-3. The find() Method

const numbers = [10, 20, 30, 40];

const result = numbers.find(num => num > 25);
console.log(result); // Output: 30

2-4. The findIndex() Method

const numbers = [10, 20, 30, 40];

const index = numbers.findIndex(num => num > 25);
console.log(index); // Output: 2

Summary

• For simple value searches, use indexOf() or includes().
• For conditional searches, find() or findIndex() is useful.

3. What Is jQuery’s inArray() Method?

3-1. Why Use jQuery?

• Legacy system maintenance
• Simplified code writing
• Compatibility with older browsers

3-2. How to Use inArray()

$.inArray(value, array, [fromIndex])

const fruits = ['apple', 'banana', 'orange'];

console.log($.inArray('banana', fruits)); // Output: 1
console.log($.inArray('grape', fruits));  // Output: -1

3-3. Comparison: inArray() vs Native Methods

• Use inArray() for consistency in jQuery projects.
• Use native methods for modern projects.

3-4. Notes

Summary

• Convenient for legacy or jQuery-based systems.
• Native methods are recommended for new development.

4. Comparison Guide for Choosing Array Search Methods

4-1. Characteristics and Comparison of Each Method

4-2. Recommended Methods by Usage Scenario

• Recommended methods:
• indexOf() → When the index number is needed.
• includes() → When a simple existence check is enough.

const colors = ['red', 'green', 'blue'];

console.log(colors.indexOf('green')); // Output: 1
console.log(colors.includes('green')); // Output: true

• Recommended methods:
• find() → Retrieves the first matching element.
• findIndex() → Retrieves the index of the first matching element.

const numbers = [10, 20, 30, 40];

console.log(numbers.find(num => num > 25)); // Output: 30
console.log(numbers.findIndex(num => num > 25)); // Output: 2

• Recommended method:
• inArray() → Useful when jQuery is required.

const fruits = ['apple', 'banana', 'orange'];

console.log($.inArray('banana', fruits)); // Output: 1

4-3. Performance Comparison

• indexOf() and includes() are fast.

• find() and findIndex() allow flexible conditions but are slightly slower.

• inArray() is simple but slower due to library overhead.

Summary

• Use indexOf() or includes() for simple searches.
• Use find() or findIndex() for conditional searches.
• Use inArray() for legacy jQuery environments.

5. Practical Examples and Applied Scenarios

5-1. Form Input Validation

const validColors = ['red', 'green', 'blue'];
const userInput = 'green';

if (validColors.includes(userInput)) {
  console.log('Valid color.');
} else {
  console.log('Invalid color.');
}

5-2. Searching and Extracting User Data

const users = [
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 30 },
  { id: 3, name: 'Charlie', age: 35 },
];

const result = users.find(user => user.age >= 30);
console.log(result); // Output: { id: 2, name: 'Bob', age: 30 }

const index = users.findIndex(user => user.age >= 30);
console.log(index); // Output: 1

5-3. Error Handling Example

const products = ['apple', 'banana', 'orange'];

const index = products.indexOf('grape');

if (index === -1) {
  console.log('Product not found.');
} else {
  console.log(`Product found at index ${index}.`);
}

5-4. Filtering Array Data

const scores = [45, 72, 88, 53, 94];

const highScores = scores.filter(score => score >= 70);
console.log(highScores); // Output: [72, 88, 94]

5-5. jQuery Search Example

const fruits = ['apple', 'banana', 'orange'];

if ($.inArray('banana', fruits) !== -1) {
  console.log('Banana exists in the list.');
} else {
  console.log('Banana is not in the list.');
}

Summary

• includes() is simple and useful for input validation.
• find() and findIndex() are powerful for conditional and object-based searches.
• indexOf() is versatile for error handling.
• filter() is efficient for extracting multiple matching items.
• inArray() helps in legacy jQuery environments.

6. Frequently Asked Questions (FAQ)

Question 1: What is the difference between indexOf() and includes()?

• indexOf(): Returns the index of the specified value. Returns -1 if the value is not found.
• includes(): Returns a boolean (true or false) indicating whether the value exists in the array.

const fruits = ['apple', 'banana', 'orange'];

console.log(fruits.indexOf('banana'));   // Output: 1
console.log(fruits.includes('banana'));  // Output: true

Question 2: How do find() and filter() differ?

• find(): Returns the first element that matches the condition.
• filter(): Returns all matching elements as a new array.

const numbers = [10, 20, 30, 40, 50];

console.log(numbers.find(num => num > 25));   // Output: 30
console.log(numbers.filter(num => num > 25)); // Output: [30, 40, 50]

Question 3: How do I search for a specific key-value pair inside an array of objects?

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' },
];

const user = users.find(user => user.name === 'Bob');
console.log(user); // Output: { id: 2, name: 'Bob' }

Question 4: Should I still use jQuery’s inArray()?

• For new projects: Use native methods like indexOf() or includes().
• For existing jQuery systems: Use inArray() to maintain consistency.

Question 5: How can I optimize array searching for performance?

• indexOf() and includes() are the fastest for simple searches.

• Cache search results to avoid repeated computation.

• For large datasets, use objects, Map, or Set for efficient lookups.

const dataSet = new Set([10, 20, 30, 40]);
console.log(dataSet.has(20)); // Output: true

Summary

• Understand differences between each method and choose appropriately.
• find() is useful for conditional searches in object arrays.
• Native methods are preferred in modern development; jQuery is mainly for legacy systems.
• Optimize performance by choosing the right data structure.

7. Summary and Next Steps

7-1. Summary of Key Points

• indexOf(): Searches for the index of an element.
• includes(): Returns a boolean indicating whether a value is present.
• find() / findIndex(): Searches for the first element or index that matches a condition.

• Useful in legacy or jQuery-based systems.
• Native JavaScript methods are recommended in modern development.

• Input validation, user data extraction, error handling, and filtering can all be simplified using these methods.

• Clarified differences, use cases, and performance considerations.

7-2. How to Choose the Right Method

7-3. Next Steps

• Create a simple web app and apply the methods learned here. Example: TODO list, product inventory management, filtering tools.

• ES6+ features: Spread syntax, destructuring, arrow functions.
• Asynchronous programming: Learn Promise, async/await for handling data fetching.

• Frameworks like React or Vue.js use array operations frequently for UI rendering.

• MDN Web Docs: JavaScript Arrays
• W3Schools: JavaScript Array Methods
• JSFiddle / CodePen: Useful for testing and sharing code snippets.

7-4. Final Thoughts

1. Practice what you learned by writing and testing code frequently.
2. Continue exploring new JavaScript features and techniques.
3. Choose the most appropriate method based on your specific needs.

Conclusion