Why a value incremented in x while not in found object?

Question

Code:

const x = [{a: 1}, {b: 2}];
let found = x.find(el => el.a === 1);
if(found) found = {...found, a: found.a++};
console.log(x); // [{a: 2}, {b: 2}];
console.log(found) // {a: 1}

Why this code changed the value of a in x while not in found object??

Answer 1

Lets divide your question into two parts

Why this code changed the value of a in x?

This is because found is refers to the object inside the array. So when you change the a prop of found found.a++ it changes the object inside the array. Because found === x[0]

Why value of a is not in found object?

This is are using the increment operator after the variable. So it sets a to previous value not the incremented value. You need to use ++ before variable.

const x = [{a: 1}, {b: 2}];
let found = x.find(el => el.a === 1);
if(found) found = {...found, a: ++found.a};
console.log(x); // [{a: 2}, {b: 2}];
console.log(found) // {a: 2}

Answer 2

found = {...found, a: found.a++}

...creates a new object.

You are using the postfix increment operator:

If used postfix, with operator after operand (for example, x++), then it increments and returns the value before incrementing.

...so it increments found.a (and since found is a reference to x[0] it also increments x[0].a) but returns the value before incrementing...and this is the value used for the new object you are creating that then gets assigned to found.

If you want to also increment found.a you can use prefix which

increments and returns the value after incrementing

...as can be seen here:

const x = [{a: 1}, {b: 2}];
let found = x.find(el => el.a === 1);
if(found) found = {...found, a: ++found.a};  // <= use prefix
console.log(x); // [{a: 2}, {b: 2}];
console.log(found) // {a: 2}

Answer 3

why it appears on x ?

found is reference to the {a: 1} which same as x[0], so any change on found will refer to x[0] as well,

to prove this point you can see this

const x = [{a: 1}, {b: 2}];
let found = x.find(el => el.a === 1);

console.log(found === x[0])  // same reference
console.log(found === {a:1}) // different reference

why doesn't appear of found ?

You're using post increment which will first assign value and then increment

If you need it to first increment value you can use pre-increment

const x = [{a: 1}, {b: 2}];

let found = x.find(el => el.a === 1);
if (found) {
 found = { ...found,  a: ++found.a};
}
console.log(x);
console.log(found)

You can read it for further understanding of Pre-increment vs post-increment

Answer 4

const x = [{
  a: 1
}, {
  b: 2
}];
console.log(x); //original array
let found = x.find(el => el.a === 1); 
console.log(found);// fetch value from array which is similar as 1
if(found){
console.log(found)
found = { ...found,
  a: found.a++ //incremented value of element a with 1 so you get incremented value with new object (so you get the incremented value with new object)
}};
console.log(x); // [{a: 2}, {b: 2}];
console.log(found) // {a: 1}

Answer 5

let found = x.find(el => el.a === 1) returns the element of the array that matches the condition and declare that found is a reference to that object. In the next assignment :

if(found) found = {...found, a: found.a++};

you are first manipulating (a: found.a++) the found variable by adding 1 to the found.a property (note that in this moment found points to the element returned by x.find()) After you did that, you declare that found now points to an object built with the {...found, a: found.a++} expression.

Note that, as you called a: found.a++, the found.a++ returns the value incremented where you place it, but only apply the changes to the original variable (found.a) in the next statement. That is why it doesn't propagate the change to the x value.