Important Array Methods in JavaScript

Important Array Methods in JavaScript

array.png

What is Array in Javascript?

An array is a special variable, which can hold more than one value at a time. JavaScript arrays are resizable and can contain a mix of different data types.

Why do we need Arrays?

If you have a list of items (a list of roll numbers, for example), storing a roll number in single variables could look like this:

var roll1 = 1;
var roll2 = 2;
var roll3 = 3;
var roll4 = 4;
var roll5 = 5;

It was simple when we had to store just five roll numbers and now let's assume we have to store 5000 roll numbers is it possible to store each in a variable?

Yes it is possible but not a good practice and it is the worst choice The Solution to this problem is Arrays

Array Syntax

The Array declaration syntax in JavaScript is:

var arrayName = [value0, value1, ..., valueN];

The index of an element in the array is the position of that element in the array. For example, in the array [0, 1, 2, 3, 4], the element at index 2 is element 2.

Array Functions

An array function is a function that performs a specific operation on an array there are multiple methods of an array but we are discussing the important ones

1. push

The push() method adds a new element to the end of an array. The return value of the new array length.

let listItems = [1,2,3];
console.log('length of listItems'+listItems.push(4) + ', listItems:'  + listItems);
//length of listItems:4, listItems:[1,2,3,4]

2. pop()

The pop() method is used to remove the last element from an array. It returns the value that has been popped out.

let listItems = [1,2,3];
console.log(listItems.pop()); 
//3

3. shift()

Shifting is similar to popping, working on the first element instead of the last. The shift() method is used to remove the first array element and all elements shifted forward and the method shift returns the first element.

let listItems = [1,2,3];
console.log(listItems.shift());//1

4. unshift()

unshift() is similar to push, adding a new element at the first instead of the last and returning the new array length.

let listItems = [1,2,3];
console.log(listItems.unshift(0));//4
console.log(listItems);//[0,1,2,3]

5. concat()

The concat() method makes a new array by concatenating or merging arrays. It always returns a new array.

let arr1 = [1,2,3];
let arr2 = [4,5,6];
let newArr = arr1.concat(arr2);
console.log(newArr);//[1,2,3,4,5,6]

6. toString()

The toString() method is used to convert an array to a string of array values, separated by commas.

let colors = [1,2,3];
console.log(colors.toString());//1,2,3

7. join()

The join() method is used when you need to make one string out of all the values in the array and it is somewhat similar to toString() but in this we can specify seperator between elements if we want.

let list = [1,2,3];
console.log(list.join("+"));//1+2+3

8. reverse()

The reverse() method is used when we need to reverse the elements in an array. The reverse method works on the same array it doesn't create a new array.

let list =[1,2,3];
console.log(list.reverse());//[3,2,1]

9.sort()

The sort() method is used when we need to place the content inside the array in ascending or descending order and if the content is number it sort by comparing and if content is string it sort according to alphabetically order and if the content is mixed of all datatype then the sorted numbers will be placed first and the string is placed afterwords.

let listItems = ['bag','shoes','dress',1,2];
console.log(listItems.sort());//[1, 2, 'bag', 'dress', 'phone', 'shoes']

10. slice()

The slice() method is used to slice out a piece of an array into a new array. The slice() method returns a shallow copy of a portion of an array into a new array object selected from begin to end (end not included). The original array will not be modified.

let colors = ['red','blue','green','yellow','orange'];
console.log(colors.slice(1,3));//['blue', 'green']

11. fill()

The fill method fills an array with specified values.

let color = ['red', 'blue', 'green'];
color.fill('red');
console.log(color);  // ['red','red','red']

12. includes()

The includes() method determines whether an array includes a certain element, returning true or false as appropriate.

let list = [1,2,3];
console.log(list.includes(2)); //true

13. every()

The .every() method checks each element in the array satisfies the condition or not. if all satisfies then return true otherwise false.

let list = [7,4,6,2,5,1];
console.log(list.every((num) => num < 8));//  true
console.log(list.every((num) => num < 6));//  false

14. some()

The some() method checks element in the array satisfies the condition or not if at least one of them is satisfying then it will return true otherwise it will return false if not a single element satisfies the condition.

let list = [7,4,6,2,5,1];
console.log(list.some((num) => num < 2));//  true
console.log(list.every((num) => num > 8));//  false

15. find()

The find() method returns the value of the first element in the provided array that satisfies the provided function.

let list = [1,2,3,4,5,6];
console.log(arr.find( (num) => num > 4)); //5

16 splice()

This method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at index 1 and adding new element
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "June"]

months.splice(3, 2, 'May');
// replaces 2 element from index 3 with 'May'
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "May"]

Happy learning😊