Introduction

Arrays are usually the first data structure we as developers encounter when we start programming, they are fairly easy to understand and manipulate, they play a big part in a developers journey, and more times than not, you would encounter a coding challenge that would require you know how to manipulate an array, it would save you a lot of time if you knew the inbuilt functions that arrays have in different languages.

I would cover:

• push()
• pop()
• shift()
• unshift()
• delete()
• reverse()
• splice()
• slice()
• concat()
• For...of These are just a few array methods in javascript, some methods appear in other languages but not all.

push(value)

The push method adds an element to the end of an array.

let arr = [1, 2, 3, 4, 5]
console.log(arr)
arr.push(6)
console.log(arr)

//result: [1, 2, 3, 4, 5, 6]

pop()

The pop method removes an element from the end of an array, it doesn't accept any parameter

let arr = [1, 2, 3, 4, 5]
console.log(arr)
arr.pop()
console.log(arr)

//result: [1, 2, 3, 4]

shift()

The shift method returns and removes an element from the beginning of an array. You can store the element being removed with the shift() method because it also returns the element.

let arr = [1, 2, 3, 4, 5]

let elem = arr.shift()
console.log("newArr", arr)
console.log("removed element", elem)

//output: newArr, [2, 3, 4, 5]
//removed element, 1

unshift(value)

Inserts the given value at the beginning of an array.

let arr = [1, 2, 3, 4, 5]
arr.unshift(9)
console.log(arr)

//output: [9, 1, 2, 3, 4, 5]

delete

The delete keyword can be used to delete an element from an array at a particular index. The problem with this approach however is that it leaves undefined holes in the array, which means it deletes the value but not the index.

let arr = [1, 2, 3, 4, 5]
delete arr[2]
console.log(arr);
//output: [1, 2, empty, 4, 5]

reverse()

I’ve actually used this function to solve a leetcode “reverse an array” algorithm. It does just what it says, reverses an array, it returns a new reversed array. I didn’t have to start creating a new array and traversing through it till I got to the last one, or looping through the array, popping the last element, and then saving that in a new array. This goes straight to the point and is one simple line of code.

let arr = [1, 2, 3, 4, 5]
arr.reverse()
console.log(arr)
//output: [5, 4, 3, 2, 1]

splice()

When I hear "splice" I think about splicing DNA, which typically means to add/remove things from your genetic material( genetic code 🌚 ). The Array Splice() function in javascript does pretty much the same thing, its a function that you use when you want to add or remove things from a particular index. The first parameter of the splice() function is the index where you want to add/remove elements. The Second parameter is for the number of elements to be removed, use 0 if you don’t want to delete any element but you want to add. The rest parameters are the things to be added.

//To add new elements without deleting
let arr = [1, 2, 3, 4, 5];
arr.splice(4, 0, "five");
console.log(arr);
//output: [1, 2, 3, 4, "five", 5]

let arr2 = [1, 2, 3, 4, 5];
//to remove elements 
arr2.splice(1, 2);
//start at index 1, and delete 2 elements including the starting point
console.log(arr2)
//output: [1, 4, 5]

let arr3 = [1, 2, 3, 4, 5];
//to remove and add elements simultenously
arr3.splice(1, 3, "two", "three", "four");
//start at index 1, and delete 3 elements including the starting point and add 3 new elements
console.log(arr2)
//output: [1, "two", "three", "four", 5]

NB: The splice function also returns the values being removed from the original array.

//For example, if you want to store those values in a different variable.
let arr = [1, 2, 3, 4, 5]
let newarr = arr.splice(1, 3, "two", "three", "four");

console.log(newarr);
//output: [2, 3, 4]

console.log(arr)
//output: [1, "two", "three", "four", 5]

slice()

I meannnnn, this should be pretty easy to explain and understand because, when you take a slice of cake you’re taking something out of a whole right? So the slice method is used to capture or get a part of an array. The first parameter is the starting point, i.e the index where you would like to start slicing your cake(array), the second param is the index number up to which the new array should be sliced out. The new array that would be returned would not include the second parameter. So to re-iterate, your slice of cake would include the first parameter up until (but not including) the second parameter. The slice method does not mutate the original array, it captures and returns the defined section of the original array.

//slicing with only one parameter which is the starting point would capture everything from that point to the end of the array.
let arr = [1, 2, 3, 4, 5, 6, 7, 8]
let newArr = arr.slice(3);
console.log(newArr);
//output: [4, 5, 6, 7, 8]

//slicing with two parameters
let newArr2 = arr.slice(2, 5)
console.log(newArr2);
//output: [3, 4, 5]

Concat()

To concatenate means to add things together. The concat() function “adds” arrays and makes them one. You can concatenate any number of arrays, just specify them as parameters to the concat() function.

let arr = [1, 2, 3, 4]
let arr2 = ["five", "six", "seven", "eight"]

let newArr = arr.concat(arr2);
console.log(newArr)
//output: [1, 2, 3, 4, "five", "six", "seven", "eight"]

//adding more than 2 arrays.
newArr = newArr.concat([9, "ten", 11], [12, 13, 14, 15])
console.log(newArr)
//output: [1, 2, 3, 4, "five", "six", "seven", "eight", 9, "ten", 11, 12, 13, 14, 15]

For…of

The For of statement creates a very clean way to loop through an array.

let arr = [1, 2, 3, 4, "five", "six", "seven"]
for (element of arr){
    console.log(element)
}
//output: 
1
2
3
4
five
six
seven

Conclusion

These are just a few of the very important methods arrays offer, to learn about the rest check out Mozilla Web Docs