Javascript Data Structure-Array-complete guide

Rauf Rahman
4 min readOct 24, 2020
javascript array complete guide

An array is the most common and used data structure in computer programming. This article is part of my data structure series. For a basic introduction please visit the introduction part of this series.

Introduction

For more structured learning documentation. Please take a look at

‘Data-Doc’ online documentation

https://raufr.github.io/datado/Array

Use-cases are more-less the same in all languages. Also, It is a good idea for focusing on concept and structure when learning programming basic, rather than focusing on syntax. Let's begin,

Array

An array is a linear collection of elements, where elements can be accessed via indices, which are usually integers used to compute offsets. In javascript array is a specialized type of object, with the indices being property names that cab ve integers used to represent offsets. But internally indices will convert to string to satisfy javascript object requirement

Creating Array

There are some different ways to create an array from scratch. In the below example first and second is the most common way. The third and fourth represent array constructor (Learn More)
The fifth is a bit different, here we are using a single number which represents the length of the array, and it will be an empty array.

create an array in javascript.

Access Array

The most computation power saving option is using a for-loop. Also using [], is a good option for a single dimensional array.

access array elements in javascript

Another way is using built-in JS functionality like

//Provide index location of an element.indexOf()//Will return last position of string data
lastIndexOf()

Mutate Array

Javascript provides some mutator functions that allow you to modify an array.

.push()

Add an element to the end of an array

push example

Remember! adding data beginning of an array is much harder than adding data to the end of an array.

var arr = [2, 3, 4, 5];
var newEl = 1;
var N = arr.length;
for (var i = N; i >= 0; --i) {
arr[i] = arr[i - 1];
}
arr[0] = newEl;
console.log(arr);
//output
[1,2,3,4,5]

.unshift()

Add element at the beginning of an array

array unshift example

.pop()

Remove element from the end of an array

array pop example

.shift()

Remove element from beginning of an array

.splice()

Adding or removing elements from the middle of an array.

array splice example

.reverese()

Arranging array elements in reverse.

array reverse example

.sort()

Sort array element, this mutator function worked very well with string.

array sort example

Remember! sort() will not work properly with numbers, cause the js engine using lexicographical sorting. But!! there is always a way:

Iterate Array

There are two types of iterator functions.

  1. Non-duplication Iterator functions2
  2. Duplication iterator functions

Non-duplication Iterator functions:

forEach()

forEach arguments usually a function and run through each element of that array.

array forEach() example

every()

Below example pass a function in every() method and depends on the return if..else execute.

array every() example

some()

This will return boolean depends if some elements exist on the given array.

array some() example

Duplication iterator functions

map()

The map()function works like the forEach() function.

arrray map() example

filter()

Work similar as every() function

Two Dimensional Array

Creating a 2-dimensional array

By default, javascript does not have a two-dimensional array, but we can do this via creating arrays.

2d array example

We have just scratch the surface of the array in Javascript. The array is the most used and vast data structure in JS, but don't panic, there is nothing but consistent practice and learning will help down the road.

Most of the time, we don't have to use all of the array prototype methods in our day to day life of programming.
I have discussed the most used ones, but feel free to check the below MDN resources for more:

MDN

Other parts of this series:

1.Introduction

--

--