Introduction In this article about JavaScript Array Methods Mutating vs Non Mutating we explain in a clear and practical way the difference between methods that modify the original array and methods that return new arrays or values without altering the original. It includes simple examples for each method and usage recommendations in real projects.
Methods that mutate the array These methods directly change the original array.
1 push() Adds one or more elements to the end of the array. Example arr = [1,2,3]; arr.push(4) Result [1,2,3,4]
2 pop() Removes the last element of the array. Example arr = [1,2,3]; arr.pop() Result [1,2]
3 shift() Removes the first element of the array. Example arr = [1,2,3]; arr.shift() Result [2,3]
4 unshift() Adds one or more elements to the beginning of the array. Example arr = [1,2,3]; arr.unshift(0) Result [0,1,2,3]
5 splice() Changes the array by removing or replacing elements and optionally inserting new ones. Example arr = [10,5,6,4]; arr.splice(1,2,20,30) Result [10,20,30,4]
6 fill() Fills a section of the array with a static value. Example arr = [25,30,35,40,45,50]; arr.fill(0,2,5) Result [25,30,0,0,0,50]
7 sort() Sorts the elements in place. Example arr = [30,10,1,20]; arr.sort() Result [1,10,20,30]
8 reverse() Reverses the order of the elements in place. Example arr = [1,2,3,4]; arr.reverse() Result [4,3,2,1]
9 copyWithin() Copies part of the array to another position within the same array. Example arr = [1,2,3,4,5]; arr.copyWithin(0,2) Result [3,4,5,4,5]
Methods that do not mutate the array These methods return new arrays or values without modifying the original array, which favors immutability and reduces side effects.
1 slice() Returns a portion of the array. Example arr = [1,2,3,4,5]; arr.slice(1,4) Result [2,3,4]
2 concat() Combines arrays into a new array. Example arr1 = [a,b]; arr2 = [c,d]; arr1.concat(arr2) Result [a,b,c,d]
3 indexOf() Returns the first index of an element or -1 if it does not exist. Example arr = [1,2,3,4]; arr.indexOf(3) Result 2
4 lastIndexOf() Returns the last index of an element. Example arr = [a,b,a]; arr.lastIndexOf(a) Result 2
5 includes() Checks if a value exists in the array. Example arr = [1,2,3]; arr.includes(2) Result true
6 find() Returns the first element that meets a condition. Example nums = [10,25,30]; nums.find(n => n > 20) Result 25
7 findIndex() Returns the index of the first element that meets a condition. Example nums = [10,25,30]; nums.findIndex(n => n > 20) Result 1
8 filter() Returns a new array with the elements that meet the condition. Example nums = [10,25,30]; nums.filter(n => n > 20) Result [25,30]
9 map() Transforms each element and returns a new array. Example nums = [1,2,3]; nums.map(n => n * 2) Result [2,4,6]
10 reduce() Reduces the array to a single value by applying an accumulator function. Example nums = [1,2,3]; nums.reduce((t,n) => t + n,0) Result 6
11 reduceRight() Reduces from right to left. Example nums = [1,2,3]; nums.reduceRight((t,n) => t + n,0) Result 6
12 some() Returns true if at least one element meets the condition. Example nums = [1,2,3]; nums.some(n => n % 2 === 0) Result true
13 every() Returns true if all elements meet the condition. Example nums = [2,4,6]; nums.every(n => n % 2 === 0) Result true
14 forEach() Executes a function for each element without returning a new array. Example nums = [1,2,3]; nums.forEach(n => console.log(n)) Result prints 1 2 3
15 toSorted() Returns a sorted copy without mutating the original. Example nums = [3,1,2]; nums.toSorted() Result [1,2,3]
16 toSpliced() Returns a new array with the splice operation applied without mutating the original. Example nums = [1,2,3]; nums.toSpliced(1,1) Result [1,3]
17 at() Returns the element at the indicated position, accepts negative indices. Example nums = [10,20,30]; nums.at(1) Result 20
18 findLast() Returns the last element that meets the condition. Example nums = [10,25,30,25]; nums.findLast(n => n === 25) Result 25
19 findLastIndex() Returns the index of the last element that meets the condition. Example nums = [10,25,30,25]; nums.findLastIndex(n => n === 25) Result 3
20 join() Joins the elements into a string with a separator. Example arr = [Hello,World]; arr.join( ) Result Hello World
21 flat() Flattens nested arrays to the indicated depth. Example arr = [1,[2,[3]]]; arr.flat(2) Result [1,2,3]
22 flatMap() Applies map and then flattens the result one level. Example arr = [1,2,3]; arr.flatMap(x => [x,x*2]) Result [1,2,2,4,3,6]
23 toReversed() Returns a reversed copy without mutating the original. Example arr = [1,2,3]; arr.toReversed() Result [3,2,1]
Best practices When looking to avoid side effects, use non-mutating methods to maintain immutability and facilitate testing and debugging. In cases where performance and direct manipulation are critical, you can opt for mutating methods but with care and clear documentation.
About Q2BSTUDIO Q2BSTUDIO is a custom software and application development company specialized in custom software, artificial intelligence, and cybersecurity. We offer aws and azure cloud services, business intelligence services, AI solutions for companies, AI agents, and power bi consulting. We design custom solutions that combine best engineering practices, security, and artificial intelligence models to drive your organization's digital transformation.
Featured services Custom application development integrated with aws and azure cloud services, artificial intelligence projects for advanced analytics and automation, implementation of AI agents for customer service and processes, cybersecurity audits and solutions, and power bi dashboards for business intelligence services.
Contact and next step If you need advice on choosing between immutable or mutating approaches in your developments or want to design custom software with artificial intelligence and cybersecurity capabilities, contact Q2BSTUDIO for a personalized consultation. Integrating the right decisions about array manipulation in JavaScript is a detail that improves code quality and the success of your projects.
