There, are multiple ways to add and find elements in an array. In this article, we will take a deep dive into arrays. This article will take you through all kinds of operations that can be performed on arrays, such as adding new elements to an array, finding elements, removing them, splitting and combining arrays, and so on.

Array: Meaning and Uses

An array is a data structure in computer programming that is used to store a collection of values of the same type. It is a container that can hold a fixed number of elements, which can be accessed and manipulated using an index. In an array, each element is assigned a unique index based on its position, with the first element usually assigned an index of 0. Consider a bookcase: it is a piece of furniture with shelves on which books can be stored and read at any time. Also, a bookcase is usually organized and structured, which makes finding a book quite easy. An array can be likened to a bookcase for better context.

Uses of arrays

• Storing and organizing data

• Implementing algorithms and data structures

• Implementing callback functions

• Storing and accessing data in key-value pairs

Methods of Adding Elements in an Array

In this article, we will look at three of these methods for adding new elements to the end, beginning, or middle of an array.

Push Method

So, countries.push() we can pass 1 or more arguments, and these arguments will be placed at the end of this array. So I'm going to pass Egypt and Germany. Now let's do console.log of countries and save the changes, so we have Nigeria and Ghana, and now we have Egypt and Germany at the end.

let countries = ['Nigeria' , 'Ghana'];

// adding elements to the end of an array

countries.push("Egypt" , "Germany");

console.log(countries)

// ['Nigeria' , 'Ghana' "Egypt" , "Germany" ]

countries.unshift()

To add elements to the beginning of an array, you use the unshift method. So, numbers.unshift(). This pushes the elements in this array to the right and adds new elements at the beginning. So, again, here we will pass two arguments; I'm going to pass China and Togo. So save the changes; now we have China and Togo at the beginning of this array.

let countries = ['Nigeria', 'Ghana' , "Egypt" , "Germany"];

// adding elements to the beginning of an array

countries.unshift("China" , "Togo");

console.log(countries)

// ["China" , "Togo" 'Nigeria', 'Ghana' , "Egypt" , "Germany"];

countries.splice()

Using this method, we can navigate to a specific position and add or remove elements. Now, look at the parameters of this method. The first parameter is a start, which is a number. So that's our starting position. So let's say that in this array, after Nigeria and Ghana, between Ghana and Egypt, we want to add a new element. What is the index of this element? Well, you know that arrays have a 0 index. So the index of the first element is 0 and 1, and here's 2. So our starting position, or starting index, is 2. So I'm going to pass 0 and then look at the third parameter. That's the list of items you want to add. So, to make this stand out, I'm going to add two characters here. China and Togo Save the changes. So note that China and Togo are placed after Nigeria and Ghana.

let countries = ['Nigeria', 'Ghana' , "Egypt" , "Germany"];

// adding elements to the beginning of an array

countries.splice(2 , 0 ,"China" , "Togo");

console.log(countries)

// ['Nigeria', 'Ghana' , "China" , "Togo" "Egypt" , "Germany"]

Finding Elements (primitives)

IndexOf()

Alright now, let's see how we can find elements in an array. Finding elements in an array depends on whether it contains primitive or reference types. So I'm going to start with primitives because they're easier. So, let's say we have an array of numbers with four elements. 1, 2, 3, 4. Here we have a method called indexOf(). We pass the element we are looking for, and if that element exists in the array, this method will return the index of this element in the array. If it doesn't exist, it will return minus 1. So, we are going to look at a few different examples. So first, I'm going to pass the character z because, obviously, we don't have this element, so the result that we'll see will be minus -1.

const numbers = [1,2,3,4];

numbers.indexOf('z'); 

console.log(numbers.indexOf('z'))
// -1

IndexOf() returns the index of the given element in this array. However, if I change this to 1, the result becomes 0, because the index of this element is 0, Note that the type of this element matters.

const numbers = [1,2,3,4];

numbers.indexOf(1); 

console.log(numbers.indexOf(1))
// 0

lastIndexOf()

Similar to indexof(), there is another method called lastIndexOf(). And that will return the last index of the given element, or minus 1 if it doesn't exist.

numbers = [1,2,3,1,4];

console.log(numbers.lastIndexOf(1))
// 3

So the last index of 1 is 3, and the index of this element is 3.

Finding Elements (Reference Types)

Finding a primitive differs from finding a reference type in javascript. There are a couple of ways to do this, and we are going to use the findindex method.

findIndex()

The findIndex() method returns the index of the first element in an array. So instead of returning the actual object, it returns the index. Let's look at a few examples. Because we do not have a course called "ABC," when I save the changes, we should see a minus 1 on the console.

const courses = [
  { id: 1, name: 'mcb452'},
  { id: 2, name: 'edc242'},
];

const course = courses.findIndex(function(course) {
  return course.name === 'abc';
}); 

console.log(course)
// -1

If I change this back to mcb452 and save the changes, we get 0 because the index of the first element that matches this criterion is 0.

const courses = [
  { id: 1, name: 'mcb452'},
  { id: 2, name: 'edc242'},
];

const course = courses.findIndex(function(course) {
  return course.name === 'mcb452';
}); 

console.log(course)
// 0

Conclusion

In this article, we looked at various methods for adding to and finding an array. These operations are extremely important in programming, especially if you are just starting, so it will be great if you can understand and master this basic syntax.

Thank you for reading, and happy coding!

If you enjoy content like this, follow me on Twitter LinkedIn GitHub

Instagram