10 Most used Array methods in Javascript

10 Most used Array methods in Javascript

10 Most used Array methods in Javascript - In this blog post i'm going to walk you through the most commonly used array JavaScript methods.

10 Most used Array methods in Javascript - In this blog post i'm going to walk you through the most commonly used array JavaScript methods.

Which is going to be helpful in your JavaScript journey, i would also try to keep it nice and simple, so lets dive right in;

1. "push();"

This works at the ending of an array,

which helps in adding elements to the end of an array.

Notice that the letter 'd' has been pushed(added) to the end of the array,> and it makes permanent change to the array.

let arr = ['a', 'b', 'c'];
console.log(arr.push('d'));//returns the new value of the array (4)
console.log(arr); //returns ['a', 'b', 'c', 'd']

2. The "pop();"

Like the "push" method mentioned above.

the "pop" method also works at the ending of an array,

which helps in removing elements at the end of the array, and returns the element.

Notice the the letter 'd' has been popped(removed) out of the end of the array,> and it makes permanent change to the array.

let arr =  ['a', 'b', 'c', 'd'];
console.log(arr.pop()); //returns 'd'
console.log(arr); //returns  ['a', 'b', 'c']

3. "shift();"

This works at the beginning of an array,

which helps in removing elements from the beginning of the array, and returns the element.

Notice the the letter 'a' has been shifted(removed) out of the end of the array,> and it makes permanent change to the array.

let arr =  ['a', 'b', 'c', 'd'];
console.log(arr.shift()); //returns 'a'
console.log(arr); //returns  ['b', 'c', 'd']

4. "unshift();"

You guessed right, this is the opposite of the "shift()" method,

it also works at the beginning of an array, and helps in adding elements to the beginning an array,

and returns the length of the array.

Notice that the letter 'a' has been unshifted(added) to the brginning of the array,> and it makes permanent change to the array.

let arr = ['b', 'c'];
console.log(arr.unshift('a'));//returns the new value of the array (4)
console.log(arr); //returns ['a', 'b', 'c']

5. "concat();"

This helps to concatenate(join/link) two arrays together.

Notice that the first array(arr) and the second array(arr2) has been concatenated(joined) together,> and moreover the "concat" method does not make any change to the array.

let arr =  ['a', 'b', 'c', 'd']; //first array
let arr2 = [true, false, true]; //second array
console.log(arr.concat(arr2));//returns ["a", "b", "c", "d", true, false, true]
console.log(arr);//returns ['a', 'b', 'c', 'd']
console.log(arr2);//returns[true, false, true]

6. "join();"

This joins all the elements in an array to create a string, and does not affect or modify the array.

Notice that the "join" method takes an element and outputs it inbetween the strings.

let arr =  ['a', 'b', 'c', 'd'];
console.log(arr.join(''));//returns 'abcd'
console.log(arr.join('-'));//returns 'a-b-c-d'
console.log(arr)//returns ['a', 'b', 'c', 'd']

7. "reverse();"

This basically takes in an array, and reverses it.

Notice that it makes a permanent change to the array.

let arr =  ['a', 'b', 'c', 'd'];
console.log(arr.reverse());//returns ['d', 'c', 'b', 'a']
console.log(arr);//returns ['d', 'c', 'b', 'a']

8. "sort();"

This basically helps in sorting arrays to order, however causing permanent change to the array.

Notice that it sorts the numbers before the alphabets.

let arr = [5, 3, 'c', 'b', 'a', 4, 1, 2];
console.log(arr.sort();)//returns [1, 2, 3, 4, 5, 'a', 'b', 'c']
console.log(arr);//returns [1, 2, 3, 4, 5, 'a', 'b', 'c']

9. "slice();"

This basically targets an array and returns the targeted array,

and the original array remains unchanged.

Notice that the value is returned from the first value((1)=b) of the array and one element aback from the second value ((2)=b) of the array,> and the original array remains unchanged.

let arr =  ['a', 'b', 'c', 'd'];
console.log(arr.slice(1,2));//returns ['b']

10 "splice();"

Just like the "slice();" method, this also targets an array and returns the targeted array,

moreover it causes a permanent change in the array.

let arr = [1, 2, 3, 4, 5, 'a', 'b', 'c'];
console.log(arr.splice(5, 3));//returns ['a', 'b', 'c']
console.log(arr)//returns [1, 2, 3, 4, 5]

Notice that the value is returned from the first value((5)='a') which states the element to start from,> and the second value(3) which states the number of elements to be removed from the array.

let arr = [1, 2, 3, 4, 5, 'a', 'b', 'c'];
console.log(arr.splice(5, 3, 'replaced'));//returns ['a', 'b', 'c']
console.log(arr)//returns [1, 2, 3, 4, 5, 'replaced']

Notice that you can also replace a spliced element with another element by adding the element in the third argument.

Thats the 10 most common/used array methods i think all javascript programmers must learn, if you have any to add feel free to add below.

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Hire Dedicated eCommerce Web Developers | Top eCommerce Web Designers

Build your eCommerce project by hiring our expert eCommerce Website developers. Our Dedicated Web Designers develop powerful & robust website in a short span of time.

Mobile App Development Company India | Ecommerce Web Development Company India

Best Mobile App Development Company India, WebClues Global is one of the leading web and mobile app development company. Our team offers complete IT solutions including Cross-Platform App Development, CMS & E-Commerce, and UI/UX Design.

For World Class Web Development Services in India visit RB Genie

Do you want excellent and world class web development services for your valuable projects? Contact **RB Genie **now, we have more than 8 years experienced team of web developers, which specializes in overall web design and website development...