Javascript Array Methods

Photo by Shane on Unsplash

First What is an Array?

Arrays are objects (so they are not primitive types) which are useful to store information such as numbers, strings, booleans, etc.

You can declare an Array as:

let myArray = [];

Values are separated by comas for example:

const myArray = [“value1”, 2, “3”, true];

Basic information about Arrays

You can access to the content of the array with the index number, but you have to know that the index starts at 0, so in the following example you can access 0, 1 or 2.

let myCollection = [“one”, “two”, “three”];

myCollection[0];

UTPUTS : “one”

To access the last item of the array use -1 as argument.

Length Property

Is the number of items into the array for example 3 in this case, the syntax is the following:

myCollection.length;

RETURNS: 3

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:

When the sort() function compares two values, it sends the values to the compare function, and sorts the values according to the returned (negative, zero, positive) value.

If the result is negative a is sorted before b.

If the result is positive b is sorted before a.

If the result is 0 no changes are done with the sort order of the two values.

These wonderful knowledge was verted into our class WevDev at Cornerstone ICCC with the teacher Francois Polo. Thanks for sharing this invaluable information sensei.