DEV Community

Cover image for All the JS Array methods you need to know
Asif Zubayer Palak
Asif Zubayer Palak

Posted on

2

All the JS Array methods you need to know

A method can be referred to as a shortcut for achieving results that you would otherwise have to write extensive code for.

Arrays have a set of methods as well which can manipulate the array or the data inside it to cater to your needs.


Below are the methods this article covers:

Array Length

This method returns the length of an array.

const pets = ["cat", "hamster", "dog", "rabbit"];
print(pets.length); // 4
console.log(pets[pets.length]); // rabbit
Enter fullscreen mode Exit fullscreen mode

the array.length can be also used to get the last element in the array

Changing Elements in the Array

Index number of an array can be used to address an element in the array and can be used to change elements as well.

const cats = ["molly", "polly", "kolly", "jolly"];
cats[0] = "perry";
console.log(cats); // ["perry", "polly", "kolly", "jolly"]
Enter fullscreen mode Exit fullscreen mode

Merging Arrays

The concat() method creates a new array by merging other arrays.

const list_1 = ["one", "two"];
const list_2 = ["three", "four", "five"];

const lists = list_1.concat(list_2);
console.log(lists); // ["one", "two", "three", "four", "five"]
Enter fullscreen mode Exit fullscreen mode

Array to String Conversion

If you want to convert an array to string, there are two methods that can achieve this:

const numbers = [1,2,3,4,5];
console.log(numbers.toString()); // 1,2,3,4,5
console.log(numbers.join()); // 1,2,3,4,5
Enter fullscreen mode Exit fullscreen mode

The array.join() method can modify the separator as well, such as: if you want the separator to be something else instead of ",", you can pass that symbol as the argument.

const numbers = [1,2,3,4,5];
console.log(numbers.join("-")); // 1-2-3-4-5
Enter fullscreen mode Exit fullscreen mode

Popping out & pushing in values

If you wish to add new elements to the end of the array or remove the last element of the array - using the push and pop methods are the most useful.
To push an element to the end of an array:

const list = [1,2,3,4];
list.push(5); // here 5 is the value
Enter fullscreen mode Exit fullscreen mode

You should also know that array.push(value) also returns the length of the newly updated array, so you can store it in a variable if you wish to use it later.

If you wish to remove the last element from an array:

const list = [1,2,3,4];
list.pop(); // 4 removed from the array
Enter fullscreen mode Exit fullscreen mode

You should also know that array.pop() also returns the element that has been removed, you can store it in a variable if you wish to use it later.

Shifting & Unshifting

Shifting and Unshifting is similar push and pop but mirrored out.

const list = [1,2,3,4];
list.shift(); // [2,3,4]
Enter fullscreen mode Exit fullscreen mode

You should know that array.shift() also returns the element that has been removed, you can store it in a variable if you wish to use it later.

const list = [1,2,3,4];
list.unshift(0); // [0,1,2,3,4] 
Enter fullscreen mode Exit fullscreen mode

You should know that array.unshift() also returns the updated array length, you can store it in a variable if you wish to use it later.

Splice & Slice

Splice

Splice is one of the methods of array which can be used to add, remove, replace elements.

const list = [1,2,3,4];
list.splice(x, y, value_1, value_2,....,..);
Enter fullscreen mode Exit fullscreen mode

x defines the position where new elements should be added
y defines how many elements should be removed - to remove an element using array.splice(index of element to remove, number of elements to remove)

Slice

Slice creates a new array with the elements from an existing array starting from a target index

const list = [1,2,3,4];
const newList = list.slice(2);
console.log(newList); // [3,4]
Enter fullscreen mode Exit fullscreen mode

That brings us to the end of the few methods most commonly used in JavaScript

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (0)

SurveyJS custom survey software

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more

Best practices for optimal infrastructure performance with Magento

Running a Magento store? Struggling with performance bottlenecks? Join us and get actionable insights and real-world strategies to keep your store fast and reliable.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️