Search Here

Javascript Array - creating - inserting items using push method - accessing deletion of array items

Javascript Array

Arrays store multiple values in the form of a list. The Items in the list can be accessed using index or position. unlike variable where a value of particular data item can be stored in the array. We can store multiple items which belong to different data types.

Creating Arrays

To create an empty array use `array()` method and assign it to a variable.

var fruits = new Array(); //array created with empty items
fruits
//Console output
[]

JavaScript Array creating empty array

If you click on arrow mark you can see `length:0` which means that there are zero items below will be explained in detail.
Then below length, there is `__proto__` which has a number of methods which can be performed on array `fruits`.
We’ll be covering Array Methods in the next tutorial.

`Array()` can be declared in a shorthand way using square brackets `[]`.The below method gives the same output like the above.

var fruits = []; //array created with empty items
fruits
//Console output
[]

Inserting Items in Array

Unlike another statically typed programming language, we can insert items of Different DataTypes in JavaScript Arrays.
Let us create a `cars` array and insert some items.

var cars = [];
cars[0]="BMW";
cars[1]="AUDI";
cars[2]="BENZ";
cars[3]="TATA";
console.log(cars);
//Console output
(4) ["BMW", "AUDI", "BENZ", "TATA"]

JavaScript Array inserting items into array index

In index cars[0] items “BMW” is a store and similarly, other items are stored in their respective index.

Now let us create the same cars array in a single line of code.

var cars = ["BMW", "AUDI", "BENZ", "TATA"];
console.log(cars);
//Console output
(4) ["BMW", "AUDI", "BENZ", "TATA"]

JavaScript-Array displaying or debugging array using console.log() function

Inserting items using `push()` method

var cars = ["BMW", "AUDI", "BENZ", "TATA"];
console.log("Before Inserting new item : ",cars);
cars.push("VOLVO");
console.log("After Inserting new item : ",cars);

//Console output
Before Inserting new item :  (4) ["BMW", "AUDI", "BENZ", "TATA"]
After Inserting new item :  (5) ["BMW", "AUDI", "BENZ", "TATA", "VOLVO"]

JavaScript Array displaying array before and after insertion of items using console.log() function

We can also insert multiple items to an array.

var cars = ["BMW", "AUDI", "BENZ", "TATA"];
cars.push("VOLVO", "FIAT", "MARUTI");
console.log(cars);

//Console output
(7) ["BMW", "AUDI", "BENZ", "TATA", "VOLVO", "FIAT", "MARUTI"]

JavaScript Array pushing new item into the array using push() method

Accessing Array Items

Array items can be accessed through indexes.

var cars = ["BMW", "AUDI", "BENZ", "TATA"];
console.log(cars[1]);
//Console output
AUDI

Check if Item Exists in Array

At the start, we have told you about `length` key in array. This is created with array itself and the value of length changes as we add/remove items in the array.

var cars = ["BMW", "AUDI", "BENZ", "TATA"];
console.log(cars.length);
//Console output
4

Check it item exists using if conditional statement

var numbers = [1,2,3,4];
if(numbers.length>0){
    console.log("Item exists in array");
}else{
    console.log("Item does not exists in array");
}

//Console output
Item exists in array

Updating Items in Array

We can update a specific item in an array using indexes.

var names = ["John", "Rahul", "Karan"];
names[1]="Rahul Kumar";
console.log(names);

//Console output
(3) ["John", "Rahul Kumar", "Karan"]

JavaScript Array updating specific index of array

Delete/Remove array items

To remove the item from the array we use `delete` keyword before specifying the array with index.

var names = ["John", "Rahul", "Karan"];
console.log("Before deleting item ",names);
delete names[1];
console.log("After deleting item of index 1 ",names);

//Console output
Before deleting item  (3) ["John", "Rahul", "Karan"]
After deleting item of index 1  (3) ["John", empty, "Karan"]

JavaScript Array deleting specifix index of array using delete keyword

When we check for items after deletion we see that there are still 3 items and the index 1 which we deleted is empty but
the index still exists if we call it we get `undefined`.

names[1]
//Console output
undefined

So in order to remove the item with index completely, we can use array method `splice()`.

Syntax

array.splice(index,delete_count);

It takes to arguments first the index to be deleted and the next number of items to be deleted. On calling this method will return deleted array items.

var names = ["John", "Rahul", "Karan"];
console.log("Before deleting item ",names);
var index = 1;
var del_count = 1;
names.splice(1,1);
console.log("After deleting item of index 1 ",names);

//Console output
Before deleting item  (3) ["John", "Rahul", "Karan"]
After deleting item of index 1  (2) ["John", "Karan"]

JavaScript Array deleting array index using splice() method