JavaScript Arrays: Detailed Notes
Created by Grok, xAI
May 14, 2025
Contents
1 Introduction to Arrays 1
1.1 Key Characteristics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.2 Creating Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
2 Accessing and Modifying Arrays 1
2.1 Accessing Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
2.2 Modifying Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
2.3 Array Length . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
3 Common Array Methods 2
3.1 Mutator Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
3.2 Accessor Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
3.3 Iteration Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
4 Multidimensional Arrays 3
5 Common Use Cases 4
5.1 Example: Filtering and Sorting . . . . . . . . . . . . . . . . . . . . . . . 4
5.2 Example: Flattening Nested Arrays . . . . . . . . . . . . . . . . . . . . 4
6 Best Practices 4
7 Conclusion 5
1 Introduction to Arrays
Arrays in JavaScript are ordered, list-like objects used to store multiple values
in a single variable. They are dynamic, meaning their size can change, and can
hold elements of any data type (numbers, strings, objects, etc.).
1.1 Key Characteristics
• Zero-based indexing: Array elements are accessed using indices starting
from 0.
• Dynamic length: Arrays can grow or shrink as needed.
• Heterogeneous elements: Arrays can store different data types.
• Object type: Arrays are a special type of object with numeric keys.
1.2 Creating Arrays
Arrays can be created using array literals or the Array constructor.
1 // Array literal
2 let fruits = [’apple’, ’banana’, ’orange’];
3
4 // Array constructor
5 let numbers = new Array(1, 2, 3, 4, 5);
6
7 // Array with predefined length
8 let empty = new Array(3); // [undefined, undefined, undefined]
Listing 1: Creating Arrays
2 Accessing and Modifying Arrays
Arrays are manipulated using indices and various built-in methods.
2.1 Accessing Elements
Elements are accessed using square bracket notation.
1 let colors = [’red’, ’blue’, ’green’];
2 console.log(colors[0]); // Output: red
3 console.log(colors[2]); // Output: green
Listing 2: Accessing Elements
2.2 Modifying Elements
Elements can be updated by assigning new values to specific indices.
1 let animals = [’cat’, ’dog’, ’bird’];
2 animals[1] = ’wolf’;
3 console.log(animals); // Output: [’cat’, ’wolf’, ’bird’]
1
Listing 3: Modifying Elements
2.3 Array Length
The length property returns the number of elements and can be used to modify
the array.
1 let items = [’pen’, ’book’, ’eraser’];
2 console.log(items.length); // Output: 3
3 items.length = 2; // Truncates array
4 console.log(items); // Output: [’pen’, ’book’]
Listing 4: Using length Property
3 Common Array Methods
JavaScript provides numerous methods to manipulate arrays.
3.1 Mutator Methods
These methods modify the original array.
• push(): Adds elements to the end.
• pop(): Removes the last element.
• shift(): Removes the first element.
• unshift(): Adds elements to the beginning.
• splice(): Adds/removes elements at a specific index.
1 let numbers = [1, 2, 3];
2 numbers.push(4, 5); // [1, 2, 3, 4, 5]
3 numbers.pop(); // [1, 2, 3, 4]
4 numbers.shift(); // [2, 3, 4]
5 numbers.unshift(0, 1); // [0, 1, 2, 3, 4]
6 numbers.splice(2, 1, ’a’); // [0, 1, ’a’, 3, 4]
Listing 5: Mutator Methods
3.2 Accessor Methods
These methods do not modify the original array but return a new value.
• slice(): Returns a portion of the array.
• concat(): Merges arrays.
• join(): Converts array to a string.
• indexOf(): Returns the index of an element.
2
1 let arr = [’a’, ’b’, ’c’, ’d’];
2 let sliced = arr.slice(1, 3); // [’b’, ’c’]
3 let combined = arr.concat([’e’, ’f’]); // [’a’, ’b’, ’c’, ’d’, ’e’,
’f’]
4 let str = arr.join(’-’); // ’a-b-c-d’
5 console.log(arr.indexOf(’c’)); // 2
Listing 6: Accessor Methods
3.3 Iteration Methods
These methods iterate over arrays, often with a callback function.
• forEach(): Executes a function for each element.
• map(): Creates a new array with transformed elements.
• filter(): Creates a new array with elements that pass a test.
• reduce(): Reduces the array to a single value.
1 let nums = [1, 2, 3, 4];
2
3 // forEach
4 nums.forEach(num => console.log(num * 2)); // 2, 4, 6, 8
5
6 // map
7 let doubled = nums.map(num => num * 2); // [2, 4, 6, 8]
8
9 // filter
10 let evens = nums.filter(num => num % 2 === 0); // [2, 4]
11
12 // reduce
13 let sum = nums.reduce((acc, num) => acc + num, 0); // 10
Listing 7: Iteration Methods
4 Multidimensional Arrays
Arrays can contain other arrays, creating multidimensional structures.
1 let matrix = [
2 [1, 2, 3],
3 [4, 5, 6],
4 [7, 8, 9]
5 ];
6 console.log(matrix[1][2]); // Output: 6
Listing 8: Multidimensional Array
3
5 Common Use Cases
Arrays are used in various scenarios, such as data manipulation and algorithm
implementation.
5.1 Example: Filtering and Sorting
1 let students = [
2 { name: ’Alice’, score: 85 },
3 { name: ’Bob’, score: 92 },
4 { name: ’Charlie’, score: 78 }
5 ];
6
7 // Filter students with score > 80
8 let highScores = students.filter(student => student.score > 80);
9
10 // Sort by score (descending)
11 highScores.sort((a, b) => b.score - a.score);
12
13 console.log(highScores);
14 // Output: [{ name: ’Bob’, score: 92 }, { name: ’Alice’, score: 85
}]
Listing 9: Filtering and Sorting
5.2 Example: Flattening Nested Arrays
1 let nested = [1, [2, 3], [4, [5, 6]]];
2 let flat = nested.flat(2); // [1, 2, 3, 4, 5, 6]
3 console.log(flat);
Listing 10: Flattening Arrays
6 Best Practices
• Use const for arrays to prevent reassignment, though array contents can
still be modified.
• Prefer array methods over manual loops for readability and maintainabil-
ity.
• Be cautious with methods like splice() and pop() as they mutate the orig-
inal array.
• Use Array.isArray() to check if a value is an array.
1 let arr = [1, 2, 3];
2 console.log(Array.isArray(arr)); // true
3 console.log(Array.isArray({})); // false
Listing 11: Checking Array Type
4
7 Conclusion
JavaScript arrays are versatile and powerful for managing collections of data.
Understanding their methods and best practices enables efficient coding and ro-
bust applications. For further learning, explore the MDN Array documentation.
