What things you can do with JavaScript Arrays
By: Kuljeet Singh
Tags: Development, Array Methods, Programming, JavaScript, Arrays

So, in this article I’m going to take you deep dive into what operations you can perform with the JavaScript Arrays and these operations are also helpful in your day-to-day programming. So let’s start.

Here I’ve divided all the operations into 5 parts:-

Add or Remove

Search

Transforming

Iterate

Additional

* Add or Remove Items from Array

push()

push method adds the item to the end of the array & changes the length of the array and returns the new length.

const jsArray = ["Sam", "Mark", 12, false];

jsArray.push("Chris"); console.log('jsArray...', jsArray);

// jsArray... ["Sam", "Mark", 12, false, "Chris"]

pop()

pop method removes the last item from an array and returns the removed item.

const jsArray = ["Sam", "Mark", 12, false, "Chris"];

jsArray.pop();

// removes "Chris"

shift()

shift method removes the first item from an array and returns the removed item.

const jsArray = ["Sam", "Mark", 12, false, "Chris"];

jsArray.shift();

// removes "Sam"

unshift()

unshift method adds new item to the beginning of the array and returns the new array length. It modifies the original array.

const jsArray = ["Sam", "Mark", 12, false];

jsArray.unshift("Chris"); console.log('jsArray...', jsArray);

// jsArray... ["Chris", "Sam", "Mark", 12, false]

slice()

slice method returns the new array of selected items. It accepts two arguments start(by default 0) and end(by default array.length-1) and does not include the end value item.

slice(start(optional),end(optional));

const jsArray = ["Sam", "Mark", 12, false];

const jsArray1 = jsArray.slice(1,3) console.log('jsArray1...', jsArray1);

// jsArray1... ["Mark", 12]

splice()

splice method adds or removes the array items. It accepts three arguments index, deleteCount and items.

splice(index, deletCount(optional), …items);

const jsArray = ["Sam", "Mark", 12, false];

jsArray.splice(2,0, "Chris");

// add 1 item at position 2 console.log('jsArray...', jsArray);

// jsArray... ["Sam", "Mark", "Chris", 12, false]

concat()

concat method concatenate or joins two or more arrays and returns new concatenated array.

const jsArray = ["Sam", "Mark", 12, false];

const jsArray1 = ["Chris"];

const finalJsArray = jsArray.concat(jsArray1); console.log('finalJsArray...', finalJsArray);

// finalJsArray... ["Sam", "Mark", 12, false, "Chris"]

* Searching in an Array

indexOf()

indexOf method searches over an array for the specified item and returns its position. It accepts two arguments item and start(by default 0). It returns -1 if item is not found.

indexOf(item, start(optional));

const jsArray = ["Sam", "Mark", 12, false];

jsArray.indexOf("Mark");

// returns 1

lastIndexOf

lastIndexOf method searches over an array and returns the last index or position for specified item. It accepts two arguments item and start(by default array.length -1). It returns -1 if item is not found.

lastIndexOf(item, start(optional));

const jsArray = ["Sam", "Mark", 12, "Mark", false];

jsArray.lastIndexOf("Mark");

// returns 3

If you want to search from beginning to end then use indexOf() method and if you want to search from end to beginning of the array then use lastIndexOf() method.

includes()

includes method returns true if an array contains the specified item else return false. It accepts two arguments item and start(by default 0).

includes(item, start(optional));

const jsArray = ["Sam", "Mark", 12, false];

jsArray.includes("Mark");

// returns true

* Transforming the Array

map()

map method creates a new array with the results of calling a function for every array item. It accepts two arguments callbackFunction(item, index(optional), array(optional)) and thisArgument.

map(callbackFunction(item, index(optional), array(optional)){…}, thisArgument);

const jsArray = ["Sam", "Mark", 12, false];

const jsArray1 = jsArray.map(item => item); console.log('jsArray1...', jsArray1);

// 'jsArray1...' [ 'Sam', 'Mark', 12, false ]

sort()

sort method sorts the items of the array. The sort order can be either alphabetic or numeric, and either ascending or descending. sort() method by default sorts the values as strings in alphabetical and ascending order. It accepts one argument i.e compareFunction.

sort(compareFunction(optional){…});

const jsArray = ["Sam", "Mark", 12, false];

jsArray.sort(); console.log('jsArray...', jsArray);

// 'jsArray...' [ 12, 'Mark', 'Sam', false ]

reverse()

reverse method reverse the order of the items in an array.

array.reverse();

const jsArray = ["Sam", "Mark", 12, false];

jsArray.reverse(); console.log('jsArray...', jsArray);

// 'jsArray...' [ false, 12, 'Mark', 'Sam' ]

* Iterate over an Array

forEach()

forEach method calls a function once for each item in an array. It accepts two arguments callbackFunction(item, index(optional), array(optional)) and thisArgument.

forEach(function(item, index(optional), array(optional)){…},thisArgument);

const testArray = ["Sam", "Mark", 12, false];

testArray.forEach((item) => {

console.log(item);

}) // 'Sam'

// 'Mark'

// 12

// false

* Additional

Array.isArray()

Array.isArray method returns true if an object is an array or an instance of array else returns false.

Array.isArray(arrayObject);

const testArray = ["Sam", "Mark", 12, false];

Array.isArray(testArray);

// return true;

Sources:-

Conclusion

We have now learned what operations we can perform with the JavaScript Arrays. If you feel inspired to build something with these methods. Kudos to you!

🌟 Twitter | 👩🏻‍💻 kuljeet-singh| 🌟 Instagram | 🔗 LinkedIn | 💻 Github