JavaScript Tutorial – Day 9: Arrays in JavaScript
6 mins read

JavaScript Tutorial – Day 9: Arrays in JavaScript

Anand Gora0Tagged , , ,

In this JavaScript tutorial, we’ll learn about one of the most commonly used data structures — arrays in JavaScript. Arrays allow us to store multiple values in a single variable and perform operations like sorting, filtering, and iterating.

By the end of this lesson, you’ll understand how to create arrays, access elements, modify them, and use powerful array methods that make JavaScript development easier.

What are Arrays in JavaScript?

An array in JavaScript is a special type of object that can hold multiple values in an ordered list.

👉 Example:

let fruits = ["Apple", "Banana", "Mango"];
console.log(fruits);

👉 Output:

["Apple", "Banana", "Mango"]

Here, fruits is an array containing three items.

Why Use Arrays in JavaScript?

  • ✅ Store multiple values in a single variable.
  • ✅ Access values using indexes.
  • ✅ Useful for lists (e.g., products, users, tasks).
  • ✅ Many built-in methods make manipulation easier.

Creating Arrays in JavaScript

There are two ways to create arrays:

1. Using Array Literal

let numbers = [10, 20, 30, 40];

2. Using Array Constructor

let numbers = new Array(10, 20, 30, 40);

👉 Preferred way is array literal because it’s shorter and cleaner.

Accessing Array Elements

Each element in an array has an index starting from 0.

let colors = ["Red", "Green", "Blue"];
console.log(colors[0]); // Red
console.log(colors[2]); // Blue

Changing Array Elements

let fruits = ["Apple", "Banana", "Mango"];
fruits[1] = "Orange";
console.log(fruits); // ["Apple", "Orange", "Mango"]

Array Length

The .length property gives the number of elements.

let items = ["Pen", "Book", "Laptop"];
console.log(items.length); // 3

Looping Through Arrays

You can loop through arrays using different methods:

For Loop

let numbers = [1, 2, 3, 4];
for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}

For…of Loop

for (let num of numbers) {
  console.log(num);
}

forEach Method

numbers.forEach((num) => console.log(num));

Common Array Methods in JavaScript

JavaScript arrays have many built-in methods.

Adding and Removing Elements

let animals = ["Dog", "Cat"];

// Add to end
animals.push("Elephant"); 
console.log(animals); // ["Dog", "Cat", "Elephant"]

// Remove from end
animals.pop(); 
console.log(animals); // ["Dog", "Cat"]

// Add to start
animals.unshift("Lion");
console.log(animals); // ["Lion", "Dog", "Cat"]

// Remove from start
animals.shift();
console.log(animals); // ["Dog", "Cat"]

Finding Elements

let fruits = ["Apple", "Banana", "Mango"];
console.log(fruits.indexOf("Banana")); // 1
console.log(fruits.includes("Mango")); // true

Slicing and Splicing

let numbers = [1, 2, 3, 4, 5];

// Slice (does not modify original)
let sliced = numbers.slice(1, 4);
console.log(sliced); // [2, 3, 4]

// Splice (modifies original)
numbers.splice(2, 1); 
console.log(numbers); // [1, 2, 4, 5]

Sorting Arrays

let fruits = ["Banana", "Apple", "Mango"];
fruits.sort();
console.log(fruits); // ["Apple", "Banana", "Mango"]

For numbers:

let nums = [40, 10, 30, 20];
nums.sort((a, b) => a - b);
console.log(nums); // [10, 20, 30, 40]

Joining and Splitting

let words = ["JavaScript", "is", "fun"];
console.log(words.join(" ")); // JavaScript is fun

Real-Life Example of Arrays in JavaScript

Imagine you are building a to-do list app:

let tasks = ["Buy groceries", "Clean room", "Study JavaScript"];

// Add new task
tasks.push("Exercise");

// Display all tasks
tasks.forEach((task, index) => {
  console.log(index + 1 + ". " + task);
});

👉 Output:

1. Buy groceries  
2. Clean room  
3. Study JavaScript  
4. Exercise

Multidimensional Arrays in JavaScript

Arrays can contain other arrays.

let matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

console.log(matrix[1][2]); // 6

Higher-Order Array Methods

Modern JavaScript provides advanced methods:

1. map() – transform array elements

let numbers = [1, 2, 3];
let squares = numbers.map(num => num * num);
console.log(squares); // [1, 4, 9]

2. filter() – filter elements

let ages = [15, 22, 18, 30];
let adults = ages.filter(age => age >= 18);
console.log(adults); // [22, 18, 30]

3. reduce() – accumulate values

let prices = [100, 200, 300];
let total = prices.reduce((sum, price) => sum + price, 0);
console.log(total); // 600

Best Practices for Arrays in JavaScript

  • Use const for arrays unless reassigning.
  • Use .map(), .filter(), .reduce() for cleaner code.
  • Avoid using for...in for arrays (meant for objects).
  • Prefer for...of or forEach for readability.

Mini Practice Exercise

👉 Write a function that finds the largest number in an array.

function findLargest(arr) {
  return Math.max(...arr);
}

console.log(findLargest([10, 25, 7, 40, 3])); // 40

External Resource

👉 Read the official MDN Arrays Documentation

Internal Resource

Check out Day 8: Functions in JavaScript, since arrays and functions are often used together.

Quick Recap

  • Arrays store multiple values in one variable.
  • Elements are accessed using indexes (start from 0).
  • Built-in methods like push, pop, map, filter, reduce make them powerful.
  • Arrays are essential for lists, tasks, products, and more.

What’s Next?

In this JavaScript tutorial series:

  • ✅ Day 8 → Functions in JavaScript
  • ✅ Day 9 → Arrays in JavaScript
  • 🔜 Day 10 → Objects in JavaScript

Leave a Reply

Your email address will not be published. Required fields are marked *

I’m Anand Gora, a passionate Full Stack Developer and coding blogger. With a B.Tech in Computer Science and hands-on experience in building scalable web applications using the MERN stack (MongoDB, Express.js, React.js, Node.js), I love turning ideas into functional, user-friendly digital products. Over the years, I’ve worked as a MERN Stack Developer and an Editorial Coordinator, which gave me expertise not only in coding but also in content creation, SEO, and digital marketing. This blend of technical and creative experience drives me to share practical coding tutorials, web development insights, and problem-solving tips with the developer community. When I’m not coding or writing, I enjoy experimenting with new frameworks, optimizing applications for performance, and contributing to projects that push the limits of innovation.
Website https://codingjive.com

Related Posts