Working with Array Elements

You already know how to create arrays, but what will you do if your boss tells you to delete the first or last element from the array? Or maybe add an element to the array? What if you're tasked with finding the length of the array (the number of elements in the array)? Then you'll say that you don't know how to do it, and you might get fired 😩.

But don't worry! In this chapter, I'll tell you how to do it, and we'll look at the basic methods of working with arrays!

Adding elements to an array.

Let's start with the simplest thing: how do we add an element to an array? For this, you can use the push method! Let's look at an example:


              123
            
let numbers: number[] = [1, 2, 3];
let newLength = numbers.push(4);
console.log(numbers);

So, we have added an element to the numbers array. We can also add multiple elements at once using the push method:


              123
            
let numbers: number[] = [1, 2, 3];
let newLength = numbers.push(4, 5);
console.log(numbers);

Removing the last element

If you need to quietly steal the last element from the array, you can do it using the pop() method. This method removes the last element from the array and returns it. Let's look at an example:


              1234
            
let numbers: number[] = [1, 2, 3];
let lastElement = numbers.pop();
console.log(`array after modifying: ${numbers}`);
console.log(`the last element was ${lastElement}`);

Note that returning a value means assigning it to another variable. So, we assign a value to a variable using an array's method. We will talk about what methods, functions, and their differences are in the next section.

Removing the first element

The shift() method removes the first element of the array and returns its value, for example:


              123
            
let numbers: number[] = [1, 2, 3];
let firstElement = numbers.shift();
console.log(`numbers: ${numbers}, deleted element: ${firstElement}`);

There is also a reverse method that, on the contrary, adds one or more elements to the beginning of the array and returns the new length of the array, for example:


              123
            
let numbers: number[] = [2, 3, 4];
let newLength = numbers.unshift(0, 1);
console.log(`numbers: ${numbers} with length: ${newLength}`);

Combining Arrays

TypeScript also allows us to combine two arrays using the concat() method, which will return us a new, fresh, larger array:


              1234
            
let array1: number[] = [1, 2];
let array2: number[] = [3, 4];
let combinedArray = array1.concat(array2); 
console.log(`combined array = ${combinedArray}`);

We can also extract a portion of an array and store it in a new array using the slice() method. Here, we need to specify the indices of the extreme elements and all elements between these indices will be transferred to a new array. For example:


              123
            
let numbers: number[] = [1, 2, 3, 4, 5];
let slicedArray = numbers.slice(1, 4); 
console.log(`sliced array = ${slicedArray}`);

Note

The slicedArray contains elements from index 1 (inclusive) to index 4 (exclusive), so it includes elements with indexes 1, 2, and 3.

These are not all the methods and ways to work with arrays, but these are the basic methods that a beginner needs to know. As you progress in learning TypeScript, you will discover new methods, or perhaps what we've learned in this chapter will be sufficient for you.

1. What does the `push` method do when applied to an array in TypeScript?

2. Which method is used to remove the first element from an array in TypeScript?

Everything was clear?

Thanks for your feedback!

Section 3. Chapter 2