This is the second part of a series of related javascript posts. If you haven't had a chance to look at the first, click this link and learn about objects in modern javascript.
Working with javascript Arrays;
1. Array definition ;
The line of code below shows how to define an array in javascript language;
const skills = []; /*an empty array*/
An array carries a list of items that appear as follows;
const skills = ["coding", "design"];
2. Accessing all javascript array values;
const skills = ["coding", "design"];
console.log(skills); /*[ 'coding', 'design' ]*/
3. Accessing javascript array value;
To access any array value in javascript we have to use the index of that particular value in the array. The index starts from 0.
const skills = ["coding", "design"];
console.log(skills[0]); /*coding*/
console.log(skills[1]); /*design*/
4.Getting the number of items in an array;
to know the number of items in an array, we use a very effective inbuilt javascript function called length as follows;
const skills = ["coding", "design"];
console.log(skills.length); /*2*/
This gives the responses to two as the total number of items in the above array.
5. Reassigning an array value;
To achieve this in javascript, we also have to utilize the index of the value as follows;
const skills = ["coding", "design"];
console.log(skills); /*[ 'coding', 'design' ]*/
skills[1] = "writing"; /* Reassigning value in index 1*/
console.log(skills); /*[ 'coding', 'writing' ]*/
6. Adding a item to a javascript array;
There are many methods of achieving this goal based on various criteria in javascript. The major difference between the methods is that one is based on the index positions while the rest are base on inbuilt javascript functions as follows;
- Using of the index positions to add an item into an array in javascript;
const skills = ["coding", "design"];
console.log(skills); /*[ 'coding', 'design' ]*/
skills[2] = "writing"; /* Addiing a new item to the index 2*/
console.log(skills); /*[ 'coding', 'design', 'writing' ]*/
- This method is very problematic and is not recommended in real projects because it requires you to keep a tab on the last index position and if a mistake is made say.. use an index value that's already available, then the value is just reassigned as already demonstrated. Let's call this reassignment problem.
- The second problem that may occur when using this method is the skipping of index positions. using this method is *skipping of index positions this is because you can use any index position to add a new item into the array as follows;
const skills = ["coding", "design"];
console.log(skills); /*[ 'coding', 'design' ]*/
skills[5] = "writing"; /* Addiing a new item to the index 2*/
console.log(skills); /*[ 'coding', 'design', <3 empty items>, 'writing' ]*/
From the example above, the use of index positions to add items in an array presents the risk of having empty arrays like positions 2,3, and 4 in the example.
- The second method is the most utilized in javascript which utilizes a predefined javascript function called push.
The most important thing to note about this method is that it adds the array item to the end of the array. The advantage of using this method is that you don't have to keep tabs on the index positions or length of your array because the function automatically adds the item to the last available position as follows;
const skills = ["coding", "design"];
console.log(skills); /*[ 'coding', 'design' ]*/
skills.push('Blogging');
console.log(skills); /*[ 'coding', 'design', 'Blogging' ]*/
- The third method is also a good fit for projects and is also an inbuilt javascript function called unshift. The difference between unshift and push, is that push adds new array items to the end of an array while unshift adds items at the beginning of the array i.e. from index position 0 which pushes the current item in that position to index position 1. Example;
const skills = ["coding", "design"];
console.log(skills); /*[ 'coding', 'design' ]*/
skills.unshift('Blogging');
console.log(skills); /*[ 'Blogging', 'coding', 'design' ]*/
Unshift inbuilt function added the blogging item at the beginning of the array pushing the previous array item at position 0 (coding) to index position 1.
7. Removing / Deleting items from an array;
There are two major methods of deleting/removing items from a javascript array. Both of these methods are inbuilt javascript functions and the difference is based on the end the removal of items is made from.
- Using the pop** function to remove items from an array;
Using this method removes the last item from the array as follows;
const skills = ["coding", "design"];
console.log(skills); /*[ 'coding', 'design' ]*/
skills.pop();
console.log(skills); /*[ 'coding' ]*/
- The second method involves the use of the shift function** to remove an item from the front of an array as follows;
const skills = ["coding", "design"];
console.log(skills); /*[ 'coding', 'design' ]*/
skills.shift();
console.log(skills); /*[ 'design' ]*/
Thank you so much. Remember, there are tons of other operations one can work with when it comes to javascript arrays. This post is meant to highlight the basics and an advanced series is on the way, but in the meantime, this concludes the second part of a blog series of posts that are meant to decode objects and arrays and how one can use a combination of the two. Stay tuned for the third part of the blog series that will explain how to combine arrays and objects in modern javascript.
Please ensure you follow me on Twitter for more detailed and comprehensive blog posts.