Nearby lessons
34 of 40🔹 JavaScript Array Methods
📌 What are Array Methods?
JavaScript provides powerful built-in methods to manipulate arrays efficiently.
These methods help with adding, removing, transforming, searching, and iterating through array elements.
🔸 Mutator Methods (Modify Original Array)
| Attribute | Description |
|---|---|
push() | 👉 Adds one or more elements to the end |
pop() | 👉 Removes the last element |
shift() | 👉 Removes the first element |
unshift() | 👉 Adds one or more elements to the beginning |
splice() | 👉 Adds/Removes elements at specific index |
reverse() | 👉 Reverses the order of elements |
sort() | 👉 Sorts the array alphabetically/numerically |
fill() | 👉 Fills array with static value |
🔸 push() : Adds one or more elements to the end
👉 The push() method adds new items to the end of an array.
👉 The push() method changes the length of the array.
👉 The push() method returns the new length.
Syntax: array.push(item1, item2, ..., itemX)
🔸 pop() : Removes the last element
👉 The pop() method removes (pops) the last element of an array.
👉 The pop() method changes the original array.
👉 The pop() method returns the removed element.
Syntax: array.pop()
🔸 shift() : Removes the first element
👉 The shift() method removes the first element from an array.
👉 It changes the original array and returns the removed element.
Syntax: array.shift()
🔸 unshift() : Adds one or more elements to the beginning
👉 The unshift() method adds one or more elements to the beginning of an array.
👉 It returns the new length of the array.
Syntax: array.unshift(item1, item2, ..., itemX)
🔸 splice() : Adds/Removes elements at specific index
👉 The splice() method can be used to add or remove elements at a specified index.
👉 It modifies the original array and returns the removed items.
Syntax: array.splice(start, deleteCount, item1, ..., itemX)
🔸 reverse() : Reverses the order of elements
👉 The reverse() method reverses the order of the elements in an array.
👉 It modifies the original array.
Syntax: array.reverse()
🔸 sort() : Sorts the array alphabetically/numerically
👉 The sort() method sorts the elements of an array.
👉 By default, it sorts alphabetically. For numbers, a compare function is needed.
Syntax: array.sort() or array.sort(compareFunction)
🔸 fill() : Fills array with static value
👉 The fill() method fills elements in an array with a static value.
👉 It changes the original array.
Syntax: array.fill(value, start, end)
🔸 Non-Mutator Methods (Do Not Modify Original Array)
| Attribute | Description |
|---|---|
concat() | 🔗 Merges arrays |
join() | 🧩 Joins elements as a string |
slice() | ✂️ Extracts a section into a new array |
includes() | 🔍 Checks if value exists |
indexOf() | 📍 Finds first index of element |
lastIndexOf() | 📍 Finds last index of element |
toString() | 🔤 Converts array to string |
🔸 concat() : Merges arrays
👉 The concat() method is used to merge two or more arrays.
👉 It returns a new array without changing the existing arrays.
Syntax: array1.concat(array2, array3, ..., arrayX)
🔸 join() : Joins elements as a string
👉 The join() method joins all array elements into a single string.
👉 You can specify a separator (like comma, space, dash, etc).
Syntax: array.join(separator)
🔸 slice() : Extracts a section into a new array
👉 The slice() method returns a shallow copy of a portion of an array.
👉 It does not modify the original array.
Syntax: array.slice(start, end)
🔸 includes() : Checks if value exists
👉 The includes() method checks if an array contains a certain value.
👉 It returns true or false.
Syntax: array.includes(element, start)
🔸 indexOf() : Finds first index of element
👉 The indexOf() method returns the first index of the element in the array.
👉 Returns -1 if not found.
Syntax: array.indexOf(element, start)
🔸 lastIndexOf() : Finds last index of element
👉 The lastIndexOf() method returns the last index of the element in the array.
👉 Returns -1 if not found.
Syntax: array.lastIndexOf(element, start)
🔸 toString() : Converts array to string
👉 The toString() method converts an array to a comma-separated string.
👉 It does not modify the original array.
Syntax: array.toString()
🔸 Iteration Methods (Used for Looping)
| Attribute | Description |
|---|---|
forEach() | 🔁 Executes a function for each element |
map() | 🗺️ Transforms each element into new array |
filter() | 🚿 Filters elements based on condition |
reduce() | ➕ Reduces array to single value |
some() | ☝️ Returns true if any element passes test |
every() | ✅ Returns true if all elements pass test |
find() | 🔎 Returns first match |
findIndex() | 🔢 Returns index of first match |
🔸 forEach() : Executes a function for each element
👉 The forEach() method calls a function once for each array element.
👉 It does not return a new array.
Syntax: array.forEach(callback)
🔸 map() : Transforms each element into new array
👉 The map() method creates a new array with the results of calling a function on every element.
Syntax: array.map(callback)
🔸 filter() : Filters elements based on condition
👉 The filter() method creates a new array with all elements that pass the test implemented by the function.
Syntax: array.filter(callback)
🔸 reduce() : Reduces array to single value
👉 The reduce() method executes a reducer function on each element and returns a single output value.
Syntax: array.reduce(callback, initialValue)
🔸 some() : Returns true if any element passes test
👉 The some() method tests whether at least one element in the array passes the test function.
Syntax: array.some(callback)
🔸 every() : Returns true if all elements pass test
👉 The every() method checks if all elements in the array pass the test function.
Syntax: array.every(callback)
🔸 find() : Returns first match
👉 The find() method returns the first element that satisfies the provided testing function.
Syntax: array.find(callback)
🔸 findIndex() : Returns index of first match
👉 The findIndex() method returns the index of the first element that satisfies the testing function.
Syntax: array.findIndex(callback)