Array and it's Methods in JavaScript

What is Array?

An array is a collection of multiple types of data in javascript which can store in a single variable. It is an object datatype in javascript.

Syntax:-

const arr =[element1, element2,.....];

all the array elements should be separated by a comma.
all the array elements should be kept inside square brackets.

How to access array elements?

An array element access by referring to an index number, the index number starts from zero(0). The first element's index number would be 0, the second element's index number would be 1, and so on.

For example:-

//Array of fruits
const fruits = ["apple", "mango",  "banana", "grape", "guava"];
// accessing the first element
let fruit = fruits[0];
console.log('This is first element:' +' '+ fruit);
// accessing the second element
fruit = fruits[1]; 
console.log('This is second element:' +' '+ fruit);
// accessing third element
fruit = fruits[2]; 
console.log('This is third element:' +' '+ fruit);
// accessing all elements
console.log('All elements:' +' '+ fruits);

Outputs:-

How to change the element's value of the array?

You can change the element's value by assigning a new value to that index number.

For example:-

//Array of fruits
const fruits = ["apple", "mango",  "banana", "grape", "guava"];
// changing the first element
fruits[0] = "pineapple"; 
console.log(fruits);

Output:-

Methods of Array

concat() :-

The concat() method is used to join two or more arrays and returns a new array. It does not change the existing array.

Syntax:-

array1.concat(array2, array3, ..., arrayN);

For example:-

// concatenation method
let arr1 = [4, 5, 6, 7]
let arr2 = ["apple", "mango",  "banana"]
let arr3 = [false, true]

let concatMethod = arr1.concat(arr2, arr3);
console.log(concatMethod);

Output:-

copyWithin() :-

The copyWithin() method is used to copy the array element and remove the array element at a different position in the same array with the copied element. It does not add a new element

Syntax:-

array.copyWithin(target_index, start_index, end_index);

targeted index is the index that will be removed by the copied element

start index is the starting point to copy the element and

end index is the last index point of the copied index element

For example:-

// copyWithin method
const fruits = ["apple", "mango",  "banana", "grape", "guava"];
// targeting the 3rd element which has index number 2 to replace with the 1st element index number 0.
console.log(fruits.copyWithin(2, 0, 1));

Output:-

entries() :- The entries() method returns an array iterator object with key and value pair for every index number in the array, where the key is the index number and the value is the element name. It does not change the original array.

Syntax:-

array.entries();

For example:-

// entries method
const fruits = ["apple", "mango",  "banana", "grape", "guava"];
let fruitsEntries = fruits.entries();
for (const element of fruitsEntries) {
    console.log(element);
  }

Output:-

entries().PNG

fill() :- The fill() method is used to replace the array elements with a specified value. It overwrites the original array.

Syntax:-

array.fill(value);
array.fill(value, start_index);
array.fill(value, start_index, end_index);

For example:-

// fill method
const fruits = ["apple", "mango",  "banana", "grape", "guava"];
let fillValue = fruits.fill("tomato", 2 ,3);
console.log(fillValue);

Output:-

includes() :- The includes() method returns a boolean value which means if the specified value is present in the array it will return true and if the specified value does not present in the array it will return false. It overwrites the original array.

Syntax:-

array.includes(searchElement)
array.includes(searchElement, fromIndex)

For example:-

// includes method
const array1 = [5, 12, 8, 130, 44];
console.log(array1.includes(130));

Output:-

indexOf() :- The indexOf() method gives the array's first element's index number of the specified value. It starts from left to right. If the value is not found in the array it will return -1. Syntax:-

array.indexOf(item)
array.indexOf(item, start_index)

For example:-

// indexOf method
const fruits = ["apple", "mango",  "banana", "banana", "guava"];
let indexOf = fruits.indexOf("banana");
console.log(indexOf);

Output:-

lastIndexOf() :- The lastIndexOf() method gives the array's last element's index number of the specified value. It starts from right to left. If the value is not found in the array it will return -1.

Syntax:-

array.lastIndexOf(item, start)

For example:-

// lastIndexOf()
const fruits = ["apple", "mango",  "banana", "banana", "guava"];
let lastIndexOf = fruits.lastIndexOf("banana");
console.log(lastIndexOf);

Output:-

isArray() :- The isArray() method returns a boolean value which means if the object is an array it will return true and if the object is not an array it will return false. Syntax:-

Array.isArray(obj)

For example:-

// isArray() method
const fruits = ["apple", "mango",  "banana", "grape", "guava"];
console.log(Array.isArray(fruits));

