DEV Community

Swarnali Roy
Swarnali Roy

Posted on • Updated on

Accessing Arrays in JavaScript

Hello Readers!
This episode of the series Basic Data Structure in JavaScript: Arrays includes how to access an array in JS.

Before starting that, we need to know two very important things.

1)JavaScript arrays are zero-based indexed. In other words, the first element of an array starts at index 0, the second element starts at index 1, and so on.

2) How to Get an Array Size.

So, let's start with that.

Getting Array Size with 'length' property

Typically, all arrays have a length property which returns the number of elements or in other words, size of an array.

Let's see an example of an simple one-dimensional array and get it's size.

let petsArr = ['cats','dogs','cows','fishes','birds'];
console.log(petsArr.length);

//output: 5
Enter fullscreen mode Exit fullscreen mode

The output shows 5 as it has five elements occupying five indices from 0 to 4. So the size of this array is 5.

Now, let's see another example of a multi-dimensional array:

let petsArr = [
'cats',['bulldog','husky'],'cows','fishes',
{bird1: 'crow', bird2: 'parrot'}
];
console.log(petsArr.length);

//output: 5
Enter fullscreen mode Exit fullscreen mode

The output is still 5 but it is a complex array which includes another array as it's 3rd element and an JS Object as it's 5th element. But that does not increase the length/size of that array as it is still occupying total 5 indices , from 0 to 4.

Accessing Array Elements

Now let's talk about How to Access the Array Elements in JavaScript.

To access an element in an array, you specify an index in the square brackets [].

The basic syntax is :

arrayName[];
Enter fullscreen mode Exit fullscreen mode

We should not use any spaces between the array name and the square brackets, like array [0]. Although JavaScript is able to process this correctly, but this is not the best practice and this may confuse other programmers reading the code.

The following is a simple example of an one-dimensional array :

let numArr = [50,60,70];

console.log(numArr[0]); //output 50

let data = numArr[1];
console.log(data); //output 60
Enter fullscreen mode Exit fullscreen mode

As arrays are zero-based indexed, the numArr[0] has the value 50 and the data variable stores the value 60 now.

Another example given below is of an multi-dimensional array :

let numArr = [
    [1,2,3],
    [4,5,6],
    [7,8,9],
    [[10,11,12], 13, 14]
  ];
  console.log(numArr[3]); //output [[10,11,12], 13, 14]
  console.log(numArr[3][0]); //output [10,11,12]
  console.log(numArr[3][0][1]); //output 11
Enter fullscreen mode Exit fullscreen mode

The outputs clearly show how the multi-dimensional array elements are accessed. The index 3 has the value [[10,11,12], 13, 14], as the index 3 holds another array in it's 0 index, numArr[3][0] holds [10,11,12] and the last one simply accessed the data of 1st index of the array [10,11,12] which is 11.

In the next episodes, we will see, how we can modify an array with array indices and other methods as well.

Top comments (1)

Collapse
 
swarnaliroy94 profile image
Swarnali Roy

It's great that you tried and got success. Thanks for letting me know and keep following. 😊