cft

Beginner's guide to Arrays in JavaScript

Getting started with Array and Array Methods in JavaScript with simple examples.


user

Atul Tameshwari

2 years ago | 2 min read

What is an Array?

An array is a datatype for storing multiple pieces of data in one single variable. These multiple data values can be different in terms of the data type, that is JavaScript allows you to store both strings and numbers in a single array.

In JavaScript, we declare array variables with an opening square bracket and putting the values separated by a comma, and then finally ending the declaration by closing the square bracket.

Declaring three arrays in JavaScript
Declaring three arrays in JavaScript

You can also nest arrays (put one array inside another array)

Nested Array
Nested Array

In the above example, one array named nestedArray is a container for two other arrays ["Dogs",4] and ["Cats", 7]. This kind of array is also called a multi-dimensional array.

Accessing Data inside Arrays

Data stored inside the arrays can be accessed using indexes. Just like strings, arrays also have zero-based indexing i.e., the first element of the array has an index on zero, the second element has an index of one, the third element has an index of two, and so on.

To access the data inside an array all you need to do is, write the name of the array along with the index of data you want to access in square brackets ([]).

You can either output this value or store it in another variable for further use.

Accessing data inside the array
Accessing data inside the array

Accessing Data inside Multi-Dimensional Array

Accessing data inside multi-dimensional arrays can also be done using indexes, but this time we have to use two sets of square brackets. The first one is for the outer-most array (that is the container of all the other arrays) and the second one is for the inside array.

Accessing data inside a multi-dimensional array
Accessing data inside a multi-dimensional array

Modifying Data inside Arrays

Arrays are mutable in Javascript and can be modified easily. This is also done using indexes. Just write the index of the element you want to modify and in the following manner :

Modifying data inside an array
Modifying data inside an array

Manipulating Arrays with push() function

There is a push() function in JavaScript that helps to append data to the end of the array upon its calling. This function takes one or more parameters and pushes them onto the end of the array.

Manipulating array with push() function
Manipulating array with push() function

Manipulating Arrays with pop() function

When the pop() is invoked or called it pops a value from the end of an array i.e., it removes the last value from the array. But this is not the only thing this function does, when invoked pop() function also returns the popped-off value and you can store it in another variable.

Manipulating array with pop() function
Manipulating array with pop() function

Manipulating Arrays With shift() function

Opposite of pop() function, the shift() function is used to remove the first value from the array. This function also returns the shifted-off value and can be stored in another variable.

Manipulating array with shift() function
Manipulating array with shift() function

Manipulating Arrays With unshift() function

The unshift() function is somewhat like the push() function, the only difference is that it adds the given value to the front of the array instead of the end of the array.

Manipulating array with unshift() function
Manipulating array with unshift() function

HURRAY! You did it. This is all you needed to know about Arrays in JavaScript as a beginner.

😎
😎



Thank you'll for reading till the end 😌🙌

And don't forget to follow me for more such blogs 😛

Help me buy some books? 👀

Upvote


user
Created by

Atul Tameshwari

Helping fellow newbie developers of the web domain.


people
Post

Upvote

Downvote

Comment

Bookmark

Share


Related Articles