Example 1

I have a code pushing one spreaded array into another:

const hobbies = ['Sports', 'Cooking'];
const activeHobbies = ['Hiking'];

activeHobbies.push(...hobbies);
console.log(activeHobbies); //['Hiking', 'Sports', 'Cooking']

hobbies.push('Skiing');
console.log(hobbies); //['Sports', 'Cooking', 'Skiing']
console.log(activeHobbies); //['Hiking', 'Sports', 'Cooking']

Is a spreaded array pushed same as activeHobbies.push(hobbies[0], hobbies[1]) by values?

Why is it not ['Hiking', 'Sports', 'Cooking', 'Skiing'] in the last line ?

Example 2

const hobbies = ['Sports', 'Cooking'];
const activeHobbies = ['Hiking'];

activeHobbies.push(hobbies);
console.log(activeHobbies); //['Hiking', ['Sports', 'Cooking', 'Skiing']], why not ['Hiking', ['Sports', 'Cooking']] ?

hobbies.push('Skiing');
console.log(hobbies); //['Sports', 'Cooking', 'Skiing']
console.log(activeHobbies); //['Hiking', ['Sports', 'Cooking', 'Skiing']]

As I understand, hobbies array will be pushed to activeHobbies by reference without spreading like this activeHobbies.push(hobbies) and the new values will be added to hobbies array inside activeHobbies array, if new values are pushed to hobbies array, because it's pushed by reference. Is it correct?

But why the first console outputs ['Hiking', ['Sports', 'Cooking', 'Skiing']] and not ['Hiking', ['Sports', 'Cooking']] ?

CodePudding user response：

Is a spreaded array pushed same as activeHobbies.push(hobbies[0], hobbies[1])?

Yes. This is true for all spread syntax function calls, not just push.

Why does activeHobbies not change?

Because it's independent of hobbies, there is no connection, they're two separate arrays and you pushed 'Skiing' only to one of them.

the new values will be added to hobbies array […], if new values are pushed to hobbies array

Yes. Doesn't matter whether you're looking at the array via activeHobbies[1] or via the hobbies variable, it's the same object after all.

Why the first console outputs ['Hiking', ['Sports', 'Cooking', 'Skiing']] and not ['Hiking', ['Sports', 'Cooking']]?

This is just an artifact of the interactive console.log reprentation. It didn't actually output that before you pushed the value.

CodePudding user response：

Speaking to Example 1, when you pushed the spread values of hobbies to activeHobbies, that was a one-time operation in which the primitive values contained in the hobbies array were cloned and added to activeHobbies. The original hobbies array wasn’t altered, at all, and remains entirely independent of activeHobbies. So when you later add a new array item to hobbies, activeHobbies is entirely unaffected as the two arrays aren’t linked in any way and values added to one wouldn’t automatically appear in the other without being pushed to each. Push with the spread operator amounts to a one-time concatenation of two arrays.