JavaScript Arrays 101

Today i reviste JS with arryas late night. Creating dozens of variable to store every new items feel cluttered. If you feel this pain point. Than this guide help you to fix it.

What arrays are and why we need them

Think you are building a shoping list. Without arryas you're creating fresh varialbe each time when item added.

const item1 = "milk"
const item2 = "bread"
const item3 = "ots"

If there are 100 of items were adding, you need to create dozens of variables for that. With this approach deleting one of them like thired one or managing feel impossible.

**So the solution is array. Arrya is a data type in javascript, which allow to store collection of data items within a single variable and you can access these item by using indexes. You can think it like a single box with multiple compartments and each have a index to identify each compartment.

How to create an array

In JavaScript is vary simple to create arrays. Use [] square bracket to wrap , comma separated items and assign them to any variable.

// A collection of employees name
const employees = ["anoop", "pankaj", "nikhil"]

Instead of creating three separate varibales there only one varible used.

Accessing elements using index

Items in arryas are easily access by index. In JavaScript indexing start from 0 means first element stored at 0, second at 1 and thired at 2. Every items follow this indexing from 0 to "number of items - 1".

console.log(employees[0]) // output: anoop
console.log(employees[2]) // output: nikhil

To access the items use intentional item index and used this within [] square bracket followed by variable name.

Updating elements

In javascript arryas are mutable means if you're figuring you add something wrong by mistakes. Dont worry about it you can simply update its value by using it's index like how you're accessing it, here you just assigning newer value instead of getting value form it.

// nikhil is not employee any more
// kartik take place of him
employees[2] = "kartik"

Array length property

If you ever need to know how many items in you array. You don't need to count it manually, JavaScript do it for you. Every time you add item in arrya JS track its count and add it into .length property which every arrya have. So you can use it to access how many items are exist in you arrya.

console.log(employees.lenths) // output: 3

Pro Tip: You can access last elment directly by using length - 1. Which return last valid index.

Basic looping over arrays

Arrays are iterable means you can iterate over it by using loops. Think if you're array have 1000 or more items, accessing or updating them manully take soo much time. Its like wast of time. So you can use for loop to count index from 0 to array last index (length - 1) and by using these indexes can easily access or do what ever you want with that.

for(let index = 0; index < employees.length; index++){
    console.log(`Employee ${index} is "${employees[index]}"`)
}

In that loop let index = 0; initialize starting point where loop start counting. index < employees.length; this is the condition where stop loop if evaluated into false. The last increamenting index++ which increament index in every step of loop. These whole work together so employees printing code print next name in each iteration.

---

Summary

• Arrya: collection of items within single varialbe.
• Creating: const name = [1,2,3], use [] bracket.
• Accessing: name[1], use variable + [index].
• Updating: name[0] = 4, just use = assignment.
• Iterating: use for loop with increamenting index.

Your Turn: The Movie Challenge

Try it your self. Here is the quick assignment to test how much you grab through this guide:

1. Create a favMovies variable with 5 movies names.
2. Print the first and the last movie name on the console.
3. Update the thired movie name to something else in you list.
4. Print length of you movies arrya list on console.
5. Loop through it and print each movie name with its index.

Give it a Shot! Mastering Arrays data type in JavaScript unlock the most important tool in programming tool-kit.