Typescript extract a section of an array using slice

Typescript extract a section of an array:

slice() method can be used to extract a section of an array in TypeScript. It doesn't modify the original array, but it returns a shallow copy of a portion of the array.

In this post, we will learn the definition of slice and how to use it with examples.

Definition of slice:

slice is defined as like below:

slice(start?: number, end?: number): T[]

• start is the index to start. It is an optional parameter.
  • For undefined value, it will be 0
  • For negative value, it will be length - value
  • If it is greater than the length of the array, it will return an empty array
• end is the index to stop. It is also optional. This index is not included in the slicing.
  • If it is omitted, it will be length of the array
  • For negative value, it will be length - value
  • If it is greater than the length of the array, it will be array length.

Return value:

It will return a new array holding the extracted elements.

Note:

• For strings, numbers and booleans, slice will copy the values to the new array. Changes of these values in one array doesn't affect the values in another array.
• For objects, slice will copy the reference of the object to the new array. So, if we make any change to the object, it will be visible in both arrays.

Example 1: slice with different arrays:

let strArray = Array.of('one', 'two', 'three', 'four', 'five');
let intArray = Array.of(1, 2, 3, 4, 5);


let strArraySlice = strArray.slice(2, 4);
let intArraySlice = intArray.slice(1, 4);

console.log(`strArraySlice: ${strArraySlice}`);
console.log(`intArraySlice: ${intArraySlice}`);

It will print:

strArraySlice: three,four
intArraySlice: 2,3,4

Example 2: slice with optional parameters:

Let's try slice with or without the parameters:

let strArray = Array.of('one', 'two', 'three', 'four', 'five');


let slice1 = strArray.slice(2);
let slice2 = strArray.slice(1, 40);
let slice3 = strArray.slice(-3);
let slice4 = strArray.slice(-3, -2);
let slice5 = strArray.slice(undefined, undefined)

console.log(`slice1: ${slice1}`);
console.log(`slice1: ${slice2}`);
console.log(`slice3: ${slice3}`);
console.log(`slice4: ${slice4}`);
console.log(`slice5: ${slice5}`);

• slice1 extracts from index 2 to the end of the array.
• slice2 extracts from index 1 to the end of the array.
• slice3 extracts from index 5 - 3 = 2 to the end of the array.
• slice4 extracts from index 5 - 3 = 2 to index 5 - 2 = 3 of the array.
• slice5 extracts from index 0 to the end of the array.

It will print:

slice1: three,four,five
slice1: two,three,four,five
slice3: three,four,five
slice4: three
slice5: one,two,three,four,five

Example 3: slice with objects:

slice copies the reference of objects. So, if we make changes to a object in one array, it reflects on another.

let student1 = { name: 'Alex', age: 10 };
let student2 = { name: 'Bob', age: 12 };
let student3 = { name: 'Daisy', age: 11 };

let givenArray = Array.of(student1, student2, student3);
let sliceArray = givenArray.slice(1);

console.log(`Age of Bob in givenArray: ${givenArray[1].age}`)
console.log(`Age of Bob in sliceArray: ${sliceArray[0].age}`)

givenArray[1].age = 20;

console.log('Age is changed in givenArray')
console.log(`Age of Bob in givenArray: ${givenArray[1].age}`)
console.log(`Age of Bob in sliceArray: ${sliceArray[0].age}`)

In this example, we are changing the age value of the second object in the original array. But this will also reflect on the extracted array.

It will print:

Age of Bob in givenArray: 12
Age of Bob in sliceArray: 12
Age is changed in givenArray
Age of Bob in givenArray: 20
Age of Bob in sliceArray: 20