DEV Community

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

Posted on Edited 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.