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.

javascript web-development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire Web Developer

Looking for an attractive & user-friendly web developer? HourlyDeveloper.io, a leading web, and mobile app development company, offers web developers for hire through flexible engagement models. You can **[Hire Web...

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...

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.

How long does it take to develop/build an app?

This article covers A-Z about the mobile and web app development process and answers your question on how long does it take to develop/build an app.