An Array of Possibilities. Arrays in 5 minutes.

Arrays are one of the most fundamental data structures in JavaScript. They solve the problem of how to store and work with related sets of data efficiently. Whether you are building a dynamic web app, managing user data, or processing large datasets, arrays open up a multitude of possibilities. In this guide, we'll explore the basics of arrays, why they're essential, and how you can start using them in your JavaScript projects. So let's dive right in!

Suppose you are building a 'to-do list' app. Your job is to come up with as many tasks as possible:

let task1 = "Buy groceries";
let task2 = "Clean your room";
let task3 = "Wash the dishes";
let task4 = "Pay the bills";
let task5 = "Sweep the floors";
let task6 = "Finish the Project";
let task7 = "Do the laundry";
let task8 = "Call the doctor";
let task9 = "Vacuum the carpets";
let task10 = "Water the plants";

If you came up with 50 tasks, that would be 50 variables! You would have to manually handle each task, making your code repetitive and prone to errors.

With an array, you can store all tasks in one variable.

So what is an array, exactly?

An array is a single variable that holds a collection of data. An array contains an ordered list of values called elements. These elements can be of any data type; numbers, strings, booleans, objects, and even, yes- other arrays. In JavaScript, an array can even contain a mix of data types.

How do you declare an array?

You declare an array the same way you would any variable: using one of the three keywords used for variable declaration:

let array1 = [elm1, elm2, elm3];
const array2 = [elm4, elm5, elm6];
var array3 = [elm7, elm8, elm9];

What's unique is that you use square brackets to open and close the array. Use commas to separate each element in the array.

Going back to our 'to-do list' app as an example, this is how we would declare the array:

let tasks = [
   "Buy groceries", 
   "Clean your room", 
   "Wash the dishes",
   "Pay the bills",
   "Sweep the floors",
   "Finish the Project",
   "Do the laundry",
   "Call the doctor",
   "Vacuum the carpets",
   "Water the plants"
];

We have used the let keyword to declare an array called 'tasks' and initialized it with 10 elements.

You can also declare an array just like you could declare variables containing single-values (called primitive data types); without assigning it values:

let newArray = [];

Here we've declared an array called 'newArray' using let, but we haven't assigned any elements to it.

We can do this later by writing:

newArray = ["Boygenius", "Paramore", "Arctic Monkeys"];

So why use arrays?

• Organized Data: Store multiple items in a single variable.
• Dynamic storage: Easily add, remove, or modify items.
• Iteration: Loop through elements without manual repetition.
• Built-in Methods: Utilize built-in functions (called methods) which JavaScript specifically provides for arrays.

How do you access specific elements in an array?

Every element in an array is assigned a unique numerical index value. The numbering of the elements in an array always starts at zero.

Going back to our 'to-do list' app example:

let tasks = [
   "Buy groceries", 
   "Clean your room", 
   "Wash the dishes",
   "Pay the bills",
   "Sweep the floors",
   "Finish the Project",
   "Do the laundry",
   "Call the doctor",
   "Vacuum the carpets",
   "Water the plants"
];

tasks[0];
=> "Buy groceries"

Once you've declared and initialized an array with values, can you change its values?

The answer is yes. You can reassign the values in an array, even if you used const to declare the array itself.

const multiplesOfTen = [10, 20, 30, 40, 5, 60, 70, 80, 90, 100];

multiplesOfTen[4] = 50;

multiplesOfTen;
=> [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];

Did you remember that the fifth element in the array will have an index value of 4 because the numbering always starts at zero? I knew you were sharp as a semicolon in a sea of commas.😄

How do you place an array inside another array?

We said earlier that an array can contain another array in one or more of its elements (this is called nesting and we would refer to it as a nested array).

let fruits = [['Apple', 'Banana'], ['Orange', 'Mango'], ['Grapes', 'Pineapple']];

Let's rewrite it to make it more clear:

let fruits = [
   ['Apple', 'Banana'], 
   ['Orange', 'Mango'], 
   ['Grapes', 'Pineapple']
];

If you see an array that contains three arrays, you got it right. Arrays can get deeply nested when the array inside the array contains an array, so practicing thoroughly will get you there in your understanding.

And that's my five minute digest on arrays.

Until next time!

Have questions or feedback? Drop a comment below!🚀

Resources:
https://www.w3schools.com/js/js_arrays.asp

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array