Javascript Array Methods Ep.3

Hey There 👋
Welcome to Episode 3 of my Array Methods Explain Show.

as always, if you are here then i suppose you must have pre knowledge of javascript and arrays.

we will be discussing only one method on this episode which is : SLICE

slice does not alter the original array. It returns a copy of elements from the original array.

the syntax of slice method is :

• beginIndex (optional) :

The starting index from which you want to start the extraction. 
If beginIndex > length of array, then empty array is returned. 
If start is negative, then it starts from last of array.

• endIndex (optional) :

The ending index at which you want to stop the extraction. 
If endIndex > length of array, then whole array is returned. If start is negative, then it starts from last of array.

It returns new array containing the extracted elements.

Now, lets look at examples :

• return a sub array with given start index

let colors = ["Red", "Blue", "Yellow", "White", "Black"];

let newColors = colors.slice(2); // return a sub array from index 2
console.log(newColors); // ["Yellow", "White", "Black"]

• return a sub array with given start index and end index

let colors = ["Red", "Blue", "Yellow", "White", "Black"];

let newColors = colors.slice(2,4); // return a sub array from index 2 to 4
console.log(newColors); // ["Yellow", "White"]

• return a sub array without any argument

let colors = ["Red", "Blue", "Yellow", "White", "Black"];

let newColors = colors.slice(); // return whole array
console.log(newColors); // ["Red", "Blue", "Yellow", "White", "Black"]

• return a sub array with negative start index

let colors = ["Red", "Blue", "Yellow", "White", "Black"];

let newColors = colors.slice(-2); // return a sub array from index 2 (from last)
console.log(newColors); // ["White", "Black"]

• return a sub array with negative end index

let colors = ["Red", "Blue", "Yellow", "White", "Black"];

let newColors = colors.slice(1, -2); // return a sub array from index 1 to 2 (from last) 
console.log(newColors); // ["Blue", "Yellow"]

BEHIND THE SCENES

slice does not alter the original array. It returns a copy of elements from the original array. The copying takes place as -

• For objects, slice copies object references into the new array. Both the original and new array refer to the same object. If an object changes, the changes are visible to both the new and original arrays.
• For strings, numbers and booleans (not String, Number and Boolean objects), slice copies the values into the new array. Changes to the string, number, or boolean in one array do not affect the other array.

If a new element is added to either array, the other array is not affected.