Aright! Hear me out!
When you do make it, give back.
When I first started learning Javascript and came across Arrays, I said to myself "Okay! I know what is an array. I know how to use it in python so it's going to be the same thing".
After digging deeper into javascript, I realized how stupid I was.
Arrays in Javascript are a bit different than what they are in Python. At least this is my opinion on them.
They are the most used data structure and an important component in any javascript application. So, I decided to write a piece of content about arrays because I believe I can resonate with beginners who want to learn about them.
This guide will be several parts divided and in this part, we will talk about basic arrays and some simple methods.
By the end of this article, you will learn about arrays and their methods. You can also bookmark this article and use it whenever you up to work with Arrays.
You will forget the syntax. We all do. And that's okay
No further hype.
What's an array?
Simply put, an array is a type of data structure. We use arrays when we want to make an ordered collection of items. These items can be users, food, place, or anything.
So, again, we have some data and we put it in an ordered structure. Just like this:
let Users = ["Isaac Netero", "Zeno Zoldyck", "James Bond"]
Each item has its own index. An "Index" is the order number of the item.
Users[0] is Isaac Netero
Users[1] is Zeno Zoldyck
…
Since everything in Javascript is made of Objects, Arrays also are objects behind the scene.
Wait! But we didn't put any numbers in our array. Yes, that how Javascript represents an array's indexes.
Okay! So what's the difference between Objects and arrays.
Both are different types of data structures.
In javascript, Arrays are more flexible and convenient to use than Objects because they have so my methods that make working and manipulating data inside arrays flexible.
Show me.
Arrays Methods.
Here we go!
We have a simple array that represents a bunch of students.
let students = ["Amine", "Alicia", "John"]
pop() removes the last item from the array and returns that value.
let alicia = students.pop(1)
removes "Alicia" from the array and returns it back to the variable alicia.
push() adds items to the end of the array and returns the new length of the array.
let newLenght = studnets.push('Alicia')
Add Alicia to the end and store the length (3) in the newLenght variable.
shift() removes the first element from an array and returns that removed element.
let amine = students.shift(1)
omit "Amine " and store the returned value in the variable amine
join() gathers all the items of an array in one string.
Items can be separated by commas or anything inside the ().
students.join(', ') //returns "Amine, Alicia, John"
studnets.join('-') //returns "Amine-Alicia-John"
reverse() Yes! you guessed it right. It reverses an array. The first item becomes the last one, and the last item becomes the first in the array.
students.reverse() //returns ["John', "Alicia", "Amine"]
What's the flexible way of accessing the last item of an array you don't know its length?
Answer: students.reverse()[0]
Once you learn more about arrays and their methods, you will able to create such things by yourself.
Continue on...
indexOf() returns the first index at which a given item can be found in the array, or -1 if it is not present.
students.indexOf('Amine') //returns 0
fill() changes all items in an array to a static value, from a start index (default 0) to an end index (default array.length).
let newStatic = students.fill(null, 0, 1)
change items to null from the index of 0 to 1 (one item) where null can be any value.
returns [null, "Alicia", "John"]
NICE!!
every() tests whether all items in the array pass the test implemented by the provided function. It returns a Boolean value
let's check if all the items in the array are strings:
let test = (value) => value = toString(value)
console.log(students.every(test))
//returns true
Each item of the array takes the place of 'value'. Humm? Do you get it?
In another way:
for (let name of students){
if (name = toString(name){
return true
}
};
findIndex() returns the index of the first item in the array that passes a testing function.
Let's suppose we have a very very long array of names and one number, and we want to return the index of that number.
let Users = ["Amine", "Alicia", "John", 22]
let test = (value) => value = parseInt(value);
console.log(students.findIndex(test))
//returns 3
concat() is used to merge two or more arrays.
let's add another array and concatenated with the first one.
let otherClass = ['Zoldyck', 'Chrollo', 'Merieum']
let newClass = students.concat(otherClass)
["Amine", "Alicia", "John", "Zoldyck", "Chrollo", "Merieum"]
slice() returns a bunch of items you select using start / end indexes.
Let's take the newClass and return the students of the old class only.
newClass.slice(0,3)
[ Amine, Alicia, John]
forEach() executes a provided function once for each array element.
students.forEach(student => console.log(student))
Amine
Alicia
John
Zoldyck
Chrollo
Merieum
An alternative method to do the same is filter(). But this method returns an array.
Enough for today. Practice, practice practice is the only advice I can give you and the best thing you can do for now.
Ready for part two?
Top comments (1)
Amazing! Ready for part 2 of course!