Below is a table summarizing some common JavaScript array methods categorized into mutable (changing the original array) and immutable (returning a new array without modifying the original). The syntax is also provided for each method.
| Method | Mutable | Immutable | Syntax |
|---|---|---|---|
| Adding Elements | |||
| push() | ✔️ | ❌ | array.push(item1, item2, ..., itemN) |
| unshift() | ✔️ | ❌ | array.unshift(item1, item2, ..., itemN) |
| concat() | ❌ | ✔️ | newArray = array.concat(item1, item2, ..., itemN) |
| ...spread | ❌ | ✔️ | newArray = [...array, item1, item2, ..., itemN] |
| Removing Elements | |||
| pop() | ✔️ | ❌ | item = array.pop() |
| shift() | ✔️ | ❌ | item = array.shift() |
| slice() | ❌ | ✔️ | newArray = array.slice(startIndex, endIndex) |
| ...spread | ❌ | ✔️ | newArray = [...array.slice(0, index), ...array.slice(index + 1)] |
| Modifying Elements | |||
| splice() | ✔️ | ❌ | array.splice(startIndex, deleteCount, item1, item2, ..., itemN) |
| map() | ❌ | ✔️ | newArray = array.map((item) => /* transformation */) |
| forEach() | ✔️ | ❌ | array.forEach((item, index) => /* side effect */) |
| ...spread + map | ❌ | ✔️ | newArray = array.map((item, index) => /* transformation */) |
| Filtering Elements | |||
| filter() | ❌ | ✔️ | newArray = array.filter((item) => /* condition */) |
| ...spread + filter | ❌ | ✔️ | newArray = array.filter((item) => /* condition */) |
| Searching and Testing | |||
| indexOf() | ❌ | ✔️ | index = array.indexOf(item) |
| find() | ❌ | ✔️ | foundItem = array.find((item) => /* condition */) |
| some() | ❌ | ✔️ | result = array.some((item) => /* condition */) |
| every() | ❌ | ✔️ | result = array.every((item) => /* condition */) |
| Sorting and Reversing | |||
| sort() | ✔️ | ❌ | array.sort((a, b) => /* comparison */) |
| ...spread + sort | ❌ | ✔️ | newArray = [...array].sort((a, b) => /* comparison */) |
| reverse() | ✔️ | ❌ | array.reverse() |
| ...spread + reverse | ❌ | ✔️ | newArray = [...array].reverse() |
Please note that these are just examples, and the actual implementation within your code may vary based on your specific use case. Always refer to the MDN Web Docs for detailed documentation on each method.