DEV Community

Cover image for 🔥 JavaScript Arrays Explained with Practical Code Examples
Shifa
Shifa

Posted on

3 3 2 3 2

🔥 JavaScript Arrays Explained with Practical Code Examples

If you're learning JavaScript, understanding arrays is non-negotiable. They’re everywhere — storing data, managing lists, or manipulating collections. In this guide, we're going full code-mode 💻 to explore how arrays work.

No fluff, just code. Let’s go 🚀


📦 Creating Arrays

const fruits = ["apple", "banana", "mango"];
const numbers = [1, 2, 3, 4];
const colors = new Array("red", "green", "blue");
Arrays can hold any data type  strings, numbers, even objects or other arrays.
Enter fullscreen mode Exit fullscreen mode

🔍 Accessing Elements

console.log(fruits[0]); // "apple"
console.log(fruits[2]); // "mango"
Enter fullscreen mode Exit fullscreen mode

Arrays use zero-based indexing, meaning the first element is at index 0.

fruits[1] = "orange";
console.log(fruits); // ["apple", "orange", "mango"]
Enter fullscreen mode Exit fullscreen mode

⚙️ Array Methods in Action

fruits.push("grape");     // Add to end
fruits.pop();             // Remove from end
fruits.shift();           // Remove from start
fruits.unshift("kiwi");   // Add to start
fruits.splice(1, 0, "pineapple"); // Insert at index 1
Enter fullscreen mode Exit fullscreen mode

These methods help you add/remove elements from different positions in the array.

🔁 Looping Through Arrays

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

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

Looping helps you perform actions on each element. forEach is cleaner and more modern.

🧠 Destructuring Arrays

const [first, second] = fruits;
console.log(first);  // "apple"
console.log(second); // "orange"
Enter fullscreen mode Exit fullscreen mode

Destructuring lets you pull out values easily without accessing them one-by-one.

✅ Wrap Up
Arrays are powerful and versatile. Mastering just these few concepts can take you a long way. Practice these snippets, build your own mini-projects, and you’ll see arrays in a whole new light! 🌟

Got a favorite array method or a cool trick? Share it in the comments!

AWS Q Developer image

Build your favorite retro game with Amazon Q Developer CLI in the Challenge & win a T-shirt!

Feeling nostalgic? Build Games Challenge is your chance to recreate your favorite retro arcade style game using Amazon Q Developer’s agentic coding experience in the command line interface, Q Developer CLI.

Participate Now

Top comments (2)

Collapse
 
nevodavid profile image
Nevo David

love smashing arrays together, never gets old honestly - you think learning basic stuff like this early on actually changes how you tackle bigger projects later or nah

Collapse
 
shifa_2 profile image
Shifa

Totally agree — array manipulation is such a core part of JS, and yeah, learning the basics early absolutely shapes how you think later. When you understand things like how data flows or how to structure logic with arrays/objects, it makes tackling more complex features way less intimidating. It's like building muscle memory for code.

Gen AI apps are built with MongoDB Atlas

Gen AI apps are built with MongoDB Atlas

MongoDB Atlas is the developer-friendly database for building, scaling, and running gen AI & LLM apps—no separate vector DB needed. Enjoy native vector search, 115+ regions, and flexible document modeling. Build AI faster, all in one place.

Start Free

👋 Kindness is contagious

Discover fresh viewpoints in this insightful post, supported by our vibrant DEV Community. Every developer’s experience matters—add your thoughts and help us grow together.

A simple “thank you” can uplift the author and spark new discussions—leave yours below!

On DEV, knowledge-sharing connects us and drives innovation. Found this useful? A quick note of appreciation makes a real impact.

Okay