JavaScript Arrays

1.1K

In this article, you’ll learn about JavaScript Arrays , Why is it required, Array Operations and more.

Why array is even required, we have already different datatypes through which can store in value inside that.

Let me answer this question,

When we want to store list of elements, it’s become very tough for us to think name different for each variable to overcome this problem arrays are introduced in JavaScript.

What is JavaScript Arrays?

In JavaScript, Array is a collection of values they may be different datatype, but in some other language they must have same data type i.e. C++, Java ,etc.

In JavaScript array is defined using [] i.e. [25,12,”lco”,true]

In programming Sequence in start from 0, which is also known as index’s.

It’s deal same way as you with any other data type in JavaScript. The difference is that we can access each value inside the list individually, and perform various activities, such as looping over it.

Let’s understand with an example.

let student =["Anup Maurya", "Adarsh Pal", "Atul Kashyap", "Abhishek Bhardwaj "];
for (let x in student) {
  console.log(student[x]); 
}

JavaScript Array Operations

• Creation of Arrays

1. Using an array literal

The items in an array are enclosed within square brackets. Let’s understand with an example.

let example= [25,12,"Anup Maurya",true];

2. Using the new keyword

You can also create an array using JavaScript’s new keyword. Let’s understand with an example.

const array2 = new Array(25,12,"Anup Maurya",true);

You can also store arrays, functions and other objects inside an array. Let’s understand with an example.

const array3 = [
    {'task1': 'exercise'},
    [1, 2 ,3],
    function hello() { console.log('hello JavaScript')}
]

• Accessing Array Elements

For accessing the elements inside an array is also square brackets. Every element in the array is assigned with an index. By default, the first index of an array is zero. To retrieve a specified element from an array, a pair of square brackets enclosing the index value is used, i.e., example[0].

let example= [25,12,"Anup Maurya",true];

console.log(example[0]); //25

console.log(example[2]);  //Anup Maurya

• Array Length Property

The length property retrieves the length of the array. Let’s understand with an example.

let example= [25,12,"Anup Maurya",true];

let len = example.length;

console.log(len);  //4

• Accessing the Last Array Element

Arrays use zero-based indexing, the index of the last element is one minus the length. Let’s understand with an example.

let example= [25,12,"Anup Maurya",true];

let last = example[example.length - 1];

console.log(last);

• Add an Element to an Array

You can use the built-in method push() and unshift() to add elements to an array. The push() method adds an element at the end of the array. Let’s understand with an example.

let example = ['Anup', 'Anurag'];

// add an element at the end
example.push('Aftab');

console.log(example);      //  ['Anup', 'Anurag', 'Aftab']

The unshift() method adds an element at the beginning of the array. Let’s understand with an example.

let example = ['Anup', 'Anurag'];

//add an element at the start
example.unshift('Aftab');

console.log(example);      //  ['Anup', 'Anurag', 'Aftab']

• Change the Elements of an Array

You can also add elements or change the elements by accessing the index value. Let’s understand with an example.

let example = ['Anup', 'Anurag', 'Ravi'];

// this will add the new element 'exercise' at the 2 index
example[2] = 'Kajal';

console.log(example);      //  ['Anup', 'Kajal', 'Ravi']

Suppose, an array has two elements. If you try to add an element at index 3 (fourth element), the third element will be undefined. Let’s understand with an example.

let example = ['Anup', 'Anurag' ];

// this will add the new element 'exercise' at the 3 index
example[3] = 'Kajal';

console.log(example); // ["Anup", "Anurag", undefined, "Kajal"]

Basically, if you try to add elements to high indices, the indices in between will have undefined value.

• Remove an Element from an Array

You can use the pop() method to remove the last element from an array. The pop() method also returns the returned value. Let’s understand with an example.

let example = ['Anup', 'Anurag', 'Ravi', 'Akash'];

// remove the last element
example.pop();

console.log(example);    // ['Anup', 'Anurag', 'Ravi']

• Loop Over the Array Items

You can also loop over each element of array at once. you can use the forEach method for this, which calls a function once for each element in an array. Let’s understand with an example.

let example = ['Anup', 'Anurag', 'Ravi', 'Akash'];

example.forEach((item, index, array) => {
     console.log(item, index);
    });

• item – the value of an array
• index (optional) – the index of the current elements
• arr (optional) – the array of the current elements

The code above displays the name of the element and their corresponding indices on the console.

That’s all for this article and with that, it’s a wrap! I hope you found the article useful. Thank you for reading, If you have reached so far, please like the article, It will encourage me to write more such articles. Do share your valuable suggestions, I appreciate your honest feedback!

Ta da! Having fun learning JavaScript!! ❤️