Javascript Array Methods
Tags: Arrays, Javascript Tips, Methods, Beginner

Without further ado, lets talk about METHODS

PUSH() — adds at the end of the collection and returns the number of items in the array.

myCollection.push(“four”);

RETURNS: 4

OUTPUT: myCollection = [“one”, “two”, “three”, “four”];

POP() — removes last item of the collection, also returns that last item removed.

myCollection.pop();

RETURNS: “four”

SHIFT ()— removes the first item (or at index 0) of the array, as the previous method, it returns the item.

myCollection.shift();

returns: “one”

UNSHIFT() — Adds at the beginning of the array and returns the total of items in the array, not the last index.

myCollection.unshift(“1”);

RETURNS: 3

CONCAT() — Used to merge, requires two arguments, the first is the array used as a base and the second can be a value or another array, the syntax is the following:

myArray.concat(argument);

Now lets merge two arrays:

myCollection.concat([“four”, “five”, “six”]);

RETURNS: (6) [“1”, “two”, “three”, “four”, “five”, “six”]

But wait! as you saw, you can merge more than one string, it means that you can merge more than two arrays?

From cero:

const myCollection = [“1”, “two”, “three”, “four”, “five”, “six”];

const array1 = [7, 8, 9];

const array2 = [ “diez”, “once”, “doce”];

myCollection.concat(array1, array2);

RETURNS : (12) [“1”, “two”, “three”, “four”, “five”, “six”, 7, 8, 9, “diez”, “once”, “doce”]

Important thing here is that it only displays the total, so you would need to store it into a variable, can be the same in case you declared as let or var, but should be a new variable in case you declared a (constant).

INCLUDES() — This method searches for a value, returns a boolean, for example:

myCollection.includes(“four”);

RETURNS: true

SLICE() — This method extracts a piece of an array into a new array, you can use one or two arguments to start and end, syntax is the following:

array.slice(val, val)

But you can use only one argument as well:

let cities = [“Cancun”, “Toluca”, “San Miguel de Allende”, “Puebla”, “Mex City”];

cities.slice(2);

RETURNS: (3) [“San Miguel de Allende”, “Puebla”, “Mex City”]

Using two arguments:

cities.slice(2, 4);

RETURNS: (2) [“San Miguel de Allende”, “Puebla”]

SPLICE() — This bad boy inserts and / or replaces the value you select with tho first arguments, this is the syntax:

array.splice(index, howmany, item1, ….., itemX);

Here an example only inserting:

let cities = [“Cancun”, “Toluca”, “San Miguel de Allende”, “Puebla”, “Mexico City”];

cities.splice(2, 0, “Morelia”, “Acapulco”);

RETURNS: []

Now replacing, remember to specify first index and then how many items it should remove:

cities.splice(3, 2, “Veracruz”, “Taxco”);

RETURNS the number of values removed and values: (2) [“Acapulco”, “San Miguel de Allende”]

Now your variable if you console.log it contains:

(7) [“Cancun”, “Toluca”, “Morelia”, “Veracruz”, “Taxco”, “Puebla”, “Mexico City”]

You can use this method to delete one or more values if you don’t enter items to replace, for example:

let numbers = [‘one’, ‘two’, ‘three’, ‘four’, ‘five’, ‘six’, ‘seven’];



numbers.splice(2, 2);

RETURNS: (2) [“three”, “four”]

Now numbers is:

(5) [“one”, “two”, “five”, “six”, “seven”]

REVERSE() — Returns an array in reverse order

cities.reverse()

RETURNS: (7) [“Mexico City”, “Puebla”, “Taxco”, “Veracruz”, “Morelia”, “Toluca”, “Cancun”]

TOSTRING() — Returns an array with all the elements separated by comas without changing the original array.

cities.toString()

RETURNS: “Cancun”, “Toluca”, “Morelia”, “Veracruz”, “Taxco”, “Puebla”, “Mexico City”

SORT() — Sorts based in unicode (alphabetically), convert everything into a string, the output is interesting because it works very good for strings but for numbers you have to define parameters:, otherwise as it converts to string, it would take the first “letter” of the string to define the order.

This is the parameters you can use to sort in ascending and descending:

myArray.sort(function(a, b){return a — b});

myArray.sort(function(a, b){return b— a});

What does this parameters mean? according to w2schools: