JavaScript Arrays: Slice

• Assigning an array to a new variable doesn't create a copy. Instead, the two variables reference the same array. Any changes to one of them will also show up in the other.

• >

  const original = [1, 2, 3];
  const copy = original;
  copy[0] = 10;
  original;

  Result:

  [10, 2, 3]

• Sometimes we want a true copy of an array, so that modifications to the copy don't affect the original. We can use the .slice method to do that. If we call .slice without any arguments, we get a new array with all elements from the original array.

• >

  const original = [1, 2, 3];
  const copy = original.slice();
  copy;

  Result:

  Run Code

• >

  const original = [10, 20, 30];
  const copy = original.slice();
  copy[0] = 1;
  original;

  Result:

  [10, 20, 30]
• Note: this code example reuses elements (variables, etc.) defined in earlier examples.

  >

  copy;

  Result:

  [1, 20, 30]
• Note: this code example reuses elements (variables, etc.) defined in earlier examples.

  >

  original[0] = 42;
  copy;

  Result:

  [1, 20, 30]

• We can pass two optional arguments to .slice. The first is the start index, which will give us all elements from that index until the end of the array.

• >

  [10, 20, 30, 40, 50].slice(3);

  Result:

  Run Code

• >

  ['a', 'b', 'c'].slice(1);

  Result:

  ['b', 'c']

• The second optional argument is end. We'll get all elements from start up to end, but not including end.

• >

  [10, 20, 30, 40, 50].slice(1, 2);

  Result:

  Run Code

• >

  [10, 20, 30, 40, 50].slice(1, 3);

  Result:

  [20, 30]

• We can .slice beyond the end of the array. It gives the same result as slicing right up to the last element.

• >

  [10, 20].slice(0, 2);

  Result:

  Run Code

• >

  [10, 20].slice(0, 3);

  Result:

  [10, 20]

• If our start index is beyond the end of the array, we get an empty array.

• >

  ['a', 'b', 'c'].slice(5);

  Result:

  []

• >

  [10, 20].slice(2, 3);

  Result:

  []

• Think of it like this. The array [10, 20] has indexes 0 and 1. So what's in indexes 2 through 3? There's nothing there. The slice of those indexes is empty.

• There's an important caveat with .slice. It creates a new copy of the original array, but it doesn't create copies of the individual elements inside the array.

• For example, the original array might contain a user object. When we copy the array, both arrays reference that same user object. Any changes to the user object are visible in the original and in the copy, since there's only one user.

• >

  const original = [{name: 'Amir'}, {name: 'Betty'}];
  const copy = original.slice();
  copy[0].name = 'Cindy';
  original.map(user => user.name);

  Result:

  ['Cindy', 'Betty']

• However, if we store a new user object at index 0, that won't be visible in any copies. The arrays are independent, so completely replacing an element in one doesn't affect the others.

• >

  const original = [{name: 'Amir'}, {name: 'Betty'}];
  const copy = original.slice();
  copy[0] = {name: 'Cindy'};
  original.map(user => user.name);

  Result:

  ['Amir', 'Betty']

• We'll explore the issue of copying arrays more deeply in a later lesson. Use .slice when you need to make a copy of an array: either the entire array, or a section of it.