This guide will assume you already have some type of experience with javascript and know how to create functions and define data types with variables.
Array data structures, the way developers display data onto the user's screen. This might sound like a boring topic, but this is one of the fundamental ways to provide webpage information and also makes life as a developer a lot easier.
Do not pray for an easy life, pray for the strength to endure a difficult one.
Bruce Lee
It makes it easier for us to pass data around our code with a single variable. It also helps us from doing our code in a way as they call DRY Don’t Repeat Yourself! Typically it’s not a required thing to do when I say store all of the data onto one variable. Hopefully, by the end of this article, you learned how to access and store data using arrays alongside some array properties and methods.
Contents
- Array Intro
- Item Accessing
- Assignments
- Array Methods
Array Introduction
If we wanted to keep track of certain data we would simply store it inside a variable. The majority of the time when working with data, we want to display a collection of data of either the same type of data or different types. Creating arrays is pretty straight forward. We define an array by declaring a variable and assigning it some square brackets like so.
var colors = ['red', 'blue', 'green', 'purple']
Now that we know how to declare an array we can add as many data types as we want and have the ability to access these with index numbers. We will learn more about the array index numbers in just a bit.
Item Accessing
Accessing data from an array is one of the most common things you will be doing as a developer. This is why it is very important to learn the fundamentals of how to work with arrays to allow us to create more efficient code. In order to do this, we need to simply call the item by its position inside the array. This is where the index numerical position comes into play. Array's always start off at 0, so the first item in the array is always going to be 0, the second index in the array will be 1, and the third index will be 2, and so on. Look at the code below for an example.
const array = ['red', 'blue', 'green', 'purple']
0, 1, 2, 3
In order for us to access items inside the array, we simply type in the name of the variable that is storing our data followed by some brackets containing the index number that is assigned in the array.
const array = ['red', 'blue', 'green', 'purple']
console.log(array[1]) // output = blue
If we don't know the size of the array, we can still access the last item of the array with some logic inside of the brackets. By returning the length of the property - 1. This will always return the last item of the array, how you ask? Well, the start of the array is always zero, so when we subtract 1 from the index number and start at 0, the index numerical number will go to the end of the array. I know it sounds confusing at first, but once you start playing with the logic more it will make more sense at times.
const array = ['red', 'blue', 'green', 'purple']
console.log(array[array.length - 1]) // output = 'purple'
Assignment
Arrays allow us to change our data as well, we do this by reassigning the index number with the data you want to replace with. We do this by using the square brackets and index number with the = sign. The following code might show it a bit clearer.
const array = ['red', 'blue', 'green', 'purple']
array[1] = 'orange'
console.log(array) // output ['orange', 'blue', 'green', 'purple']
Array Methods
If you are familiar with string methods then you can get familiar with array methods. There will most likely be a time when you have to change data inside an array. This is where methods come into play that allows us to do this type of manipulation.
.length
We used the .length method earlier but didn't talk about what it was actually doing. Just like when checking the length of characters in a string, we can also check the number of items inside an array where items are the index number.
const array = ['red', 'blue', 'green', 'purple']
console.log(array.length) // output 4
.push & pop
Another two beneficial array methods that are helpful are push and pop. They sound pretty straight forward if you ask me, they refer to adding and removing items from the array, only after its initial declaration.
const colors ['red', 'blue', 'green', 'purple']
colors.push('orange')
conosole.log(colors) = ['red', 'blue', 'green', 'purple', 'orange']
.push adds the item inside the parameters at the end of the array and also increments the length of the array by 1
const colors ['red', 'blue', 'green', 'purple'];
colors.pop();
conosole.log(colors) = ['red', 'blue', 'green'];
When we want to remove something from the end of the list we use pop(), which also decrements the length of the array by 1.
.unshift & .shift
Now that we have learned how to add and remove stuff to the end of the array, we can now dig into adding and removing items at the start of the array. Let's go ahead and take a look at how we do this.
const colors ['red', 'blue', 'green', 'purple'];
colors.unshift('orange')
console.log(colors) = ['orange','red', 'blue', 'green', 'purple'];
colors.shift();
console.log(colors) = ['red', 'blue', 'green']
colors.shift();
console.log(colors) = ['blue', 'green']
Conclusion
I hope by the end of this article you managed to learn how to create and understood what is going on in every line of code. It is very important to understand how your code fully works, not only does it help you become a better developer but can also help you use the tools you are working with more efficient.
These articles are mostly intended for personal use on becoming a better programmer, writer, and grow my programming skills. Feel free to drop any feedback or corrections that you believe should be made to help me and others. Thank you for your time in sticking this far!
Feel free to give me a follow on Twitter and get connected on LinkedIn.
Top comments (0)