Getting started with JavaScript - Chapter 5 🚀

Table Of Contents
* 🤓INTRODUCTION
* 📃WHAT IS AN ARRAY
* 👨🏻‍⚕️COMMON ARRAY OPERATIONS
* 🌎CREATING AN ARRAY
* 🔒ACCESS ITEM WITH INDEX
* ➰LOOP OVER AN ARRAY
*📥ADD AN ITEM TO THE END OF AN ARRAY
*📤REMOVE AN ITEM FROM THE END OF AN ARRAY
* 🔍FIND AN INDEX OF AN ELEMENT
* ❌REMOVE AN ITEM BY INDEX
* 👋🏻OUTRO
* 🙏THANK YOU

🤓 INTRODUCTION

Welcome, my dear coders! I hope you are all having a great day. Today I moved to another city, everything went great! In this chapter, we will start working on JavaScript arrays🚀

Connect with me!

📃 WHAT IS AN ARRAY

The JavaScript array is a list-like object whose prototype has methods to perform traversal and mutation operations.

Let's represent an array visually! 👀

This is an array of pebbles, they are represented in the order left-to-right. The pebble signed with a number 1 is the first pebble in an array, with a number 2 is the second, and so on...This is when you look at it with a normal person's eyes. Let's look at it with the eyes of a javascript developer.

The way that we are counting array elements is starting at zero (index of zero).

Analyzing this array:

• Array has 7 elements (items)
• Element on the first position is a head element
• First position of an array has an index of 0

Neither the length of a JavaScript array nor the types of its elements are fixed. Since an array's length can change at any time, and data can be stored at non-contiguous locations in the array, JavaScript arrays are not guaranteed to be dense;

The array uses integers as an element index. But there are ways to use strings as element index by using an associative array that we are gonna talk about.

👨🏻‍⚕️ COMMON ARRAY OPERATIONS

• Creating an array
• Access an array item using the index position
• Loop over an array
• Add an item to the end of an array
• Remove an item from the end of an array
• Remove an item from the beginning of an array
• Add an item to the beginning of an array
• Find the index of an item in the array
• Remove an item by index
• Remove multiple items by index
• Copy array
• Filter array
• Map array
• Reduce array

I will, again, use superheroes in my examples.

🌎 CREATING AN ARRAY

let superheroes = ["Iron Man", "Hulk", "Thor", "Black Widow", "Black Panther"]

This is an array with the name "superheroes" and it is an array that contains strings.

Items in an array are separated with commas. Each item has an index:

Iron Man - 0
Hulk - 1
Thor - 2
Black Widow - 3
Black Panther - 4

Our superhero array has 5 items, that are indexed 0 to 4. If you don't believe me let's try it! 🚀

let superheroes = ["Iron Man", "Hulk", "Thor", "Black Widow", "Black Panther"] console.log(superheroes.length); // check the length

🔒 ACCESS ITEM WITH INDEX

You can access each item in an array using a bracket notation with a specific index of an item.

If you want to access an item using an index, you obviously need to know the exact position of an item in an array.

Let's access some of our superheroes:

let superheroes = ["Iron Man", "Hulk", "Thor", "Black Widow", "Black Panther"] console.log(superheroes[0]); // Accessing Iron Man console.log(superheroes[3]); // Accessing Black Widow

Like so we accessed the first element (at index 0) and the fourth element (at index 3).

➰ LOOP OVER AN ARRAY

In almost any situation when working with arrays, at some point, you will have to loop through an array and manipulate it or something similar. There are multiple ways you can loop through an array, but I will stick to the school example, let's learn the FOR loop.

We will loop over an array of superheroes and print out each superhero.

let superheroes = ["Iron Man", "Hulk", "Thor", "Black Widow", "Black Panther"] for(let i = 0; i < superheroes.length; i++){ console.log(superheroes[i]); }

📥 ADD AN ITEM TO THE END OF AN ARRAY

Let's add our new superhero!

let superheroes = ["Iron Man", "Hulk", "Thor", "Black Widow", "Black Panther"] superheroes.push("Captain America"); for(let i = 0; i < superheroes.length; i++){ console.log(superheroes[i]); }

📤 REMOVE AN ITEM FROM THE END OF AN ARRAY

And let's remove Captain A.😂

let superheroes = ["Iron Man", "Hulk", "Thor", "Black Widow", "Black Panther", "Captain America"] superheroes.pop(); for(let i = 0; i < superheroes.length; i++){ console.log(superheroes[i]); }

🔍 FIND AN INDEX OF AN ELEMENT

Let's find an index of a black widow.

let superheroes = ["Iron Man", "Hulk", "Thor", "Black Widow", "Black Panther", "Captain America"] console.log(superheroes.indexOf("Black Widow"));

❌ REMOVE AN ITEM BY INDEX

Let's remove an item on an index position of two.

let superheroes = ["Iron Man", "Hulk", "Thor", "Black Widow", "Black Panther", "Captain America"] let removedSuperHero = superheroes.splice(2, 1); console.log(removedSuperHero);

The first parameter of the splice function is the position, and the second parameter is how many elements, starting from that position, should we remove (in this case only 1 element).

Let's remove two elements, starting from index 2.

let superheroes = ["Iron Man", "Hulk", "Thor", "Black Widow", "Black Panther", "Captain America"] let removedSuperHeroes = superheroes.splice(2, 2); console.log(removedSuperHeroes );

👋🏻 OUTRO

Thank you for reading my blogs. In this chapter, we started with the very basics of creating and manipulating javascript arrays, there is much more to it than this, but we will go step by step, please try these examples, try creating and manipulating arrays.

🙏 THANK YOU FOR READING!

References:
School notes...
School books...
devdocs

Please leave a comment, tell me about you, about your work, comment your thoughts, connect with me!

☕ SUPPORT ME AND KEEP ME FOCUSED!

Have a nice time hacking! 😊