DEV Community

Cover image for Arrays | Beginner | Mysterious Topics of Js | #2
Moazam Ali
Moazam Ali

Posted on • Updated on

Arrays | Beginner | Mysterious Topics of Js | #2

Hi folks 👋
I hope you all are doing great.
In this post, we will be learning about JavaScript Arrays and how they work.

So before Arrays, we use to store data in variables, and it was good if we are not working on a large scale. But think of a situation where we have a class of 30 students, and we have to store the names of 30 students, therefore we have to create 30 different variables, and also we have to maintain it, which is very inefficient so that's where we use arrays.

Arrays

In JavaScript, an Array is a container that can store multiple values of different data types. An array holds an ordered list of values known as elements of that Array. Each element in the Array has a specific index through which it can be accessed later on.

Creating JavaScript Arrays

There are two ways to create arrays:

  • Using Array constructor
  • Using array literal notation

Using Array Constructor

The array constructor is used to create arrays.

let fruits = new Array(2);
console.log(fruits.length); // 2
console.log(fruits[0]);     // undefined
Enter fullscreen mode Exit fullscreen mode

When we pass only one positive integer value to the Array constructor, it will create an array of length, and each element would have an undefined value.
You'll rarely use the Array() constructor to create an array in practice.

Using array literal notation

The array literal form uses the square brackets [] to wrap a comma-separated list of elements.

let arrayName = [element1, element2, element3, ...];
Enter fullscreen mode Exit fullscreen mode

Declaring and Initialising arrays

Declaring empty arrays:

let emptyArray = []; 
Enter fullscreen mode Exit fullscreen mode

Initializing arrays:

let fruits = ['Apple', 'Banana'];
Enter fullscreen mode Exit fullscreen mode

We can also add values of different data types

let values = ['hello', 432, true];
Enter fullscreen mode Exit fullscreen mode

Accessing Values

To access an element in an array, you specify an index in the square brackets []. The first element of an array starts at index 0, the second element begins at index 1, and so on.

let fruits= ['kivi', 'mango', 'banana']; 
console.log(fruits[0]); // 'kivi'
Enter fullscreen mode Exit fullscreen mode

Updating Values

To update the value of an element, you assign that value to the element like this:

let fruits= ['kivi', 'mango', 'banana']; 
fruits[1] = 'watermelon';
console.log(fruits[1]); // 'watermelon'
Enter fullscreen mode Exit fullscreen mode

Length of Array

To get the Array's length, we use the .length property, and it is a read-only property which means we can not interact with it.

let fruits= ['kivi', 'mango', 'banana']; 
console.log(fruits.length); // 3
Enter fullscreen mode Exit fullscreen mode

Basic Array Operations

Add elements

To add the elements to the end, we use the .push() method. We can add a list of elements in the parenthesis that are added in the Array.

let fruits= ['kivi', 'mango', 'banana']; 
fruits.push('watermelon');
console.log(fruits); // ['kivi', 'mango', 'banana', 'watermelon']
Enter fullscreen mode Exit fullscreen mode

To add the elements to the beginning, we use the .unshift()method.

let fruits= ['kivi', 'mango', 'banana']; 
fruits.unshift('watermelon');
console.log(fruits); // ['watermelon', 'kivi', 'mango', 'banana']
Enter fullscreen mode Exit fullscreen mode

Remove elements

To remove an element from the end, we use the .pop() method. It removes only one element at a time.

let fruits= ['kivi', 'mango', 'banana']; 
fruits.pop();
console.log(fruits); // ['kivi', 'mango']
Enter fullscreen mode Exit fullscreen mode

To remove an element from the beginning, we use the .shift() method.

let fruits= ['kivi', 'mango', 'banana']; 
fruits.shift();
console.log(fruits); // ['mango', 'banana']
Enter fullscreen mode Exit fullscreen mode

Check the index of an element:

To get the position of an element in the array, we use the .indexOf() method.

let fruits= ['kivi', 'mango', 'banana']; 
console.log(fruits.indexOf('mango')); // 1
Enter fullscreen mode Exit fullscreen mode

Wrapping up

That's all for this post, if you find any mistakes, or want to share more information leave it in the comments.
Thanks for reading!

Moazam Ali
Front-End Developer

Top comments (0)