DEV Community

Cover image for 🤸‍♂️ JavaScript Array Methods Simplified.
Ephraim Duncan
Ephraim Duncan

Posted on

28 10

🤸‍♂️ JavaScript Array Methods Simplified.

Probably anyone reading this knows what an array is but let's revise a bit.

What is a Array?

Simply, an array is a variable (a very special one) that holds more than one value. So you can keep an unlimited number of values in it and it is much helpful and easier to work with than declaring and assigning each variable all over again.

Array's can be created by [] with the elements seperated by , or if you want to be nerdy, you can use new Array().

Let's get to why we are here. Array Methods.

* .concat()

The concat method is used to add two arrays as one.

let planets = ["Mars","Uranus","Venus"]
let newPlanet = ["Proxima Centauri B"]

planets.concat(newPlanet) 
// ["Mars","Uranus","Venus","Proxima Centauri B"]
Enter fullscreen mode Exit fullscreen mode

* .join()

The join method joins the elements of an array by a given string which it takes as the argument and returns the string value.

let numbers = [1,2,3,4]
numbers.join(".")
// "1.2.3.4"
Enter fullscreen mode Exit fullscreen mode

* .slice()

The slice() method returns the selected elements in an array, as a new array object without changing the original array. It selects the elements starting at the given start argument, and ends at, but does not include, the given end argument.

let numbers = [1,2,3,4,5,6]
numbers.slice(2,4)
// [3,4]

console.log(numbers) // The original does not change
// [1,2,3,4,5,6]
Enter fullscreen mode Exit fullscreen mode

* .indexOf()

It returns the index value of an element in an array.

let alphas = ["a","b","c"]
alphas.indexOf("c")
// 2

Enter fullscreen mode Exit fullscreen mode

* .lastIndexOf()

It returns the last index value of an element in an array if the same element repeats itself more than one.

let alphas = ["a","b","b","b","c"]
alphas.lastIndexOf("b")
// 3
Enter fullscreen mode Exit fullscreen mode

* .reverse()

It returns the array reversed.

let alphas = ["a","b","c"]
alphas.reverse()
// ["c","b"',"a"]
Enter fullscreen mode Exit fullscreen mode

* .sort()

The sort method is used to sort elements of the array alphabetically.

let alphas = ["d","y","c"]
let digits = [23,5,11]
alphas.sort()
// ["c","d","y"]

digits.sort()
// [11,23,5]
Enter fullscreen mode Exit fullscreen mode

* .shift()

The shift method removes the first element of the array shifts the values at consecutive indexes down, then returns the removed value.

const digits = [1,2,3,4]

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

* .unshift()

The unshift method adds new items to the beginning of an array and returns the new length.

const digits = [1,2,3,4]

const unshiftArray = digits.unshift("a")
// digits = ["a",1,2,3,4]
// unshiftArray = 5
Enter fullscreen mode Exit fullscreen mode

* .pop()

The pop method removes the last element of an array and returns the element removed.

const digits = [1,2,3,4]

const popArray = digits.pop()
// digits = [1,2,3]
// popArray= 1
Enter fullscreen mode Exit fullscreen mode

* .push()

The opposite of the unshift method. The push method adds new items to the end of an array and returns the new length.

const digits = [1,2,3,4]

const pushArray = digits.push("a")
// digits = [1,2,3,4,"a"]
// pushArray = 5
Enter fullscreen mode Exit fullscreen mode

* .splice()

The splice method replaces the element in an array from one position to another and returns the element that was replaced.

const digits = [1,2,3,4]

const spliceArray = digits.splice(1,2,"a")
// digits = [1,"a",4]
// spliceArray = [2,3]
Enter fullscreen mode Exit fullscreen mode

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

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

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay