DEV Community

Cover image for LEARNING JAVASCRIPT ARRAY IN 2023 FROM THE SCRATCH
DevCharlnz
DevCharlnz

Posted on

LEARNING JAVASCRIPT ARRAY IN 2023 FROM THE SCRATCH

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

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
Enter fullscreen mode Exit fullscreen mode

The most common way of creating an array is by assigning an array value to a variable.

Image description

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

let us check it out.

Image description

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

    **How to access an element from an array in JS**
Enter fullscreen mode Exit fullscreen mode

The square bracket [ ] is used to access elements in the array.

Image description

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
You can also use regular for loop to access the elements in an array or any other loop method.

Image description

 **How to Add an Element to an Array in JavaScript**
Enter fullscreen mode Exit fullscreen mode

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

     **How to Remove an Element from an Array**
Enter fullscreen mode Exit fullscreen mode

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

          **Array Method**
Enter fullscreen mode Exit fullscreen mode

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

Array reverse()

Image description

Array concat()

Image description

Array Join()

Image description
Array Slice() and Splice()

Image description

output// ['Evarian', 23]
Enter fullscreen mode Exit fullscreen mode

Array include()

Image description
Array isArray()

Image description

Array fill()

Image description

Array forEach()

Image description

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.

Top comments (0)