JavaScript Arrays – A Complete Guide with Examples

---

Introduction

An Array in JavaScript is a high-level, list-like object used to store multiple values in a single variable. Arrays are zero-indexed and come with a variety of built-in methods for manipulation and traversal.

---

Creating an Array

There are multiple ways to create an array in JavaScript:

1. Using Array Literals

let arr = [1, 2, 3, 4];

2. Using the Array Constructor

let arr = new Array(5); // Creates an empty array with length 5
let arr2 = new Array(1, 2, 3); // Creates an array with values [1, 2, 3]

---

Array Properties

1. length Property

The .length property returns the number of elements in an array.

let arr = [1, 2, 3];
console.log(arr.length); // Output: 3

---

Common Array Methods

1. Adding and Removing Elements

let arr = [1, 2, 3];
arr.push(4); // [1, 2, 3, 4]
arr.pop();   // [1, 2, 3]
arr.shift(); // [2, 3]
arr.unshift(0); // [0, 2, 3]

---

2. Iteration Methods

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

// Using forEach
numbers.forEach(num => console.log(num * 2)); // 2, 4, 6, 8, 10

// Using map
let squared = numbers.map(num => num ** 2);
console.log(squared); // [1, 4, 9, 16, 25]

// Using filter
let evens = numbers.filter(num => num % 2 === 0);
console.log(evens); // [2, 4]

// Using reduce
let sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 15

---

3. Searching and Finding Elements

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

console.log(arr.indexOf(20)); // 1
console.log(arr.includes(50)); // false

let result = arr.find(num => num > 25);
console.log(result); // 30

---

4. Modifying Arrays

A. splice(start, deleteCount, item1, item2, ...) – Removes or replaces elements

let arr = [1, 2, 3, 4, 5];
arr.splice(2, 1, 99); // Removes 1 element at index 2 and inserts 99
console.log(arr); // [1, 2, 99, 4, 5]

B. slice(start, end) – Returns a shallow copy of a portion of an array

let arr = [1, 2, 3, 4, 5];
let slicedArr = arr.slice(1, 4); // Extracts elements from index 1 to 3
console.log(slicedArr); // [2, 3, 4]

C. sort(compareFunction) – Sorts the array

let numbers = [4, 2, 5, 1];
numbers.sort((a, b) => a - b); // Ascending order
console.log(numbers); // [1, 2, 4, 5]

let words = ["banana", "apple", "cherry"];
words.sort(); // Sorts alphabetically
console.log(words); // ["apple", "banana", "cherry"]

D. reverse() – Reverses the array order

let arr = [1, 2, 3];
arr.reverse();
console.log(arr); // [3, 2, 1]

---

5. Converting Arrays

let nested = [1, [2, 3], [4, [5]]];
console.log(nested.flat(2)); // [1, 2, 3, 4, 5]

---

Checking If a Value is an Array

To check if a variable is an array, use Array.isArray(value).

console.log(Array.isArray([1, 2, 3])); // true
console.log(Array.isArray("hello")); // false

---

Complex Example – Using Multiple Methods Together

Here’s an advanced example that combines multiple array methods:

let students = [
    { name: "Alice", age: 22, score: 85 },
    { name: "Bob", age: 20, score: 92 },
    { name: "Charlie", age: 23, score: 88 },
    { name: "David", age: 19, score: 76 }
];

// 1. Filter students with scores above 80
let topStudents = students.filter(student => student.score > 80);

// 2. Sort by age (ascending)
topStudents.sort((a, b) => a.age - b.age);

// 3. Get only the names
let names = topStudents.map(student => student.name);

console.log(names); // ["Bob", "Alice", "Charlie"]

---

Conclusion

JavaScript Arrays are incredibly powerful, offering a range of methods for manipulation, searching, and transformation. Mastering these methods will make you a more efficient JavaScript developer! 🚀

---