Skip to main content

Command Palette

Search for a command to run...

Array, its method and implementation.

Updated
7 min read

Array in JavaScript is a data type. It is not a primitive data, it is an object i can contains multiple data type.

It is resizable in size, and can expand according to requirement. It is not associative as array .

Array in js is based on 0-based indexing. It means to access first element is present at 0 index and second at index 1.

There are some in-built function in javaScript to perform operation on it.

Array can be created by: -

const arr = [1,2,3,4,5];
console.log(arr.length); // 5

Constructor() : -

In JavaScript java there is a constructor used to initialise the array.

To initiate the the new array use Array()

const arr = new Array(3); // create an array of size 3;

In case of finding length of array, we got the length 3 of arr, while the element will be emptied.

const arr = new Array(3); 
console.log(arr.length); // 3

The assigned 3 slot will be emptied and no value is assigned to it. They are neither null nor undefine.

const arr = new Array(1,3,4,4);// create a new array having element 1,3,4,4

console.log(arr.length); // 4

Method in JavaScript: -

There are some in-built method in javaScript, such as .joint(), .push(), .pop() etc. Some can mutate the main / original array while some of them just return any thing or used to print the value.

.length : -

In javaScript .length is not a method / function. It is an attribute / property of the array.

const nums = [1,2,4,65];
console.log(nums.length); // 4

The size of the array can be altered using the length property

In case of the assigning the value less the actual length the remaining length value get discarded and get deleted.

const arr = [3,5,8,1,4];
arr.length = 2;
console.log(arr.length); // 2
console.log(arr); // [3,5]

The element of the array arr get deleted after index 1.

In the case if the the value is assigned greater than then it adopt that size and fill the extra index with empty.

const arr = [2,3,4,6];
arr.length = 8;
console.log(arr);//[2, 3, 4, 6, empty × 4]

.push() :-

This method it used to add element at the end of the array. It add element at the last as like as Stack.

const arr = [1,3,4,5,6];
arr.push(2);//[1,3,4,5,6,2] Updated array. 
const arr = [];
arr.push(1,3,4,5);
console.log(arr); // [1,3,4,5];

.pop() : -

.pop() function is used to remove the element from the last.

const arr = [1,3,4,5];
let num = arr.pop();
console.log(num); // 5
console.log(arr); // [1,3,4]

.shift() :-

In javaScript the .shift() function is used to remove the element from the start/ 0- th index and remove the element of that index.

const arr = [4,5,67,8,9];
console.log(arr.shift()); // 4
console.log(arr); // [5,67,8,9]

.unshift() : -

This method is used to add one or more elements at the 0th index of the array.

const arr = [4,5,3,5,3];
arr.unshift(2);
console.log(arr); //[2,4,5,3,5,3];

similarly:

const arr2 = [2,4,5,6];
arr2.unshift(2,4,5);
console.log(arr2); //[2,4,5,2,4,5,6];

.indexOf():-

In JavaScript the .indexOf() function is return the index of the first occurring element of the given array. In case of the given element is not found it return the -1.

It take two value as the input.

arrayName.indexOf(Value,startingIndex);
const arr = [3,4,2,6,2,6,4,8];
console.log(arr.indexOf(4,2)); // 6

Now, it will check the index from the 2nd index. In case of the startingIndex is not given, it consider 0 th index as the default index.

const arr = [1,3,4,5,6,4,6]; 
console.log(arr.indexOf(4)); // 2 
console.log(arr.indexOf(6)); // 4
  • It check the element from left -> right.

  • use === for strictly checking.

  • Return the first occurrence of the element.

  • Return -1 in case of the element is not found.

.at() : -

.at() method is return the value of the given index.

const arr = [2,3,5,2,6];
console.log(arr.at(3)); // 2

In case of the given index number > arr.length, it return the undefine.

const arr2 = [2,5,6,9];
console.log(arr2.at(16)); // undefine

delete :-

delete operator is use to delete the element of given index assigned to it and assign empty at the place of it

const arr2 = [2,5,6,9]; 
delete arr2[2];
console.log(arr2); //[2,5,empty,69]

.concat(): -

.concat() is used to concat / add two or more array and return a new array. It does not mutate any given array. It return a new Array.

const arr1 = [1,2,3,4];
const arr2 = [5,6,7,8];
const arr3 = [8,9,10,11];
console.log(arr1.concate(arr2)); // [1,2,3,4,5,6,7,8]
console.log(arr1.concate(arr2,arr3));//[1,2,3,4,5,6,7,8,9,10,11];

It does not mutate the original array. It add array and return it as a new array.

.map():-

map function is used to iterate over the each element of array and return a new array after applying function to it.

syntax

arr.map((ele) =>{
    return ele * 2;
});

for example ->

const arr = [1,3,4,5,6];
const arr2 = arr.map(ele => ele * 2);
console.log(arr2); //[2,6,8,10,12]

Array.isArray()

If the check the array using typeof , it will return "object" .Since the array is special type of the object it return the object type of the array. It will create confusion between the object. That's why Array.isArray() is used to check the whether the given type is array or not.

const arr = [];
console.log(`The type of the array is arr is ${typeof arr}`);// object
console.log(`the arr is array:?${Array.isArray(arr)}`); //true

.toString() : -

To convert an array to the string use "arrayName.toString()",

const arr = ['R','a','n','j','e','e','t'];
 console.log(arr.toString()); // R,a,n,j,e,e,t

.join():-

.join() is use to join the all the elements of the array. By default, comma seperator are used as seperator. You can assign seperator to seperate the value. It return the value after joining them.

const arr = ['R','a','n','j','e','e','t'];
console.log(arr.join()); // R,a,n,j,e,e,t

when we use seperator,

const arr = ['R','a','n','j','e','e','t'];
console.log(arr.join(""));//Ranjeet 

.filter() : -

In JavaScript .filter() iterate over each element of the array and return a new array based on the given condition. In simple word, it filter the element based on the given condition.

  • It return the new array.

  • It does not modify the current array.

  • The size of the array return by .filter() method is less or equal to the given array.

arr.filter((element) => { 
    return condition; 
});
const arr = [1,2,3,4,5,6,7,8,9];
const arr1 = arr.filter(num => num % 2 == 0);
console.log(arr1); //[2,4,6,8];

.reduce() :-

The .reduce() function iterate over each element of the array and reduce it into single value.

It combine the result into single value;

let num = arr.reduce((accumulator,currentValue) =>{
    return updatedAccumulator;
},initialValue);

for example:

const arr = [23,42,5,35,64];
const totalValue = arr.reduce((acc,ele) =>{
    acc = acc +(ele + ele*0.15);
    return acc;
},0);

this function add the 15 % value to the total value.

.forEach() :-

forEach loop() is an iterative loop which used to iterate over each element of the array. It does not return any thing. Mostly it is used to print and update the value of existing array.

Characteristic of forEach() loop :-

  • forEach() loop cannot be terminated in between. It can only throw an exception or error.

  • It is used to print the value or update the current array.

  • It does not return anything.

  • It can not be terminated using break or return array.

(syntax)
arr.forEach((ele) =>{
    //perform action
});

for example: -

const arr = [4,5,1,6,8,1,7];
arr.forEach((ele)=>{
    console.log(ele);
});

//4,5,1,6,8,1,7
1 views