JavaScriptの配列メソッド - パート2

JavaScript Array Search Methods What are Array Search Methods? Array Search Methods are used to: Find the position (index) of an element. Check whether an element exists. Retrieve an element that satisfies a condition. Find the index of an element that matches a condition. Search from the beginning or the end of an array. Common Array Search Methods Method Purpose Returns indexOf() Finds the first occurrence of a value Index or -1 lastIndexOf() Finds the last occurrence of a value Index or -1 includes() Checks whether a value exists true / false find() Finds the first matching element Element or undefined findIndex() Finds the index of the first matching element Index or -1 findLast() (ES2023) Finds the last matching element Element or undefined findLastIndex() (ES2023) Finds the last matching index Index or -1 1. Array.indexOf() Definition The indexOf() method searches an array for a specified value and returns the index of its first occurrence . If the value is not found, it returns -1 . Syntax array . indexOf ( searchElement ) array . indexOf ( searchElement , startIndex ) Parameters Parameter Description searchElement Value to search for startIndex (optional) Index where the search starts Returns Index of the first matching element. -1 if not found. Internal Working Suppose: let fruits = [ " Apple " , " Orange " , " Mango " , " Orange " ]; Memory: Index 0 → Apple 1 → Orange 2 → Mango 3 → Orange When: fruits . indexOf ( " Orange " ); JavaScript starts from index 0 : Apple ❌ Orange ✅ Found Stops immediately and returns: 1 Example let fruits = [ " Apple " , " Orange " , " Banana " ]; console . log ( fruits . indexOf ( " Orange " )); Output 1 Example - Not Found let fruits = [ " Apple " , " Orange " ]; console . log ( fruits . indexOf ( " Mango " )); Output -1 Example - Start Position let fruits = [ " Apple " , " Orange " , " Banana " , " Orange " ]; console . log ( fruits . indexOf ( " Orange " , 2 )); Output 3 Real-Time Example Suppose an e-commerce site wants to know whether a product category exists. let categories = [ " Mobiles " , " Laptops " , " TV " ]; let position = categories . indexOf ( " Laptops " ); console . log ( position ); Output 1 Time Complexity [TBD] Case Complexity Best O(1) Worst O(n) Common Mistake if ( arr . indexOf ( " Apple " )) Wrong. If Apple is at index 0 , JavaScript treats 0 as false . Correct: if ( arr . indexOf ( " Apple " ) !== - 1 ) Interview Questions Q. What does indexOf() return if the value is not found? -1 2. Array.lastIndexOf() Definition The lastIndexOf() method searches from the end of the array and returns the last matching index . Syntax array . lastIndexOf ( searchElement ) array . lastIndexOf ( searchElement , fromIndex ) Parameters Parameter Description searchElement Value to search fromIndex (optional) Index to start searching backward Returns Last matching index or -1 . Internal Working let colors = [ " Red " , " Blue " , " Green " , " Blue " ]; Memory: 0 → Red 1 → Blue 2 → Green 3 → Blue JavaScript starts from the last index: Blue ✅ Returns: 3 Example let colors = [ " Red " , " Blue " , " Green " , " Blue " ]; console . log ( colors . lastIndexOf ( " Blue " )); Output 3 Real-Time Example Suppose a browser stores recently visited pages. let history = [ " Home " , " Products " , " Cart " , " Products " ]; console . log ( history . lastIndexOf ( " Products " )); Output 3 Time Complexity O(n) Best Practice Use lastIndexOf() when duplicate values exist and you need the most recent occurrence. 3. Array.includes() Definition The includes() method checks whether a value exists in an array. It returns: true false Unlike indexOf() , you don't have to compare with -1 . Syntax array . includes ( value ) array . includes ( value , startIndex ) Parameters Parameter Description value Value to search startIndex (optional) Starting position Returns Boolean Internal Working Suppose: let skills = [ " HTML " , " CSS " , " JavaScript " ]; JavaScript compares each element. If found: true Else: false Example let skills = [ " HTML " , " CSS " , " JavaScript " ]; console . log ( skills . includes ( " CSS " )); Output true Example console . log ( skills . includes ( " Python " )); Output false Real-Time Example Netflix Premium Features let features = [ " 4K " , " HDR " , " Offline Download " ]; if ( features . includes ( " HDR " )) { console . log ( " HDR Supported " ); } Output HDR Supported Time Complexity O(n) Common Mistake Using: indexOf () != - 1 instead of includes () includes() is more readable when you only need to know whether the value exists. Interview Question Which is better? includes () or indexOf () Use: includes() → existence check. indexOf() → position required. 4. Array.find() Definition The find() method returns the first element that satisfies a given condition. If no element matches, it returns undefined . Syntax array . find ( callback ) array . find ( callback , thisArg ) Callback Parameters ( element , index , array ) Parameter Description element Current element index Current index array Original array Returns Matching element or undefined . Internal Working Suppose: let numbers = [ 10 , 25 , 30 , 40 ]; Callback: num > 20 JavaScript checks: 10 ❌ 25 ✅ Stops immediately. Returns: 25 Example let numbers = [ 10 , 25 , 30 , 40 ]; let result = numbers . find ( num => num > 20 ); console . log ( result ); Output 25 Real-Time Example Find the first student who scored above 90. let marks = [ 65 , 72 , 95 , 88 ]; let topper = marks . find ( mark => mark > 90 ); console . log ( topper ); Output 95 Time Complexity O(n) Common Mistake find() returns the element , not its index. Interview Question Difference between find() and filter() ? find() → first matching element. filter() → all matching elements. 5. Array.findIndex() Definition Returns the index of the first element satisfying the condition. If not found: -1 Syntax array . findIndex ( callback ) Example let ages = [ 15 , 18 , 25 , 40 ]; console . log ( ages . findIndex ( age => age >= 18 )); Output 1 Real-Time Example Locate the first pending order. let orders = [ { id : 1 , status : " Completed " }, { id : 2 , status : " Pending " }, { id : 3 , status : " Pending " } ]; let index = orders . findIndex ( order => order . status === " Pending " ); console . log ( index ); Output 1 Time Complexity O(n) 6. Array.findLast() (ES2023) Definition Returns the last element that satisfies a condition. Syntax array . findLast ( callback ) Example let numbers = [ 12 , 18 , 25 , 30 ]; let result = numbers . findLast ( num => num > 20 ); console . log ( result ); Output 30 Real-Time Example Find the latest completed transaction. let transactions = [ { id : 1 , status : " Pending " }, { id : 2 , status : " Completed " }, { id : 3 , status : " Completed " } ]; let latest = transactions . findLast ( t => t . status === " Completed " ); console . log ( latest ); Output { id: 3, status: "Completed" } Time Complexity O(n) 7. Array.findLastIndex() (ES2023) Definition Returns the index of the last matching element . Syntax array . findLastIndex ( callback ) Example let numbers = [ 5 , 15 , 25 , 35 ]; console . log ( numbers . findLastIndex ( num => num > 20 )); Output 3 Real-Time Example Find the index of the last product that is out of stock. let products = [ { name : " Laptop " , stock : 5 }, { name : " Mouse " , stock : 0 }, { name : " Keyboard " , stock : 10 }, { name : " Monitor " , stock : 0 } ]; let index = products . findLastIndex ( product => product . stock === 0 ); console . log ( index ); Output 3 Time Complexity O(n) Summary Comparison Method Returns Search Direction Callback Required Modifies Array indexOf() First matching index Left → Right ❌ ❌ lastIndexOf() Last matching index Right → Left ❌ ❌ includes() true / false Left → Right ❌ ❌ find() First matching element Left → Right ✅ ❌ findIndex() First matching index Left → Right ✅ ❌ findLast() Last matching element Right → Left ✅ ❌ findLastIndex() Last matching index Right → Left ✅ ❌ Tips Use includes() when you only need to check if a value exists. Use indexOf() or lastIndexOf() when you need the position of a primitive value. Use find() or findIndex() for arrays of objects or custom conditions. Use findLast() and findLastIndex() (ES2023) when you need to search from the end without reversing the array. Remember that indexOf() and includes() use strict equality ( === ) for comparison, so searching for objects compares references, not object contents. References: https://www.w3schools.com/js/js_array_search.asp JavaScript Array Search Methods What are Array Search Methods? Array Search Methods are used to: Find the position (index) of an element. Check whether an element exists. Retrieve an element that satisfies a condition. Find the index of an element that matches a condition. Search from the beginning or the end of an array. Common Array Search Methods Method Purpose Returns indexOf() Finds the first occurrence of a value Index or -1 lastIndexOf() Finds the last occurrence of a value Index or -1 includes() Checks whether a value exists true / false find() Finds the first matching element Element or undefined findIndex() Finds the index of the first matching element Index or -1 findLast() (ES2023) Finds the last matching element Element or undefined findLastIndex() (ES2023) Finds the last matching index Index or -1 1. Array.indexOf() Definition The indexOf() method searches an array for a specified value and returns the index of its first occurrence . If the value is not found, it returns -1 . Syntax array . indexOf ( searchElement ) array . indexOf ( searchElement , startIndex ) Parameters Parameter Description searchElement Value to search for startIndex (optional) Index where the search starts Returns Index of the first matching element. -1 if not found. Internal Working Suppose: let fruits = [ " Apple " , " Orange " , " Mango " , " Orange " ]; Memory: Index 0 → Apple 1 → Orange 2 → Mango 3 → Orange When: fruits . indexOf ( " Orange " ); JavaScript starts from index 0 :