DEV Community

Ashutosh
Ashutosh

Posted on

Application-oriented understanding of Arrays

#javascript #beginners #webdev #codenewbie

The array is a data structure that is used to store a large collection of data. Why do we need data structures?

For storing a single data entry we can use one variable like

var friend = "Manish";

Suppose we want to store four friends we might need four variables

var friend1 = "John"; var friend2 = "Raj"; var friend3 = "Harry"; var friend4 = "Zach";

But in large applications like Facebook, where there are a billion users who have billions of friends, posting trillion of texts, posting and commenting. It is difficult to store data using variables.

To deal with huge datasets we use data-structures. The array is mostly used.

Creating an Array

Use the below syntax to create an array

var shoppingList = []; //Empty Array var country = ["India","USA","Brazil"]; //The array contains similar data and of one type that is string var clothes = [0, "shirt", 420, true, 1, "jeans", 500, false]; //The array can also contain data of many types.

Retrieve data from an array

The friends' example discussed above can be turned as below

var friends = ["John", "Raj", "Harry", "Zach"];

The name of the friends is stored in the friends array. We can retrieve the name of the friend Harry below syntax is used.

console.log(friends[2]); // Output --> Harry

In friends[2] 2 is the index and in an array, the index starts from 0 indexes up to length of Array - 1.

Mostly Used Built-in Array Methods

  • Push - This method is used to add a new element to the end of the array. It updates the array with the new element and returns the new length of the array. 
var arrPush = [1,2,3]; arrPush.push("Hello there!"); // returns 4, that is, length of array and arrPush is updated as [1,2,3,"Hello there!"]
  • Pop - This method is used to remove the element from the end of the existing array. It updates the array with removing the element an returns the element removed. 
var arrPop = [1,"air",3,"water"]; arrPop.pop(); // returns "water", that is, element removed and arrPop is updated as [1,"air",3]

  • Shift - This method works like pop the difference is it removes the element from the beginning of the array.

  • Unshift - This method works like push the difference is it adds an element to the beginning of the array.

  • Slice - The slice method is used to convert the selected elements into a new array object.

var fruits = ["Banana", "Orange", "Apple", "Mango"]; var newFruits = fruits.slice(1,3); // ["Orange", "Apple"] //First parameter denotes start selecting of the element //Second parameter tells to which element we want console.log(fruits); // Outputs --> ["Banana", "Orange", "Apple", "Mango"]
  • Splice - Splice is a dynamic method that helps in adding/remove items to/from the array. 
var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.splice(2, 0, "Lemon", "Kiwi"); console.log(fruits); //["Banana", "Orange", "Lemon", "Kiwi", "Apple", "Mango"] //first parameter - index from which elements needs to be add/removed. //second parameter - This is optional. tells how many elements needs to be removed. //other parameter - These are the items that needs to be pushed into the array.

Top comments (0)