Javascript Arrays

On this Post we will see how to declare an array and assign values to it and how to manipulate it in different ways.

Content:

• Delcaration and assignation
• Length property
• how to loop through an array
  • forEach method
• Pop method
• Push Method
• Shift Method
• Splice Method

Declaration and assignation

Arrays are a type of variable that permit storage a list of values in it, arrays assign a numeration to the elements that starts with 0, this numeration it’s an indexation.

Example:

var autos;
autos = ['BMW','Fiat','Peugeot','Lifan','Tesla'];

Also you can assign values in this way.

var autos;
//index 0
autos[0] = 'BMW';
//index 1
autos[1] = 'Fiat';
//index 2
autos[2] = 'Peugeot';
//index 3
autos[3] = 'Lifan';
//index 4
autos[4] = 'Tesla';

You can obtain the element you want by calling with the index, for example autos[0] will get ‘BMW’.

console.log(auto[0]); //will show 'BMW' on console
var car = auto[0]; //im assigning 'BMW' to car

Length property

To know the length of an array you may use the length property, these will return us the quantity of elements in our array.

lets run an example in Browser inspector, previous photo.code:

var autos;
autos = ['BMW','Fiat','Peugeot','Lifan','Tesla'];

console.log(autos.length);

Loop through an array

There are a lot of way to loop through an array let see the most used:

<script>
     var autos;
     autos = ['BMW','Tesla','Fiat','Peugeot','Lifan'];
     var a="";
     for(variable in autos){
         a += "\n"+autos[variable];
     }
     alert(a);
</script>

Method forEach

Another way to loop through an array is using forEach method, here is an example:

<script>
     var autos;
     autos = ['BMW','Tesla','Fiat','Peugeot','Lifan'];
     autos.forEach(function(element){
     		alert(element);
     });
</script>

Erasing last elements with pop method

The pop method permit us delete the last element in an array without need of now it’s index. Let’s take next array as an example:

let mi_array =[1,2,3,4,5,6,7,8,9];

In order to erase the last element in the array you may use pop in this way:

mi_array.pop();

We can use browser inspector to run an example. On left you can see the code wrote, right panel what happen on execution.

Push method

You may add an element at the end of array using push, lets take in consideration the array used in pop method.

mi_array.push(10);

After use push you could see that the array values are [1,2,3,4,5,6,7,8,9,10], this method its a nice tool to use when you are creating a list.

Shift method.

It’s time to get a look at this method, shift method deletes the first element in an array. For example:

let meses =['enero','febrero','julio','septiembre'];
console.log("antes de shift: \n"+ meses);
meses.shift();
console.log("luego de shift: \n"+ meses);

antes de shift: 
enero,febrero,julio,septiembre
luego de shift: 
febrero,julio,septiembre

You can use these method in things like lists of things that you want to complete for example.

Splice method

Splice permit us add or erase elements in a determined position. Syntax:

array.splice(start[,quantity_to_erase [, element1[, element2[, ...]]]])

start – index

quantity_to_erase – if we want to erase next elements, else set it to 0 (no element will be erased).

elements – elements to be added.

Maybe, you tough that this method have not an apparent use, but is useful when you have multiple checkbox for example and want to erase selected objects.

let remove = get_selected_items();
let mybasket = allitems();
for (var i = remove.length -1; i >= 0; i--){                                 
   mybasket.items.splice(remove[i], 1);
}