DEV Community

Cover image for Understanding Arrays in JavaScript (For Beginners Like Me)
Gift Egbonyi
Gift Egbonyi

Posted on

Understanding Arrays in JavaScript (For Beginners Like Me)

Hey there 👋

I usually post on Wednesdays, but I completely missed this week. Instead of feeling bad, I’m showing up today because what matters is keeping it going 🚀


Let's get started shall we :)?

Today’s topic? Arrays in JavaScript.

Let’s break it down like we’re explaining it to a friend over bottom-pot party jollof with chilled malt 😅


What is an Array?

An array is basically a list. It is a way to store multiple values in one variable. For example,

const fruits = ['apple', 'banana', 'orange'];
Enter fullscreen mode Exit fullscreen mode

Now fruits holds three values. Instead of creating:

const fruit1 = 'apple';
const fruit2 = 'banana';
// etc...
Enter fullscreen mode Exit fullscreen mode

you just bundle them into one array. Much cleaner.

Accessing Items in an Array

Arrays are zero-indexed. That means the first item is at position 0.

console.log(fruits[0]); // 'apple'
console.log(fruits[1]); // 'banana'
console.log(fruits[2]); // 'orange'
Enter fullscreen mode Exit fullscreen mode

If you try to access fruits[3], you’ll get undefined because there’s no fourth item.

Common Things You Can Do With Arrays

Add Items

fruits.push('mango'); // Adds to the end
fruits.unshift('pineapple'); // Adds to the beginning
Enter fullscreen mode Exit fullscreen mode

Remove Items

fruits.pop(); // Removes from the end
fruits.shift(); // Removes from the beginning
Enter fullscreen mode Exit fullscreen mode

Loop Through Items

fruits.forEach((fruit) => {
  console.log(fruit);
});
Enter fullscreen mode Exit fullscreen mode

Why Arrays Are Useful

Arrays help when you’re dealing with a bunch of things:

  • A list of items in a cart
  • Usernames in a chat
  • Quiz questions
  • Literally anything in a group

Try It Yourself

Here’s a fun mini challenge:

const favFoods = ['jollof rice', 'plantain', 'suya'];

// 1. Add a new food
// 2. Remove the first one
// 3. Log each food to the console
Enter fullscreen mode Exit fullscreen mode

Try it out in your browser console or Codepen. Play around with it, that’s how you learn :).


Over to You

Are arrays starting to make sense now?
Want a part 2 where we talk about methods like .map(), .filter() or nested arrays?
That’s it for today’s midweek mini tutorial!

I’m keeping things light, fun and useful; one small project at a time.

*If you enjoyed this, leave a 💬 or 🧡 to let me know. *

And if you’ve got an idea for something you'd like me to try out next Wednesday, drop it in the comments. 👇

Follow me to see more straight-forward and short tutorials like this :)

If you are curious about what I do, check out my Portfolio

:-)

Web trails
You can also find me here on LinkedIn
or here X (Twitter)

Let’s keep learning together!

Top comments (0)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.