DEV Community

Discussion on: Pure Array Modifications: Plain JavaScript vs. Modern JavaScript

Collapse
 
sloths_r_cool profile image
Robin Kim

It will only change the parameter after the line. For example:

let num = 5
console.log(num++)  // still logs 5!
console.log(num)    // logs 6

Notice how the number stays at 5 on the second line, and the ++ doesn't take into effect until the next line. To increment in place, you'd have to move the ++ to the left of the operand:

let num = 5
console.log(++num)  // logs 6
console.log(num)    // logs 6

Knowing this, the ++ in example #6 of the article doesn't actually do anything:

const pureInsert1 = (arr, el, i) => [...arr.slice(0,i), el, ...arr.slice(i++)]
const pureInsert2 = (arr, el, i) => [...arr.slice(0,i), el, ...arr.slice(i)]

const nums = [1,2,4,5]

pureInsert1(nums, 3, 2)  // [ 1, 2, 3, 4, 5 ]
pureInsert2(nums, 3, 2)  // [ 1, 2, 3, 4, 5 ]

If anything the ++ is confusing because it looks as if the user is intending to increment i. If the parameter actually changed, we would get a defective insert:

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

const nums = [1,2,4,5]

pureInsert(nums, 3, 2)  // [ 1, 2, 3, 5 ]
Thread Thread
 
renatomachado profile image
Renato Machado

I understend How the ++ operator Works, but I believe by changing a parameter value, the function will no longer be a pure function. I think that the ++ operator Will result in a side effect to the third parameter.

Thread Thread
 
sloths_r_cool profile image
Robin Kim • Edited

Nope, the function will remain pure because primitive types in JavaScript are passed by value. This means when i is passed in as an argument, pureInsert creates a brand new functional context that contains its own copy of i as opposed to referencing the original variable that was passed in. Since the function cannot mutate the original variable, purity is maintained.

let myNum = 1

const attemptMutation = (i) => {
  console.log(++i)
}

console.log(myNum)      // logs 1
attemptMutation(myNum)  // logs 2
console.log(myNum)      // still logs 1

If you really wanted to make the ++ operator "impure", you could use a higher-order function.

Thread Thread
 
renatomachado profile image
Renato Machado

I didn't know that. Thanks for the clarification.

Thread Thread
 
sloths_r_cool profile image
Robin Kim

Sure thing! :)