LEARNING JAVASCRIPT ARRAY IN 2023 FROM THE SCRATCH
Tags: webdev, javascript, frontend, softwaredevelopment
Published: 2023-08-23 12:03:44



In JavaScript, an array is a data structure that stores a collection of elements. Arrays are objects, and they have several properties and methods that can be used to access and manipulate their elements.


Table of Content: 

What is an Array in JS
Creating an Array
How to access an element from an array in JS
How to add an element to an array
How to remove an element from an array
Array Methods


Prerequisite: Basic JavaScript knowledge is required for this lesson such as ES6 let and const variable.

What is an Array in JS
An array data structure is widely used in programming languages that support it. In this article, you’ll learn how to create an array and how to manipulate and access them.


An array can be created either using the array constructors or array literals. But before we jump into how to create your first array let's look at what an array is.

An array consists of a pair of square brackets [ ] containing elements separated by “,”. The elements could be of any data type. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/giluxltask1fidy0zjep.png)

The element, which is the content of an array is known as an index. For instance, the string ‘lettuce’ occupies the first position but will be referred to index 0, ‘broccoli ’ is at index 1, while ‘lemon’ occupies the 5th index. I.e. 

Lettuce is index 0,
Broccoli is index 1,
Centurion is index 2,
Chocolate is index 3, 
Peanut is at index 4, 
Lemon is at index 5…

                    LET’S CREATE AN ARRAY
The most common way of creating an array is by assigning an array value to a variable.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zjn59mc1f40zw3naao7g.png)

The elements are separated with comma(s) in the square bracket and assigned to a variable.

The constructor method can also be used to create an array;

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d2er8ai7oiy6c8oijeg4.png)

let us check it out.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/18ze8bzdcl1eii6b5rby.png)

In this case, index 5 would be undefined because nothing is assigned therein.

        **How to access an element from an array in JS**
The square bracket [ ] is used to access elements in the array.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4cwjpcfc0pqyr6p1vkpf.png)

The [0 ], [1 ], [2 ], [3 ], [4 ], [5 ],  will target the index of the element in the in the array square bracket.


You can also use the keyword (.length) to know the total number of elements in an array.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/23shjomya1p92v80r4mp.png)
You can also use regular for loop to access the elements in an array or any  other loop method.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0rs2khrzwokg5fa9vmgc.png)

     **How to Add an Element to an Array in JavaScript**
The push() method is used to add an element to the end of an array. While, unshift() is used to add an element to the beginning of an array. Lets see what that looks like.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p0k6krqjb3tok58iv7e0.png)

         **How to Remove an Element from an Array**
You can remove an element from the end of an array by using the pop() method and remove an element from the beginning using the shift() method.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wybffanvypd9uho0666c.png)

              **Array Method**
Here are some common array methods:

sort()        slice()       find()
reverse()     splice()      findIndex()
pop()         isArray()     includes()
push()        indexOf()     some()
shift()       lastIndex()    forEach()
unshift()     concat()        every()
entries()     valueOf()       join()
toString()    filter()      fill()


Array Sort()

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n1vgzk08gusp49xjsdkf.png)

Array reverse()

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p151skzgtl9br6i09mmu.png)

Array concat()

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8z4q1yxpriagvkqar9r1.png)

Array Join()

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/15qnd9bluhhd2zyfz361.png)
Array Slice() and Splice()

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/otbi66773vbkzs1jcuyy.png)
```
output// ['Evarian', 23]
```
Array include()

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rbyhkczn9q9jxqym5q15.png)
Array isArray()

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/807o74jqafarffc9skxf.png)

Array fill()

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xz5flnxqwws5zxzerg1j.png)

Array forEach()

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8wswmqgwievlejyqkhtw.png)


Conclusion

An array is a data structure that allows you to store multiple values in a single variable.
Arrays are indexed, which means that each value in the array has a unique number associated with it.
The first value in the array has an index of 0, the second value has an index of 1, and so on.
You can access the values in an array by their index. For example, to access the first value in the array, you would use the following syntax:
array[0]

You can also add, remove, and update values in an array.
JavaScript provides a number of built-in methods for working with arrays, such as push(), pop(), shift(), and unshift().


Here are some of the built-in methods for working with arrays in JavaScript:
push(): Adds a new value to the end of the array.
pop(): Removes the last value from the array.
shift(): Removes the first value from the array.
unshift(): Adds a new value to the beginning of the array.
indexOf(): Returns the index of the first occurrence of a value in the array.
lastIndexOf(): Returns the index of the last occurrence of a value in the array.
slice(): Creates a new array that contains a slice of the original array.
concat(): Combines two or more arrays into a new array.
sort(): Sorts the array in ascending or descending order.