1

Ok I am brand new with javascript and for some reason these arrays are exactly the same but I only edit one, any ideas?

let array = ["one", "two", "three", "four"]
let newArray = array
newArray.forEach((element,i) => {
  newArray[i] = element+"_done"
})

console.log(array)
console.log(newArray)

Any ideas, this is my first question, so please don't be to harsh I am still learning.

Gerald
  • 23
  • 2
  • 2
    worth to read: https://stackoverflow.com/questions/518000/is-javascript-a-pass-by-reference-or-pass-by-value-language – Nina Scholz Jun 05 '21 at 16:45
  • Oh sorry I didn't see that question or I wouldn't have asked thank you all for helping though. – Gerald Jun 05 '21 at 16:46

5 Answers5

5

Don't worry this is quite a simple fix. Basically when you did

let array = ["one", "two", "three", "four"]
let newArray = array

You didn't create a new array you just created another pointer to the existing array. Its a very simple fix. Don't worry I had this exact same problem when I started in javascript. Just use the spread syntax this is quite a good read for some more info on it. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax and also research object and array destructuring, as it will be very useful. Fireship io did a very good tutorial on this. His videos are all ways good to watch and they are very well made. https://www.youtube.com/watch?v=UgEaJBz3bjY

Anyway here is the fix:

let array = ["one", "two", "three", "four"]
let newArray = [...array]
newArray.forEach((element,i) => {
  newArray[i] = element+"_done"
})

console.log(array)
console.log(newArray)
Harvey
  • 109
  • 1
  • 5
3

This case is also known as call by reference. Arrays in JavaScript are reference type. when you wrote the line:

    newArray = array

so instead of assigning the value of array to newArray, you passed the reference of array to newArray, which means any action performed on newArray will automatically be applied to array. to solve this you might use this expression:

    newArray = [...array]

This is known as breaking the reference.

Adnan Samir
  • 171
  • 5
1

Array in Javascript is reference type. So when you do newArray = array, you are just creating a new variable named newArray in stack which is pointing to the same memory location of values (in heap) of array variable. Hence modifying one modifies the other.

Object, Array are reference type and number string, boolean are value type.

Vivek Bani
  • 3,703
  • 1
  • 9
  • 18
1

This is a classic example the old problem of "call by reference" and "call by value" if you want to understand these concepts better I would advise to google it.

But in a nutshell when you say let newArray = array it does not create a new copy of the array but instead newArray is a reference to array. If you change the one you change the other.

Here are some ways to properly copy a object https://www.javascripttutorial.net/object/3-ways-to-copy-objects-in-javascript/

Angelos
  • 23
  • 1
  • 4
0

This is because both the variables point to same array. Instead of copying the array, the reference to the original array is assigned when using '=' operator. To copy the elements of existing array to new array, ES6 spread operator is very helpful.

Check this indepth article on JavaScript Arrays. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

var array1 = [1,2,3,4,5,6];
var array2 = array1; // assigns reference to array1
var array3 = array2; // assigns reference to array1
var copy = [...array1]; //new array is created and elements of array1 are copied to this new array.

array1.push(7); //every reference to this array will get updated.
console.log(array1); // [1,2,3,4,5,6,7];
console.log(array2); // [1,2,3,4,5,6,7];
console.log(array3); // [1,2,3,4,5,6,7];
console.log(copy); // [1,2,3,4,5,6]; //Doesn't get modified as it is copy.
abhinum95
  • 69
  • 4