Let's understand the basic meaning of an array.

Array

An array is a type of data structure that contains different items with different datatypes. All the items in the array are stored at contiguous memory locations.It uses indexing which means each item has some index value with it.

The index value starts from 0 in the array.

Syntax

let arrayname=[item1,item2,......,so on];
console.log(arrayname);

"let" is a keyword in javascript that is used to declare the variable.

Example

let arr=[1,2,3,"Alpha",3.5,true];
console.log(arr);

In this example, An array contains items with different data types i.e. numeric, string, bool and decimal.

Array Methods

An array in JavaScript has a lot of methods but here we will explain the bare minimum of them.

(i) concat() :-

concat word comes from the word "concatenate" which means to merge two or more items and make them one without making any changes in the original array.

Syntax

let array1 = [item1,item2,item3,item4,....so on];
let array2 = [item5,item6,item7,.....so on];
console.log(array1.concat(array2));

// Or concatenate more than 2 arrays

let array1 = [item1,item2,item3,item4,....so on];
let array2 = [item5,item6,item7,.....so on];
let array3 = [item8,item9,item10,....so on];
console.log(array1.concat(array2,array3 ,.....,arrayN));

we can concatenate two or more two arrays within one array.

Example 1

Concatenate two arrays.

let arr=["C","C++","Java"];
let arr2=["JavaScript","HTML","CSS"];
console.log(arr);
console.log(arr2)
console.log(arr.concat(arr2));

Output:-

Example 2

Concatenate more than two arrays.

let arr=["C","C++","Java"];
let arr2=["JavaScript","HTML","CSS"];
let arr3=["ReactJS","NodeJS"];
console.log(arr);
console.log(arr2)
console.log(arr3);
console.log(arr.concat(arr2,arr3));

Output:-

(ii) toString() :-

It is an array method that is used to convert the array items into a string and it will separate the array items by comma (,).

Syntax

let array_name = [item1,item2,item3,item4,....so on];
console.log(array_name.toString());

Example

let arr=["C","C++","Java","JavaScript","HTML","CSS"];
console.log(arr);    //[elements in square brackets are array]
console.log(arr.toString()); //element without square brackets are string

Output:-

Note:- We can check the type of element by using the typeof() method.

But remember, it is not an array method.

typeof():-

typeof() method will take the variable name as a parameter and give the type of that variable as an output or result.

Syntax

let variable_name = value;
console.log(typeof(variable_name));

Example

let arr=[1,2,3,4,5];
console.log(arr);
console.log(typeof(arr))
let str=arr.toString();
console.log(str);
console.log(typeof(str));

Output :-

(iii) join() :-

join() is also an array method that converts an array into a string same as in the toString() method.

But additionally, we can specify the separator of our choice.

Syntax

let array_name = [item1,item2,item3,item4,....so on];
console.log(arr.join());       //
console.log(arr.join(" "));   //seprate with whitespace
console.log(arr.join("Seprator")); //Seprator Symbol will show between each element

Example

let arr=["C","C++","Java","JavaScript","HTML","CSS"];
console.log(arr);
console.log(arr.join());
console.log(arr.join(" "));
console.log(arr.join("*"));

Output:-

(iv) pop() :-

The pop() method will remove the element from the last index of an array.

Syntax

let array_name = [item1,item2,item3,item4,....,itemN];
console.log(array_name.pop());

Example

let arr=["C","C++","Java","JavaScript","HTML","CSS"];
let popvar=arr.pop();
console.log("The item that has been deleted is : " + popvar);
console.log("Array after deletion : " + arr);

Output:-

(v) push() :-

push() method is used to add an element to an array. It will push the element to the last index of the array.

Syntax

let array_name = [item1,item2,item3,item4,....,itemN];
console.log(array_name.push("element")); //element is a value to be added in an array list

Example

let arr=["C","C++","Java","JavaScript","HTML","CSS"];
let pushvar=arr.push("Tailwind CSS");  //pushvar variable return the new length of the array
console.log("The Length of an array element after addition is : " + pushvar);
console.log("Array List after adding an element : " + arr);

Output:-

Now, What if we want to add or remove the element from the starting index ???

The answer is "There are some methods to do so."; i.e. shift() and unshift().

(vi) shift() :-

shift() method is used to delete the element from the starting or first index of an array.

Syntax

let array_name = [item1,item2,item3,item4,....,itemN];
array_name.shift();  //delete the first item i.e. item1
console.log(array_name);

Example

let arr=["C","C++","Java","JavaScript","HTML","CSS"];
let shiftvar = arr.shift();
console.log("The item that has been deleted is : " + shiftvar);
console.log("Array after deletion : " + arr);

Output: -

(vii) unshift() :-

unshift() method is used to add the element from the starting or first index of an array.

Syntax

let array_name = [item1,item2,item3,item4,....,itemN];
array_name.unshift(element);  //add the item at first index 
console.log(array_name);

Example

let arr=["C","C++","Java","JavaScript","HTML","CSS"];
let unshiftvar = arr.unshift("ReactJS");
console.log("Array Length after adding one element : " + unshiftvar);
let unshiftvar2=arr.unshift("NodeJS");
console.log("Array Length after adding second element : " + unshiftvar2);
console.log("Array list after adding elements : " + arr);

Output:-

(viii) at() :-

