Pure Array Modifications: Plain JavaScript vs. Modern JavaScript

Glenn Stovall - Dec 14 '18 - - Dev Community

The post Pure Array Modifications: Plain JavaScript vs. Modern JavaScript appeared first on Glenn Stovall - Growth Engineer.

When working with Redux or other state managers, you want to keep your code pure. That means no side effects. Instead of updating an array instead you want to return a new copy of the array with the changes applied. This is tricky with JavaScript arrays since it isn’t clear which native functions change the array, and which ones return a new copy.

Pop Quiz: array.slice() and array.splice(). How many of them affect the original array?

a) Slice is pure, splice is impure.

b) Slice is impure, splice is pure.

c) Both are pure.

d) Neither are pure.

Scroll to see the result:

...

...

...

a) Slice is a pure function, but splice changes the array.

Confusing, right?

To keep your array edits safe, let’s look at some functions that perform pure operations on arrays. Examples are included in both ES2018 and older versions of JavaScript. These examples make heavy use of the spread operator, so if you aren’t familiar with it this may also help you get a stronger understanding of how it works.

1. How to add an element to the end of an array without modifying the original:

//ES 2018
const purePush = (arr, el) => [...arr,el]

//ES5
function purePushClassic(arr, el) {
  return arr.concat(el)
}
Enter fullscreen mode Exit fullscreen mode

2. How to add an element to the beginning of an array without modifying the original:

//ES 2018
const pureUnshift = (arr, el) => [el, ...arr]

//ES5
function pureUnshiftClassic(arr, el) {
  return [el].concat(arr)
}
Enter fullscreen mode Exit fullscreen mode

3. How to Combine two Arrays into a Third

//ES2018
const pureCombine = (arr1, arr2) => [...arr1, ...arr2]

//ES5
function pureCombineClassic(arr1, arr2) {
  return arr1.concat(arr2)
}
Enter fullscreen mode Exit fullscreen mode

4. Remove an element from the end of the array, Without modifying the original:

//ES 2018
const pureShift = (arr) => arr.slice(1)

//ES5
function pureShiftClassic(arr){ return arr.slice(1) }
Enter fullscreen mode Exit fullscreen mode

5. Remove an element from the beginning of the array, Without modifying the original:

//ES2018
const purePop = (arr) => arr.slice(0,-1)

//ES5
function purePopClassic(arr) { return arr.slice(0,-1) }
Enter fullscreen mode Exit fullscreen mode

6. Insert an element at a specific index without mutating the array:

//ES2018
const pureInsert = (arr, el, i) => [...arr.slice(0,i), el, ...arr.slice(i)]

//ES5
function pureInsertClassic(arr, el, i) {
return arr.slice(0,i)
  .concat(el)
  .concat(arr.slice(i++))
}
Enter fullscreen mode Exit fullscreen mode

7. Replace an element at a specific index without mutating the array:

//ES2018
const pureReplace = (arr, el, i) => [...arr.slice(0, i), el, ...arr.slice(++i)]

//ES5
function pureReplaceClassic(arr, el, i) {
  var copy = arr.slice()
  copy[i] = el
  return copy
}
Enter fullscreen mode Exit fullscreen mode

8. Delete an element at a specific index without mutating the array:

//ES2018
const pureDelete = (arr, i) => [...arr.slice(0,i),...arr.slice(i+1)]

//ES5
function pureDeleteClassic(arr, i) {
  return arr.slice(0,i).concat(arr.slice(i+1))
}
Enter fullscreen mode Exit fullscreen mode

Bonus tip: turn any impure array method into a pure one

All you have to is make a copy of the array first. You’ve seen it in the above examples. In ES2018, you can use the spread operator. In old JavaScript, you can use splice. For example, here’s a way to convert the reverse method into a pure operation:

Want to know more? Here’s some further reading

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .