Have you ever thought of a Data Structure that could organize lists or collections of elements in an ordered fashion? Well, that is where an array comes to play.

An Array is an indexed based Data Structure that stores ordered collections of elements. It provides method to manage the order of elements.

For instance, you can think of an array as a rack or a shelf where piles of plates are kept. The order at which the collections of plates are kept or accessed matters because they are indexed based. Array element are numbered starting at 'ZERO'

METHODS OF DECLARING ARRAY

They are two syntax for creating an empty array

1. let arr = new Array(); Array constructor function
2. let arr2 = [ ]; Array Literal The second syntax is used almost all the time.

Example

• Creating an array using the first syntax:

    let numbers = new Array(1,2,3,4,5);
  

• Creating an array using the second syntax:

    let countries = ['Nigeria', 'United Kingdom', 'Canada', 'China']
  

  ACCESSING ELEMENTS

  We access elements in an array using the square barcket notation '[]', and don't forget that array indices starts at zero.

    console.log( countries[0] ); // 'Nigeria'
    console.log( countries[1] ); // 'United Kingdom'
    console.log( countries[2] ); // 'Canada' ... and so on.
  

  ADDING ELEMENT

  We can add element to the already existing elements in an array.

    countries[4] = 'Pakistan';
    console.log(countries);
    /*NOW ['Nigeria', 'United Kingdom', 'Canada', 'China', 'Pakistan']*/
  

  REPLACING AN ELEMENT

  As we can add elements in an array, we can also replace elements. First we access their index, and replace the existing element by add a new element.

  countries[3] =  'Korea'
  console.log(countries)    
  ['Nigeria', 'United Kingdom', 'Canada', 'Korea', 'Pakistan']
  

  One might begin to wonder, What if an array has a lot of elements, how do we know the total number of elements? Array have a property called length. The total count of the element in an array is its LENGTH.

let countries = ['Nigeria', 'United Kingdom', 'Canada', 'China', 'Pakistan']
console.log(countries.length) // 5

we can also show the whole elements of the array

console.log(countries)
/*['Nigeria', 'United Kingdom', 'Canada', 'China', 'Pakistan'] */

Further more, another interesting feature of an array is that we can store mixed values. eg we can store a number, string, bool, function, objects. Array can store elements of any type.

let arr = ['@didicode', 22, false, {name: 'Joshua'}, function() {console.log('Array is saying; I AM SIMPLE TO LEARN')}]

/*Access the name property of the object at index 3 */
    console.log( arr[3].name ); /*'Joshua'*/

/*Access the function at index 4 */
    console.log( arr[4]() ); /*Array is saying; I AM SIMPLE TO LEARN' */

ARRAY METHODS: PUSH/POP, SHIFT/UNSHIFT

To have a better grasp of array methods, let's take a little side walk in to some Data Structures.

Queue: Queue in Computer Science means an ordered collection of elements which supports Push and Shift.

• push appends an element to the end, while
• shift gets an element from the beginning , advancing the queue, so that the second element becomes the first.

Stack: The Stack data structure supports push and pop operation.

• push adds an element to the end of the array.
• pop takes or removes an element from the end of the array.

A stack is illustrated as a pile of plates: new plates are taken from the top or added.

Array in JavaScript can work both as a stack and a queue. Stack have a principle of operation called 'LAST-IN-FIRST-OUT', LIFO for short. For queues, we have FIFO principle which means 'FIRST-IN-FIRST-OUT.

Alright, enough of the side walk. Let's talk about methods that work with the end of array:

• POP: Just like we have seen earlier, it extracts the last element of the array.

    let clubs = ['Arsenal', 'Chelsea', 'Man-United'];
    console.log( clubs.pop() ); // takes out 'Man-United'
    console.log( clubs ); // Arsenal, Chelsea
  

• PUSH: Appends an element to the end of the array. The push array method accepts a parameter.

    let clubs = ['Arsenal', 'Chelsea'];
    clubs.push('Man-United');
    console.log( clubs ) // Arsenal, Chelsea, Man-United
  

  Do you know that clubs.push(...) is also equal to clubs[clubs.length] = ... ? We can also append to the array this way. clubs[clubs.length] = 'Barcelona' console.log( clubs ) // Arsenal, Chelsea, Man-United, Barcelona

Furthermore, let's talk about methods that work with the beginning of the array.

• SHIFT: Extracts the first element of the array and RETURNS it. very important keyword.

    let clubs = ['Arsenal', 'Chelsea', 'Man-United'];
    console.log( clubs.shift() ); /* removes Arsenal and returns it to the console */
    console.log( clubs ); // Chelsea, Man-United
  

• UNSHIFT: add element to the beginning of the array

    let apps = ['Facebook', 'Instagram'];
    apps.unshift('Twitter');
    console.log(apps); // Twitter, Facebook, Instagram
  

  Finally, let me show you something exciting. If push() and unshift() methods are both additive methods, we can combine them to add elements to the array.

    let accessories = ['shoe'];
    accessories.push('clothes', 'Jewels');
    accessories.unshift('Wrist-watch', 'Sun glass')
    console.log(accessories )
  

  OUTPUT

  ['Wrist-watch', 'Sun glass', 'shoe', 'clothes', 'Jewels']
  

  I believe you find this article helpful. Like and share with friends and your learning community.