DEV Community

Cover image for Javascript Array Methods
pavanbaddi
pavanbaddi

Posted on • Originally published at thecodelearners.com

Javascript Array Methods

In this tutorial, array methods are discussed.

Length property

The array.length the property acts as a counter as it keeps count on the number of items in an array. Let us look a below example

var x = [5,8,7,2,1];
console.log(x.length);

//Console Output
5

x.length outputs the number of items in array x.

push() method

The method push() is used to insert an item into the end of the array.

Syntax

array.push(item1,item2,...);

We can insert a single item or multiple items at once.

Example

var items = ["Key", "Soap", "Table"];
items.push("Slippers", "Napkin", "Charger");
console.log(items)

//Console Output
(6) ["Key", "Soap", "Table", "Slippers", "Napkin", "Charger"]

pop() Method

The method pop() remove the last item from the array and return the remove item.

Syntax

array.pop()

Example

var items = ["Key", "Soap", "Table"];
items.push("Slippers", "Napkin", "Charger");
console.log("Array before pop() method ",items)
items.pop()
console.log("Array after pop() method ",items)

//Console Output
Array before pop() method (6) ["Key", "Soap", "Table", "Slippers", "Napkin", "Charger"]
Array after pop() method (5) ["Key", "Soap", "Table", "Slippers", "Napkin"]          

shift() Method

The method shift() does the opposite of thepop() method. It removes the first item from an array.

Syntax

array.shift()

Example

var items = ["Key", "Soap", "Table"];
console.log("Array before shift() method ",items);
items.shift();
console.log("Array after shift() method ",items);

//Console Output
Array before shift() method  (3) ["Key", "Soap", "Table"]
Array after shift() method  (2) ["Soap", "Table"]

unshift Method

The method unshift does the opposite of the push() method inserts a new item at the start of the array and returns a count for a number for items in an array.

Syntax

array.unshift(item1,item2,...);

Example

var items = ["Key", "Soap", "Table"];
console.log("Array before unshift() method ",items);
items.unshift("Knife", "Medicine box", "Toilet Paper");
console.log("Array after unshift() method ",items);

//Console Output
Array before unshift() method  (3) ["Key", "Soap", "Table"]
Array after unshift() method  (6) ["Knife", "Medicine box", "Toilet Paper", "Key", "Soap", "Table"]

indexOf Method

Method indexOf used to check if the item exists in an array. It takes two arguments first is an item to search and the second argument specifies from which index it should start searching. If search item exists in the array it returns its index and if search item doesn't exist then it will return -1 which means that the item does not exist in an array.

Syntax

array.indexOf(search_item, search_from_index);

Argrument search_from_index is optional argrument.

Example 1

var items = ["Key", "Soap", "Table"];
items.indexOf("Soap");

//Console Output
1 //this is index of item "Soap"

Example 2

Let us check if student name exists in array using if-statement.

var students = ["Kishor", "Suresh", "Naresh", "Sunil", "Pradeep"];
var index = students.indexOf("Naresh");
if(index != -1){
    console.log("Student name 'Naresh' exists in array at index : "+index);
}else{
    console.log("Student name 'Naresh' does not exists in array");
}

//Console Output
Student name 'Naresh' exists in array at index : 2

slice Method

The method slice is used to cut a particular position of an array. This method takes two arguments start and end. The start the argument specifies from which index it should start slicing and end argument specifies at which index it must stop slicing. It does not override the existing array and returns a new sliced array.

Syntax

array.slice(start_index, end_index);

Example

var students = ["Kishor", "Suresh", "Naresh", "Sunil", "Pradeep"];
var start_index = 2, end_index = 4;
students.slice(start_index, end_index);

//Console Output
(2) ["Naresh", "Sunil"]

MDN Doc provides an in-detail look at javascript array methods. This post is taken from thecodelearners website

Top comments (0)