Output:-

is.Array.PNG

join() :- The join() method is used to join the array elements with a specified separator. It returns an array in the form of a string. The default separator is a comma (,) and any type of separator can be specified. It does not change the original array.

Syntax:-

array.join(separator)

For example:-

// join() method
const fruits = ["apple", "mango",  "banana", "grape", "guava"];
let joinText = fruits.join(" and ");
console.log(joinText);

Output:-

length :- The length is a property of the array it returns the length of the array. Syntax:-

array.length

For example:-

// length property
const fruits = ["apple", "mango",  "banana", "grape", "guava"];
console.log(fruits.length);

Output:-

map() :- The map() method applies the operation on all the values of the array elements. It does not change the original array.

Syntax:-

array.map(function(currentValue, index, arr), thisValue)

For example:-

// map() method
const numbers = [16, 25, 64, 49];
let newArr = numbers.map(Math.sqrt)
console.log(newArr);

Output:-

push() :- The push() method is used to add new elements to the end of the existing array. It changes the length of the original array.

Syntax:-

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

For example:-

// push() method
const fruits = ["apple", "mango",  "banana", "grape", "guava"];
fruits.push("Kiwi");
console.log(fruits);

Output:-

pop() :- The pop() method removes the last element of the array. It changes the original array and returns the removed element.

Syntax:-

array.pop()

For example:-

// pop() method
const fruits = ["apple", "mango",  "banana", "grape", "guava"];
// removed element
console.log('This is the removed element:'+ ' ' + fruits.pop());
// changed array
console.log('This is the changed array:'+ ' ' + fruits);

Output:-

shift() :- The shift() method removes the first element of the array. It changes the original array and returns the removed element.

Syntax:-

array.shift()

For example:-

// shift() method
const fruits = ["apple", "mango",  "banana", "grape", "guava"];
// removed element
console.log('This is the removed element:'+ ' ' + fruits.shift());
// changed array
console.log('This is the changed array:'+ ' ' + fruits);

Output:-

unshift() :- The unshift() method is used to add new elements at beginning of the existing array. It overwrites the original array. Syntax:-

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

For example:-

// unshift() method
const fruits = ["apple", "mango",  "banana", "grape", "guava"];
fruits.unshift("coconut","Pineapple");
console.log(fruits);

Output:-

slice() :- The slice() method returns the sliced array which is selected from the original array by specifying the starting index of the element till the specified element's end index but it does not include the end index. It does not change the original array.

Syntax:-

array.slice(start, end)

For example:-

// slice() method
const fruits = ["apple", "mango",  "banana", "grape", "guava"];
let sliced = fruits.slice(1, 3);
console.log(sliced);

Output:-

splice() :- The splice() method is used to add and remove the array elements. It accepts three parameters, 1st parameter is an index in which you want to add the elements, 2nd parameter is the number of the element which you wants to remove and the last parameter are the elements you want to add. It overwrites the original array.

Syntax:-

array.splice(index, howmany, item1, ....., itemX)

For example:-

// splice() method
const fruits = ["apple", "mango",  "banana", "grape", "guava"];
fruits.splice(2, 0, "coconut", "Kiwi");
console.log(fruits);

Output:-

reverse() :- The reverse() method reverses the elements in an array. It overwrites the original array.

Syntax:-

array.reverse()

For example:-

// reverse() method
const fruits = ["apple", "mango",  "banana", "grape", "guava"];
fruits.reverse();
console.log(fruits);

Output:-

sort() :- The sort() method is used to sort the elements of the array, it sorts the elements as strings in alphabetical and ascending order. It overwrites the original array.

Syntax:-

array.sort(compareFunction)

For example:-

//  sort() method
const fruits = ["apple", "mango",  "banana", "grape", "guava"];
fruits.sort();
console.log(fruits);

Output:-

toString() :- The toString() method converts the array values into the string which is separated by commas. It does not change the original array.

Syntax:-

array.toString()

For example:-

// toString() method
const fruits = ["apple", "mango",  "banana", "grape", "guava"];
let convertToSting = fruits.toString();
console.log(convertToString);

Output:-

valueOf() :- The valueOf() method returns the same as the given array. It does not change the original array.

Syntax:-

array.valueOf()

For example:-

// valueOf() method
const fruits = ["apple", "mango",  "banana", "grape", "guava"];
let myArray = fruits.valueOf();
console.log(myArray);

Output:-

Array and it's Methods in JavaScript

Table of contents

What is Array?

How to access array elements?

How to change the element's value of the array?

Methods of Array