All the JS Array methods you need to know
Asif Zubayer Palak
Posted on October 9, 2022
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
- Changing Elements in the Array
- Merging Arrays
- Array to String Conversion
- Popping out & pushing in values
- Shifting & Unshifting
- Splice & Slice
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
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"]
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"]
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
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
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
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
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]
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]
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,....,..);
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]
That brings us to the end of the few methods most commonly used in JavaScript
Posted on October 9, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
November 22, 2024