Tuesday, February 18, 2020

Arrays In JavaScript

JavaScript Arrays


Array


An array is a special type of variable that can hold multiple values at the same time. The Array class is a global object that is used for the construction of JavaScript Arrays. The elements in an array can be accessed with the help of the index(integer). An array is very much like a list.

Unlike other programming languages, the length of the JavaScript array is not fixed. It means the number of elements can be increased or decreased, even the type of elements is not fixed in a JavaScript array. The elements are stored at non-contiguous memory locations in an array because the length and the type of elements are not fixed in a JavaScript array.

The major difference between JavaScript array and a JavaScript object is that an array has numbered index, but Objects has named index.


Creating an Array


Arrays can be easily created by putting elements between small brackets [ ] and separating the elements by comma(,) as shown in the example below,

We can also use the Array constructor for creating an array.

colors=['Red','Green','Blue'];
fruits=['Apple','Orange','Banana'];
m=[12,34,21,1,9,'seven','five'];

OR(use constructor)
arr=new Array(63.5,71.2,96.3);


Accessing an array by index



<script>
  colors=['Red','Green','Blue'];
  for(i=0;i<colors.length;i++)
  document.write(colors[i]+'<br>')
</script> 

Output

Red
Green
Blue 

Loop over an Array



<script>
  colors=['Red','Green','Blue'];
  colors.forEach(function(item,index)
  {
    document.wrie(item+'<br>');
  });
</script>

Output

Red
Green
Blue

OR (use for-in or for-of loops)

<script>
  colors=['Red','Green','Blue'];
  for(item of colors)
  document.write(item+'<br>')
</script> 

Output

Red
Green
Blue

The push() method


We can add an element at the end of an array with the push() method.

<script>
  colors=['Red','Green','Blue'];
  colors.push('Black');
  for(item of colors)
  document.write(item+'<br>')
</script> 

Output

Red
Green
Blue
Black


The pop() method


We can remove an element from the end of an array with the pop() method.

<script>
  colors=['Red','Green','Blue'];
  colors.pop();
  for(item of colors)
  document.write(item+'<br>')
</script> 

Output

Red
Green

The shift() method


You can remove from the front of an array with shift() method.

<script>
  colors=['Red','Green','Blue'];
  colors.shift('');
  for(item of colors)
  document.write(item+'<br>')
</script> 

Output:

Green
Blue

The unshift() method


You can add to the front of an array with unshift() method.

<script>
  colors=['Red','Green','Blue'];
  colors.unshift('Orange');
  for(item of colors)
  document.write(item+'<br>')
</script>
Output:

Orange
Red
Green
Blue

The splice(position, number_of_items) method


The splice() method is used to remove the items from a given index in the given array.

<script>
  colors=['Red','Green','Blue','Megenta','Yellow'];
  colors.splice(2,2)
  for(item of colors)
  document.write(item+'<br>')
</script> 
Output

Red
Green
Yellow

The slice() method


A shallow copy of an array can be created using the slice() method. 

<script>
  colors=['Red','Green','Blue','Megenta','Yellow'];
  newcolors=colors.slice();
  for(item of colors)
  document.write(item+'<br>')
</script>
Output:

Red
Green
Blue
Magenta
Yellow


The isArray() is a static method available the Array Class


The isArray() is a static method, available array Class. The isArray() method is used to identify whether the given type is an array or not.

<script>
  colors=['Red','Green','Blue','Megenta','Yellow'];
  document.write(Array.isArray(colors));
</script>

Output
true


The reverse() method.


This method is used to reverse the array.

<script>
  colors=['Red','Green','Blue','Megenta','Yellow'];
  document.write(colors.reverse());

</script>

Output:
Yellow,Magenta,Blue,Green,Red

The sort() method


The sort() method is used to sort the elements in an array.



Example