FrontEnd Development Zero to Hero (67 Part Series)
In computer science arrays are indexed data structures starting at zero.
In basic definition data structure determines how data is stored in a computers memory. Technically speaking data structures are defined as:
... a data organization, management, and storage format that enables efficient access and modification.
All screenshots are from Firefox 71.0 and its Developer Tools. One particular feature in Firefox 71.0 that's worthy of mention is the multi-line code editor in the console.
- The square bracket notation →
new Array()syntax →
The second syntax is the object oriented format and can be intimidating, on the other hand the square bracket notation is beginner friendly, therefore we will use it in our code examples.
Switch over to your browser and make sure you have turned on the multi-line code editor.
Type the following code:
// create an empty array var a = ; // check the array a;
Then click the Run button to execute the code.
Now lets add some element using index numbers starting at zero.
// Add the elements a = "Linux"; a = "macOS"; a = "Microsoft Windows"; // check if there are elements in the array a;
Switch over to the console editor and run the code.
You can retrieve these element using their index number.
When you make an attempt to retrieve a non-existence element you will get
Every array has a length property which is the number of elements in the array.
The format is:
Using our previous example:
a.length; // Expected output: 3
When the code is executed in the console you will get the same output.
delete operator to remove an element from the array.
delete a; // delete element at index 1 // Expected output: true
In the console this will also return true:
Now, when we check the array, we get
undefined in the place of the array that was deleted.
When we deleted an element in the array, it created an hole in the array which led to
undefined which is undesirable.
This can be remedied if we use the
splice() method. The
splice() method will take a starting index and the number of elements to remove from the array. After the removal all elements will be rearranged and their index will change respectively.
The best way to see this in action is to add more elements to our array, then delete some with the
splice() method. After that we'll list the element in the array and you will observe that their index has changed.
First let's empty the array, we can do this by assigning an empty array (
) to our variable
Next, we add some element.
// seven elements will be added to // the array a = "Linus Torvalds"; a = "Dennis Ritchie"; a = "William H. Gates"; a = "Time Berners-Lee"; a = "Stephen Hawking"; a = "Lawrence Page"; a = "Paul Allen";
In the console:
Next, we will remove three element between index 2 and index 4.
// This will remove three elements a.splice(2, 3); // the removed element // Array(3) [ "William H. Gates", "Time Berners-Lee", "Stephen Hawking"]
In the console:
When the you check the array, you will realize the elements have been rearranged.
Up next, Objects.