at() is a method that will take an integer it doesn’t get affected whether it’s a positive integer or negative integer. An integer will be the index number. It will access the element of the given index from the array.

Syntax

let array_name = [item1,item2,item3,item4,....,itemN];
console.log(array_name.at(index_value));      //returns the value present at that index

Example

let arr=["C","C++","Java","JavaScript","HTML","CSS"];
console.log(arr.at(2));          
console.log(arr.at(-2));
//length of array is 6 but below index number is greater than the array length
console.log(arr.at(10));   // results undefined

NOTE:- if the index value is more than the array length then, the result will be undefined.

Output:-

We can also access the array element and change its value by using an index number.

let arr=["C","C++","CSS","Java","JavaScript","HTML"];
console.log("Before changing the value is " + arr[2])
arr[2]="TailwindCSS";
console.log("After changing the value is : " + arr[2]);

Output:-

(ix) copyWithin() :-

copyWithin() is a method that is used to copy array elements at a different location in the same array within a given range.

Syntax

let array_name = [item1,item2,item3,item4,....,itemN];
array_name.copyWithin(target_values,start-value,end-value);

// Or 
array_name.copyWithin(target_values);  //start and end is optional

Example

let arr=["C","C++","Java","JavaScript","HTML","CSS"];
arr.copyWithin(5);    //by default, first element get copied at target
console.log(arr);
arr.copyWithin(1,3,5) ; //change the element at first index with element present at index 3 till 5 i.e. 
console.log(arr);

Note: - end value should not be less than the start value otherwise it will copy nothing for the end value.

Output:-

Note: - Original array will get modified after implementing copyWithin() method.

(x) fill() :-

fill() is a method that is used to change the value of an element in an array at a specified index or in a range. It works somewhat like copywithin() method. But the difference is, here we provide the value explicitly to get copied in the array.

Syntax

let array_name = [item1,item2,item3,item4,....,itemN];
console.log(array_name.fill(value,start_index,end_index)); //change the values at start-index till end-index.
or
console.log(array_name.fill(value)) //change all the values in the array list.

or
console.log(array_name.fill(value,start_index); //change the value from start index till the end of an array.

Example

let arr=["C","C++","Java","JavaScript","HTML","CSS"];
console.log(arr.fill("Tailwind"));
console.log(arr.fill("ReactJs",1,3));  
console.log(arr.fill("NodeJS",2));

Output: -

Note: - Original array will get modified after implementing the fill() method.

(xi) reverse() :-

reverse() is a method that reverses the whole array which means the last element of an array becomes the first element, the second last element becomes the second element of an array and so on.

Syntax

let array_name = [item1,item2,item3,item4,....,itemN];
console.log(array_name.reverse());

Example

let arr=["C","C++","Java","JavaScript","HTML","CSS"];
console.log("Original array before reverse is : " + arr);
console.log(arr.reverse());
console.log("Original array after reverse is : " + arr);

Output: -

Note: - Original array will get modified after implementing the reverse() method.

(xii) slice() :-

slice() method is used to extract the element from the original array and make a copy of that extracted element into a new array. It will not change the original array.

Syntax

let array_name = [item1,item2,item3,item4,....,itemN];
console.log(array_name.slice());
// or
console.log(array_name.slice(start,end)); //end value is excluded

Example

let arr=["C","C++","Java","JavaScript","HTML","CSS","TailwindCSS","ReactJS"];
console.log(arr.slice());
console.log(arr.slice(3));
console.log(arr.slice(3,5));
console.log(arr.slice(4,-1));

Output: -

(xiii) splice() :-

splice() method can add new elements to the array or can replace the existing new ones.

Syntax

let array_name = [item1,item2,item3,item4,....,itemN];
console.log(array_name.splice(start_value));

//or
console.log(array_name.splice(start_value,delete_count));
//or
console.log(array_name.splice(start_value,delete_count,new_value));

Example

let arr=["C","C++","Java","HTML","CSS","TailwindCSS","ReactJS"];
console.log(arr.splice(5));    //start value
//it will start extracting from index 5 until end of an array
console.log("Array List after giving the start value : " + arr);

console.log(arr.slice(3,5));   //start and delete count
//it will start extracting from index 3 until index 5 i.e 2 elements
console.log("Array List after giving the start value and deletecount : " + arr);

// In below example 0 items will get deleted 
console.log(arr.splice(1,0,"JavaScript")); //start,delete and new value
//it will add new element at index 1
console.log("Array List after giving the start value, deletecount and new value : " + arr);

//// In below example 4 items will get deleted
console.log(arr.splice(1,4,"JavaScript")); //start,delete and new value
//it will delete 4 elements from index 1 till index 4 then will add new element at index 1 
console.log("Array List after giving the start value, deletecount and new value : " + arr);

Output: -

In the above example, arr.splice() will return the extracted elements from the array.

start means the starting index value from where the element starts getting extracted.

Delete count means how many items should get deleted from the array.

End means until where the method will get implemented.

Summary

In this article, we learned about the basic methods of an array in JavaScript. we have gone through the syntax and examples of all these methods. I also mentioned some important notes that need to remember while implementing these methods. These are not the only methods of an array there are some more methods present. I will try to cover those methods in the future.

Hope it was Helpful!

HaPPy LeArning! :)