Useful Array Methods Every Beginner Must Master

Hey friends!

It's another mini-tutorial Wednesday and I can't wait to tell you guys about array methods.

Arrays are one of the most-used types in JavaScript. But the real magic comes from the methods that let you use them easily, without writing for-loops from scratch every time.

So here’s a quick, easy guide to a few useful ones.

1. push()

Adds an item to the end of an array.

const fruits = ['🍎', '🍌'];
fruits.push('🍍');
console.log(fruits); // ['🍎', '🍌', '🍍']

2. pop()

Removes the last item from the array.

const fruits = ['🍎', '🍌', '🍍'];
fruits.pop();
console.log(fruits); // ['🍎', '🍌']

3. shift() and unshift()

• shift() removes the first item
• unshift() adds to the beginning

const fruits = ['🍎', '🍌'];

fruits.shift();        // removes 🍎
console.log(fruits);   // ['🍌']

fruits.unshift('🍓');  // adds 🍓 to the start
console.log(fruits);   // ['🍓', '🍌']

4. map()

Creates a new array by applying a function to each item.

const prices = [100, 200, 300];
const withTax = prices.map(price => price * 1.2);
console.log(withTax); // [120, 240, 360]

5. filter()

Returns only the items that match a condition.

const scores = [45, 80, 90, 30];
const passed = scores.filter(score => score >= 50);
console.log(passed); // [80, 90]

6. find()

Returns the first item that matches a condition.

const users = [
  { name: 'Ada', age: 28 },
  { name: 'Tobi', age: 23 },
  { name: 'Tobi', age: 30 }
];

const user = users.find(u => u.name === 'Tobi');
console.log(user); // { name: 'Tobi', age: 23 }

7. includes()

Checks if a value exists in the array.

const skills = ['HTML', 'CSS', 'JS'];

console.log(skills.includes('CSS'));   // true
console.log(skills.includes('React')); // false

8. join()

Turns the array into a string.

const words = ['Learning', 'arrays', 'is', 'fun'];
console.log(words.join(' ')); // "Learning arrays is fun"

Try It Yourself: Interactive Playground

Want to see how these array methods work in real time?

I built a small CodePen playground where you can:

• Paste any array (like [1, 2, 3])
• Type a method (like map(x => x * 2))
• See the result instantly

👉 Open the Array Methods Playground on CodePen

Feel free to fork it and play around with your own ideas!

Over to You

Still with me? Good :)

You’ve seen the most useful array methods every beginner should master, now it’s your turn!

• Which method helped you the most today?
• Which one do you always forget exists?
• Got any array method tricks or use cases? Drop them in the comments!

Was this helpful? Got questions? Or any insight to help me write better tutorials? Let me know in the 💬!

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)

✍🏾 I’m documenting my learning loudly every Wednesday. Follow along if you're learning JavaScript too!
Let’s keep learning together!